Skip to main content

How to Get All Selected Values from a Multiple Select Field in JavaScript

A <select> element with the multiple attribute allows users to choose more than one option. A common task in form handling is to collect all of the selected values into an array for processing or submission. Modern JavaScript provides several clean, declarative ways to achieve this.

This guide will teach you the most effective methods for getting all selected values from a multi-select dropdown. We will cover the direct approach using querySelectorAll() and the functional approach of filtering and mapping all options.

The Core Task: Getting Selected Values​

The goal is to get the value of each selected <option> and collect them into a simple array.

HTML:

<select multiple id="language-select">
  <option value="js">JavaScript</option>
  <option value="ts" selected>TypeScript</option>
  <option value="py" selected>Python</option>
  <option value="go">Go</option>
</select>

Given the HTML above, we want to get the array ['ts', 'py'].

The most direct and readable way to solve this is to use querySelectorAll() with the :checked pseudo-class to select only the chosen options, and then use map() to extract their values.

The logic:

  1. Use querySelectorAll('option:checked') on the <select> element to get a NodeList of only the selected <option> elements.
  2. Convert the NodeList to an array using Array.from().
  3. Use the map() method on the resulting array to create a new array containing just the value of each option.

The following is the recommended solution for its clarity and efficiency.

const selectElement = document.getElementById('language-select');

// This can be attached to a button click or a form submit event
function getSelectedValues() {
  const selectedOptions = selectElement.querySelectorAll('option:checked');
  
  const values = Array.from(selectedOptions).map(option => option.value);
  
  return values;
}

console.log(getSelectedValues()); // Output: ['ts', 'py']

The Functional Alternative: Filtering select.options​

Another clean, functional approach is to get all the options from the select.options collection, filter them down to only the selected ones, and then map them to their values.

The logic:

  1. Get the select.options HTMLOptionsCollection.
  2. Convert it to an array with Array.from().
  3. Use .filter() to keep only the options where option.selected is true.
  4. Chain .map() to extract the value from each of the remaining options.

Solution:

const selectElement = document.getElementById('language-select');

function getSelectedValues() {
  return Array.from(selectElement.options)
    .filter(option => option.selected)
    .map(option => option.value);
}

console.log(getSelectedValues()); // Output: ['ts', 'py']
note

This method is just as effective as the querySelectorAll approach and is a matter of stylistic preference.

The Manual Looping Method​

The classic imperative approach is to create an empty array and manually loop through all the options, pushing the values of the selected ones.

const selectElement = document.getElementById('language-select');

function getSelectedValues() {
  const selectedValues = [];
  
  for (const option of selectElement.options) {
    if (option.selected) {
      selectedValues.push(option.value);
    }
  }
  
  return selectedValues;
}

console.log(getSelectedValues()); // Output: ['ts', 'py']
note

While this works perfectly, the functional methods from the previous sections are generally preferred in modern JavaScript for their conciseness and declarative style.

Conclusion​

For getting all selected values from a multi-select field, modern JavaScript provides several clean and effective solutions.

  • The querySelectorAll('option:checked') method combined with map() is the recommended best practice. It is declarative, efficient, and clearly communicates the intent.
  • The Array.from(select.options).filter(...).map(...) chain is an equally powerful and readable functional alternative.
  • A manual for...of loop is a perfectly valid but more verbose approach.

By using these modern array and DOM methods, you can reliably and efficiently gather user selections from any multi-select input.

Table of Contents