Get all options of a select with JavaScript/jQuery
This post will discuss how to get all options of a select in JavaScript and jQuery.
1. Using jQuery
With jQuery, you can use the .each() method, which is a concise and less error-prone way to iterate over the DOM elements.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("#pets option").each(function() { $("#container").append(this.value + ' '); // or $(this).val() }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> </select> <div id="container"></div> |
To filter the selected options, you can use the :selected property.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $("#pets option:selected").each(function() { $("#container").append(this.value + ' '); }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> </select> <div id="container"></div> |
A better alternative is to use the jQuery.map() instead.
JS
|
1 2 3 4 5 6 7 |
$(document).ready(function() { var values = $("#pets option").map(function() { return this.value; }).get().join(","); $("#container").html(values); }); |
HTML
|
1 2 3 4 5 6 7 8 9 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> </select> <div id="container"></div> |
2. Using JavaScript
In pure JavaScript, you can loop through each <option> using for-of statement:
JS
|
1 2 3 |
for (var option of document.getElementById("pets").options) { document.getElementById("container").append(option.value + ' '); } |
HTML
|
1 2 3 4 5 6 7 8 9 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> </select> <div id="container"></div> |
Alternatively, you can use the Array.prototype.map() method:
JS
|
1 2 |
var values = Array.from(document.getElementById("pets").options).map(e => e.value); document.getElementById("container").innerHTML = values; |
HTML
|
1 2 3 4 5 6 7 8 9 |
<label for="pets">Choose your pets:</label> <select name="pets" id="pets"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="rabbit">Rabbit</option> <option value="parrot">Parrot</option> </select> <div id="container"></div> |
That’s all about getting all options of a select in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)