Get all selected values of a multi-select dropdown list with jQuery

This post will discuss how to get all selected values of a multi-select dropdown list with jQuery.

With jQuery, you can use the .val() method to get an array of the selected values on a multi-select dropdown list.

JS

$(document).ready(function() {

$('#submit').click(function() {

var selected = $('#pets').val();

alert(selected);

})

});

<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>

Alternatively, you can use the jQuery.map() instead, as shown below:

$(document).ready(function() {

$('#submit').click(function() {

var selected = $("#pets :selected").map((_, e) => e.value).get();

alert(selected);

});

<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>

If you need to process each array individually, you can use the .each() method:

$(document).ready(function() {

$('#submit').click(function() {

$("#pets :selected").each(function() {

alert(this.value);

});

<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>

That’s all about getting all selected values of a multi-select dropdown list with jQuery.

Also See:

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