Javascript to Select Multiple options [closed]
A pure javascript solution
<select id="choice" multiple="multiple">
<option value="1">One</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<script type="text/javascript">
var optionsToSelect = ['One', 'three'];
var select = document.getElementById( 'choice' );
for ( var i = 0, l = select.options.length, o; i < l; i++ )
{
o = select.options[i];
if ( optionsToSelect.indexOf( o.text ) != -1 )
{
o.selected = true;
}
}
</script>
Although I agree this should be done server-side.
This type of thing should be done server-side, so as to limit the amount of resources used on the client for such trivial tasks. That being said, if you were to do it on the front-end, I would encourage you to consider using something like underscore.js to keep the code clean and concise:
var values = ["Red", "Green"],
colors = document.getElementById("colors");
_.each(colors.options, function (option) {
option.selected = ~_.indexOf(values, option.text);
});
If you're using jQuery, it could be even more terse:
var values = ["Red", "Green"];
$("#colors option").prop("selected", function () {
return ~$.inArray(this.text, values);
});
If you were to do this without a tool like underscore.js or jQuery, you would have a bit more to write, and may find it to be a bit more complicated:
var color, i, j,
values = ["Red", "Green"],
options = document.getElementById("colors").options;
for ( i = 0; i < values.length; i++ ) {
for ( j = 0, color = values[i]; j < options.length; j++ ) {
options[j].selected = options[j].selected || color === options[j].text;
}
}