How to programmatically set the values ​​(plural) of an element with multiple select elements 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 you want to select, for example, all those parameters that contain the text "nose", using the span onclick tag around any text.

Can you help me with onclick javascript code?

Thanks.

Answer 1

You need 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); } 

Example: http://jsfiddle.net/gPQ7U/

Answer 2

You can do it as follows:

<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>

code>