Get selected text from a drop-down list (select box) using jQuery

Question

How can I get the selected text (not the selected value) from a drop-down list in jQuery?

Solution 1

$("#yourdropdownid option:selected").text();

Solution 2

Try this:

$("#myselect :selected").text();

For an ASP.NET dropdown you can use the following selector:

$("[id*='MyDropDownId'] :selected")

Solution 3

The answers posted here, for example,

$('#yourdropdownid option:selected').text();

didn't work for me, but this did:

$('#yourdropdownid').find('option:selected').text();

It is possibly an older version of jQuery.

Solution 4

If you already have the dropdownlist available in a variable, this is what works for me:

$("option:selected", myVar).text()

The other answers on this question helped me, but ultimately the jQuery forum thread $(this + "option:selected").attr("rel") option selected is not working in IE helped the most.

Update: fixed the above link

Solution 5

This works for me

$("#dropdownid").change(function() {
    alert($(this).find("option:selected").text());
});

If the element created dynamically

$(document).on("change", "#dropdownid", function() {
    alert($(this).find("option:selected").text());
});

View more solutions

Comments

[ankush981]

Just my two cents: An "ASP" drop-down is no special; it's just good old HTML. :-)

[Dilip Kumar Yadav]

One can refer this article: javascriptstutorial.com/blog/…

[rogerdpack]

for vanilla javascript way, see stackoverflow.com/a/5947/32453

[Shahid Hussain Abbasi]

Just $(this).prop('selected', true); replaced .att to .prop it worked for all browsers

[Ali NajafZadeh]

$("#yourdropdownid option:selected").text();

[kingfleur]

Not exactly the answer to the question, but was useful for me. The question wants the selected text.

[MHollis]

I think this should be $("#yourdropdownid").children("option").filter(":selected").‌​text() since is() returns a boolean of whether the object matches the selector or not.

[scubbo]

I second the comment about is() returning a boolen; alternatively, use the following small alteration: $('#yourdropdownid').children("option:selected").text();

[Simon]

$('select').children(':selected') is the fastest way: jsperf.com/get-selected-option-text

[Daniel Tonon]

Thanks for providing a pure-JS approach.

[Leffa]

And if have scape caracteres like \n \t you can add .trim() getting like this: $("#yourdropdownid option:selected").text().trim();

[Leffa]

Works too! And if have scape caracteres like \n \t you can add .trim() getting like this: $("#yourdropdownid").children("option").filter(":selected").‌​text().trim();