JavaScript Get Selected Options

If you have created a multi-select dropdown box, you cannot retrieve the selected options by users like a normal dropdown box. So, in this article, we’ll see how to use JavaScript to get selected options from a multiple-selection dropdown.

What is a multi-select dropdown?

Allows users to select multiple options by creating multiple select lists or multiple select boxes unlike a regular dropdown, which only allows a single selection, a multi-select dropdown empowers users to choose multiple options. When you want to allow users to select multiple options in one place, you can create a multi-select drop-down box it will handle a large number of options. It occupies less screen space compared to displaying individual checkboxes for each option.

Why do we use a multi-select drop-down instead of checkboxes?

Checkboxes can take up a significant amount of screen space when you have a long list of options, whereas a multi-select drop-down box takes up less space, so we can create it. And compared to checkboxes, the dropdown box presents a cleaner and less cluttered interface and it keeps the options hidden until the user activates for user experience. Sometimes, checkboxes may not align with the overall design aesthetics or style of a web page or application. In such cases, a multi-select dropdown box can provide a more cohesive and visually consistent interface.

Creating a simple Multi-select Dropdown

We will create a normal dropdown box using the <select> tag and give the options in the <option> tag. Similarly, if you add a “multiple” attribute in <select> tag then a normal dropdown box will be converted to the multi-select dropdown box. And we can select multiple options by holding the ctrl button.

For example:

<label for="fruits">Select your favorite fruits:</label>
  <select id="fruits" name="fruits" multiple>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
    <option value="grape">Grape</option>
    <option value="mango">Mango</option>
  </select><br><br>
  <button type="submit" onclick="getSelectedOptions()">Get Selected Options</button>
  <h3 id="result"></h3>

Output:

In the above code, we have created the <select> tag with “multiple“, which allows users to select multiple options. Then inside the <select>, we create some <option> tags and pass the different values ​​separately inside the option tag. Additionally, we have a button with an onclick attribute that triggers a JavaScript function named getSelectedOptions() when clicked. And finally, we have a <h3> tag with idname to display the user-selected options.

3 Methods to get selected options from a multi-select dropdown

We will write the missing function “getSelectedOptions()” differently for the Multi-select dropdown box created above in these three methods.

1.selectedOptions property

In this method, we’ll use the selectedOptions property of the <select> element. This property returns a collection of the currently selected options. We can access each selected option by using its index or looped through using a for...of loop.

function getSelectedOptions() {
  const selectElement = document.getElementById('fruits');
  const selectedOptions = selectElement.selectedOptions;
  const arr = [];

  for (const option of selectedOptions) {
    arr.push(option.value);
  }
  return document.getElementById("result").innerHTML = arr;
}

Output:

2. “options” and “selected” properties

We can iterate through all the options of the <select> element and check the selected property of each option. This method allows you to perform additional operations or filtering based on the selected options.

function getSelectedOptions() {
  const selectElement = document.getElementById('fruits');
  const options = selectElement.options;
  const arr = [];

  for (const option of options) {
    if (option.selected) {
      arr.push(option.value);
    }
  }
  return document.getElementById("result").innerHTML = arr;
}

Output:

3. Finding if users select specific options

You can even find out if users select a specific option. In the example below it tells us only if users select apple and banana:

function getSelectedOptions() {
  const selectElement = document.getElementById('fruits');
  const selectedOptions = selectElement.selectedOptions;

  for (const option of selectedOptions) {
    if (option.value === 'apple') {
      // Perform an action specific to the "apple" selection
      return document.getElementById("result").innerHTML ='An apple was selected!';
    } else if (option.value === 'banana') {
      // Perform an action specific to the "banana" selection
      return document.getElementById("result").innerHTML ='A banana was selected!';
    }
    // Add more conditions for other selected options...
    else{
      return document.getElementById("result").innerHTML ='Users Selected Different options';
    }
  }
}

Output: