How to Get Dropdown Selected Text Using jQuery

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.

Test it Live

<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>

$(document).ready(function(){

$('select').change(function(){

var myselectedtxt = $(this).find("option:selected").text();

$('div.myselectedtxtdiv').html("The selected text is:<strong> "+myselectedtxt+"</strong>");

});

</script>

<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>

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.

<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>

$(document).ready(function(){

$('select').change(function(){

var myselectedtxt = $("select option:selected").text();

$('div.myselectedtxtdiv').html("The selected text is:<strong> "+myselectedtxt+"</strong>");

});

</script>

<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>

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

I hope you like this tutorial on how to get the text of the selected dropdown using jQuery.

References

Stackoverflow Discussion

jQuery Tutorial

How to Get Dropdown Selected Text Using jQuery

Method 1: Get Dropdown Selected Text Using jQuery find() and text()

Method 2: Using jQuery text() and ‘selected’ Attribute

Related Posts:

One reply on “How to Get Dropdown Selected Text Using jQuery”