Last Updated on August 29, 2022 by Roshan Parihar
In this tutorial, Learn how to get selected option value of a select dropdown using jQuery. The short answer is to use the change() event with val() function to find the selected option value on select.
You can also use the button click event using click() function of jQuery to find the dropdown selected option values. With the below examples, you can easily find a single select box option value and multiple select box option values.
Let’s find out how to get single-selected option values and multiple-selected options values with the examples given below.
Method 1: jQuery Get Selected Option Value Using change() and val() Function
If you want to get the value of the selected option for the single select box, you have to use the change() function of jQuery to trigger the code on the dropdown option change. After that, inside this function, use the val() to get the value of the select box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $("select").change(function(){ var myvalue = $(this).val(); alert("You have selected : "+myvalue); }); }); </script> <select id="Myselect"> <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
Choose your option from the select box given above.
Select the option from the select box given above. You will get the value of the selected option in the alert message box. This is the simple yet efficient script to get the value of the selected option on dropdown select.
If you want to get the select option value on button click, you can use the below 2nd method given below.
Method 2: On Button Click Event Using click() and val() Function
To find the select option value on the button click, you can use the click() function for the button click event. Inside this function, use the val() function to get the selected option value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $("button").click(function(){ var myvalue3 = $('select').find(':selected').val(); alert("You have selected : "+myvalue3); }); }); </script> <select> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> <option value="Fore">Fore</option> <option value="Five">Five</option> <option value="Six">Six</option> </select> <button type="button">Click to Get Value</button> |
Output
Choose your option from the select box given above.
The above example contains the button element and the select dropdown. You have to first select your required option from the dropdown. After that, click the button to get your selected value in an alert box.
If you want to find the multiple selected option from the multiple select boxes, then keep reading to find the answer to how to get multiple select boxes selected option value using jQuery.
How to Get Multiple Select Box Option Value on Multiple Select Using jQuery
In addition to the above example, you can find the values for the multiple selected options. For this, you have to use the multiple select boxes by using the attribute multiple in the HTML <select> tag.
The script is the same as the first method given above that uses the change() to get the option change events. But the script finds the change event of the multiple select boxes and gives the values in an array format using val() function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> jQuery(document).ready(function(){ jQuery("select").change(function(){ var myvalueMultiple = jQuery(this).val(); alert("You have selected : "+myvalueMultiple); }); }); </script> <select 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
Choose multiple options from the select box given above.
Now, press both the control key of the keyboard and the left mouse button to select multiple values. You will get the multiple values in an array format in the alert message box.
You May Also Like to Read