Set selections in a multiple select element with ES6

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:

<select id="selectElement" size="3" multiple>
    <option value="oranges">Oranges</option>
    <option value="apples">Apples</option>
    <option value="cherries">Cherries</option>
</select>
let selectElement = document.getElementById('selectElement');
let a = ['oranges', 'cherries'];
for (option of selectElement.options) option.selected = 
    a.includes(option.value);  

There you go!

(Photo by Anthony Martino on Unsplash)

Your post must include a link to this post.

How does this work?
Write a response on your own website and include a link to this post. Then submit your response’s URL here. Your response may appear here after moderation. To update or remove it, edit or delete your original post and submit the same URL again. Learn more about Webmentions.