Sometimes, we want to get the selected values of a multiple select element on change with JavaScript.

In this article, we’ll look at how to get the selected values of a multiple select element on change with JavaScript.

How to get the selected values of a multiple select element on change with JavaScript?

To get the selected values of a multiple select element on change with JavaScript, we can get all the options from the selectedOptions property of the select element.

For instance, we write:

<select multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="mango">Mango</option>
  <option value="grape">Grape</option>
  <option value="watermelon">watermelon</option>
</select>

to add a multi-select element.

Then we write:

const select = document.querySelector('select')
select.onchange = (e) => {
  const selectedVals = [...e.target.selectedOptions].map(o => o.value)
  console.log(selectedVals)
}

to select the select element with querySelector.

We then set the select.onchange property to a function that gets all the selected options.

To do this, we get all the selected options with e.target.selectedOptions.

And then we spread them into an array and call map with a callback that returns the value from each selected option.

Conclusion

To get the selected values of a multiple select element on change with JavaScript, we can get all the options from the selectedOptions property of the select element.