Get selected values in a multi-select drop-down with JavaScript

This post will discuss how to get the selected values in a multi-select dropdown in plain JavaScript.

We can select the multiple options in the dropdown list using the multiple attribute. There are several ways in JavaScript to return the selected values in a multi-select dropdown.

1. Using `for…of` statement

The idea is to iterate over all dropdown options using the for…of statement and collect values of all the <option> elements having the selected attribute.

In JavaScript, the options property can be used to get the list of <option> elements contained within the <select> element.

JS

document.getElementById('submit').onclick = function() {

var selected = [];

for (var option of document.getElementById('pets').options)

{

if (option.selected) {

selected.push(option.value);

}

alert(selected);

}

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

<button id="submit">Get Selected Values</button>

Edit in JSFiddle

2. Using `filter()` with `map()` function

The idea is to get an array of the all <option> elements contained within the <select> element and filter the selected ones. Then, we map the options into their respective values using the map() function.

JS

document.getElementById('submit').onclick = function() {

var select = document.getElementById('pets');

var selected = [...select.options]

.filter(option => option.selected)

.map(option => option.value);

alert(selected);

}

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

<button id="submit">Get Selected Values</button>

Edit in JSFiddle

3. Using `selectedOptions` property

Instead of getting the list of all <option> elements, we can use the property selectedOptions to get the list of only selected <option> elements.

The following code gets the array of selected options using selectedOptions with the spread syntax (or Array.from()), and then map the <option> elements into their respective values.

JS

document.getElementById('submit').onclick = function() {

var select = document.getElementById('pets');

var selected = [...select.selectedOptions]

.map(option => option.value);

alert(selected);

}

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

<button id="submit">Get Selected Values</button>

Edit in JSFiddle

4. Using `querySelectorAll()` method

Another plausible way is to use the :checked pseudo-class selector, which can match with any checked option in a <select> element. When used with the querySelectorAll() method, it returns the list of all checked options.

JS

document.getElementById('submit').onclick = function() {

var checked = document.querySelectorAll('#pets :checked');

var selected = [...checked].map(option => option.value);

alert(selected);

}

HTML

<label for="pets">Choose your pets:</label>

<option value="rabbit">Rabbit</option>

<option value="parrot">Parrot</option>

</select>

<button id="submit">Get Selected Values</button>

Edit in JSFiddle

That’s all about getting selected values in a multi-select drop-down with JavaScript.

Get selected values in a multi-select drop-down with JavaScript

1. Using for…of statement

JS

HTML

2. Using filter() with map() function

JS

HTML

3. Using selectedOptions property

JS

HTML

4. Using querySelectorAll() method

JS

HTML

Share this:

1. Using `for…of` statement

2. Using `filter()` with `map()` function

3. Using `selectedOptions` property

4. Using `querySelectorAll()` method