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

Viewed 2256367

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

35 Answers

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.

For those who are using SharePoint lists and don't want to use the long generated id, this will work:

var e = $('select[title="IntenalFieldName"] option:selected').text();

This code worked for me.

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

Simply try the following code.

var text= $('#yourslectbox').find(":selected").text();

it returns the text of the selected option.

$("#dropdown").find(":selected").text();


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

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

$("#dropdown").children(":selected").text();

Try

dropdown.selectedOptions[0].text

function read() {
  console.log( dropdown.selectedOptions[0].text );
}
<select id="dropdown">
  <option value="1">First</option>
  <option value="2">Second</option>
</select>
<button onclick="read()">read</button>

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

if you use asp.net and write

<Asp:dropdownlist id="ddl" runat="Server" />

then you should use

$('#<%=ddl.Clientid%> option:selected').text();

Just add the below line

$(this).prop('selected', true);

replaced .att to .prop it worked for all browsers.

$("#dropdownid").change(function(el) {
    console.log(el.value);
});

Or you can use this

$("#dropdownid").change(function() {
    console.log($(this).val());
});
Related