Apply: Selected for multiple lists using jQuery

Question

I have a list from the database that appears in several 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 the array of values ​​from the database, you need to select only those elements that are in the database array, for example [2,4,7]. How do I click with jQuery, attr('selected') on these parameter 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> 

As above.

Answer 1

You can use .val() :

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

Hope this helps.

 $('#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> 

Answer 2

For completeness, I thought I would add a simple JavaScript solution.

Here is what I came up with using an array, 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>