How to Get Selected Values from a Multi-Select Element in JavaScript?

Acquire All Selected Options from a Multi-Select Element

In the realm of web development, a prevalent requirement is to retrieve the selected values from a multiple select box using JavaScript. To address this need, let's delve into the provided solutions.

One approach involves iterating over the options in the select element, checking whether they are selected, and accumulating their values into an array. While this method is straightforward, it can be cumbersome, especially when handling large lists.

A more elegant solution, as suggested in the second answer, involves the getSelectValues() function. It efficiently loops through the options, collecting the selected values, whether they be derived from the option's value attribute or its text content.

Consider the example provided:

<code class="html"><select multiple>
  <option>opt 1 text</option>
  <option value="opt 2 value">opt 2 text</option>
</select>

<button onclick="
  var el = document.getElementsByTagName('select')[0];
  alert(getSelectValues(el));
">Show selected values</button></code>

When the button is clicked, the getSelectValues() function captures the selected option values and displays them in an alert dialog. This demonstrates the ease and flexibility of this method.

Whether you opt for manual iteration or utilize the getSelectValues() function, you have a robust solution to retrieve the selected values from a multiple select box, empowering you to access and manipulate data effectively in your web applications.

The above is the detailed content of How to Get Selected Values from a Multi-Select Element in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!