In this tutorial, learn how to get text of selected dropdown using jQuery. The short answer is: use jQuery text() and find() to find the selected option of the select box.
You also have to use the change event of jQuery. The change event executes the code when you change the select box option. You may also like to read how to get the value of the selected dropdown option using jQuery.
How to Get Text of Selected Dropdown Option Using jQuery
To perform this task, you have to use the $(this) selector of jQuery. The $(this) selector selects the currently selected value of the drop-down. However, you also have to use the find() of jQuery to find the currently selected option.
If you do not use the find function of jQuery, the $(this) selector gives all the option text including the selected one. So, use the find() of jQuery to get text of selected dropdown option with jQuery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('.drpselecttext').change(function(){ var myselectedtxt = $(this).find("option:selected").text(); $('.myselectedtxtdiv').html("The selected text is:<strong> "+myselectedtxt+"</strong>"); }); }); </script> <select class="drpselecttext"> <option value="">Choose Your Option</option> <option value="1">Virat Kohli</option> <option value="2">Mahendra Singh Dhoni</option> <option value="3">Rohit Sharma</option> </select> <div class="myselectedtxtdiv"></div> |
Output
The above example contains the select dropdown option and jQuery change event. Select your option from the dropdown list to execute the code and get selected option text content.
You will get the output in the div element using the jQuery html(). However, you can also get this output in the alert message as per your requirement.
Hope, you like this tutorial of how to get text of selected dropdown using jQuery. If you have any query regarding the tutorial, please comment below.
Also tell me, which method are you using to get the text content of the selected dropdown option using jQuery.