Last Updated on August 5, 2022 by Roshan Parihar
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.
Method 1: Get Dropdown Selected Text Using jQuery find() and text()
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 for getting the option text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('select').change(function(){ var myselectedtxt = $(this).find("option:selected").text(); $('div.myselectedtxtdiv').html("The selected text is:<strong> "+myselectedtxt+"</strong>"); }); }); </script> <select> <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><br><br> <div class="myselectedtxtdiv"></div> |
Output
The above example contains the select dropdown option and jQuery change event. Select your option from the select box to execute the code and get the text of selected option 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.
Method 2: Using jQuery text() and ‘selected’ Attribute
In addition to the above example, you can also get the select box option text using the text() alone with selected attribute of dropdown options. See the example given below to learn the method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> $(document).ready(function(){ $('select').change(function(){ var myselectedtxt = $("select option:selected").text(); $('div.myselectedtxtdiv').html("The selected text is:<strong> "+myselectedtxt+"</strong>"); }); }); </script> <select> <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><br><br> <div class="myselectedtxtdiv"></div> |
Output
When you select the above dropdown, you will get a dropdown selected option text content using jQuery. It works the same as the previous example to get the select box text content.
You may also like to read
- How to Get Select Box Option Value on Select Using jQuery
- Show/Hide Div On Dropdown Selected Using JQuery
- Change Image On Dropdown Select Option Using JQuery
I hope you like this tutorial on how to get the text of the selected dropdown using jQuery.
References
This is a great site.
I just found it and am exploring.