Last Updated on August 12, 2022 by Roshan Parihar
In this tutorial, learn how jQuery get multiple selected values of the select dropdown box. The short answer is to use the change event using change() function and get selected options values using val() function.
There can be many other easiest examples to find dropdown option selected values. Let’s find the examples given below.
Method 1: jQuery Get Multiple Select Values Using change() and val()
The easiest method to get multiple selected values is to use the change event of the select box using change() function of jQuery. After that, on each selection of select box options, you need to get the selected values using val(). See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $("select").change(function(){ var SelMultiValues = $(this).val(); alert("You have selected : "+SelMultiValues); }); }); </script> <select size="5" multiple> <option value="HTML">HTML</option> <option value="CSS">CSS</option> <option value="PHP">PHP</option> <option value="Java">Java</option> <option value="Bootstrap">Bootstrap</option> <option value="Python">Python</option> </select> |
Output
Use CTRL+ Mouse Click to select multiple options above.
The above example contains the multiple select boxes to select multiple values. You have to keep pressing the CTRL button of your keyword and use your mouse to click the options for multiple selections. On the selection of each option, you will get the selected values in the alert box in an array format.
Method 2: Find Multiple Selected Values on Click Event Using each() and val()
To find the multiple selected values, you can use the click event of the select box selected option using click(). Now, check each selection of options in the select box using the each() function of jQuery. After that, use the val() function to get the multiple selected values as given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $("select").click(function() { $(this).each(function() { alert($(this).val()); }); }); }); </script> <select size="5" multiple> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> <option value="Four">Four</option> <option value="Five">Five</option> <option value="Six">Six</option> </select> |
Output
Use CTRL+ Mouse Click to select multiple options above.
You have to select multiple options given in the select box above. Keep pressing the CTRL button of your keyword and click multiple options to select. You will get your selected options values in the alert box in an array format.
Method 3: Using Click Event with toArray(), map(), and join() Function
In addition to the above examples, you can also use the click event along with functions like toArray(), map(), and join() of jQuery. You will have to check the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $("select").click(function() { var multiselectvalues= $('select option:selected').toArray().map(item => item.value).join(); alert(multiselectvalues); }); }); </script> <select id="Myselectmultiple" size="5" multiple> <option value="Red">Red</option> <option value="Green">Green</option> <option value="Blue">Blue</option> <option value="Orange">Orange</option> <option value="Yellow">Yellow</option> <option value="Pink">Pink</option> </select> |
Output
Use CTRL+ Mouse Click to select multiple options above.
When you select the multiple options given in the select box above, you will get the multiple values in the alert box using jQuery.
You May Also Like to Read