DEV Community

loading...
Cover image for Set selections in a multiple select element with ES6

Set selections in a multiple select element with ES6

latz profile image Latz ・1 min read

If you're looking on the web for a solution to programmatically set the selections of a multiple select element in JavaScript you most likely find answers using jQuery, an indexed loop and an if condition, or some other complicated stuff. Modern browsers and ES6 gives you a simple solution in (almost) a single line of code:

HTML

<select id="selectElement" size="3" multiple>
    <option value="oranges">Oranges</option>
    <option value="apples">Apples</option>
    <option value="cherries">Cherries</option>
</select>
Enter fullscreen mode Exit fullscreen mode

JavaScript

let selectElement = document.getElementById('selectElement');
let a = ['oranges', 'cherries'];
for (option of selectElement.options) option.selected = 
    a.includes(option.value);  
Enter fullscreen mode Exit fullscreen mode

There you go!
(Photo by Anthony Martino on Unsplash)

Discussion (0)

pic
Editor guide