CODEWITHSUNDEEP
javascriptjqueryhtmlmultiple-select
sealview
sealview

Reputation: 109

Set selected option to multiple list using jQuery

I have a list from DB which is displayed in select multiple tags:

<select multiple="multiple" id="list" name="color">
  <option value="1">Red</option>
  <option value="2">Green</option>
  <option value="3">Blue</option>
  <option value="4">Magenta</option>
  <option value="5">Black</option>
  <option value="6">Cyan</option>
  <option value="7">Yellow</option>
</select>

Given an array of values from DB, need to select only those items that are found in the DB array, for example [2,4,7]. How do I push, with jQuery, attr('selected') to these option tags?

<select multiple="multiple" id="list" name="color">
  <option value="1">Red</option>
  <option value="2" selected="selected">Green</option>
  <option value="3">Blue</option>
  <option value="4" selected="selected">Magenta</option>
  <option value="5">Black</option>
  <option value="6">Cyan</option>
  <option value="7" selected="selected">Yellow</option>
</select>

Like above.

Upvotes: 5

Views: 149

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You've just to use the .val() method to achieve that :

$('#list').val([2,4,7]);


$('#list').val([2,4,7]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" id="list" name="color">
  <option value="1">Red</option>
  <option value="2">Green</option>
  <option value="3">Blue</option>
  <option value="4">Magenta</option>
  <option value="5">Black</option>
  <option value="6">Cyan</option>
  <option value="7">Yellow</option>
</select>

Upvotes: 9

Rounin
Rounin

Reputation: 29463

For the sake of completeness, I thought I would add a plain javascript solution.

Here's what I came up with, using an array, a loop, document.querySelector and setAttribute:

var preSelected = [2,4,7];

for (var i = 0; i < preSelected.length; i++) {
var option = document.querySelector('#list option[value="' + preSelected[i] + '"]');
option.setAttribute('selected','selected');
}
<select multiple="multiple" id="list" name="color">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
<option value="4">Magenta</option>
<option value="5">Black</option>
<option value="6">Cyan</option>
<option value="7">Yellow</option>
</select>

Upvotes: 2

Related Questions