How do I programatically set the values (plural) of a multi-select box element using javascript?

Question

I have a form like this:

<form action="/cgi-bin/cgi_info.py" method="POST">
  <select id="faults" class="multiselect" multiple="multiple" name="faults[]">
    <option>Big nose
    <option>Big feet
    <option>Wrinkly nose
    <option>Wrinkly feet
    <option>Spotty nose
    <option>Spotty feet
  </select>
</form>

And want to select, for example, all those options containing the text 'nose' using a span tag onclick event around some text.

Can you help me with the onclick javascript code?

Thanks.

Answer 1

You have to iterate over the <option> elements, check the contents and set the selected property accordingly:

var faults = document.getElementById("faults").options,
    reg = /\bnose\b/;

for (var i=0, max = faults.length; i < max; i++) {
    faults[i].selected = reg.test(faults[i].innerHTML);
} 

Answer 2

You could do it like this:

<form action="/cgi-bin/cgi_info.py" method="POST"> <select id="faults" class="multiselect" multiple="multiple" name="faults[]"> <option>Big nose <option>Big feet <option>Wrinkly nose <option>Wrinkly feet <option>Spotty nose <option>Spotty feet </select> </form>

<script> function search(){ for (i=0; i <= document.getElementById('faults').options.length - 1; i++){ if (document.getElementById('faults').options[i].text.indexOf('nose') > 0) { alert(document.getElementById('faults').options[i].text); } } } </script>

<input type="button" value="Find by text" onclick="search();"></input>