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?

Answer 1

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

Answer 2

Try this:

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

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

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

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

Answer 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

Answer 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());
});

Answer 6

$("option:selected", $("#TipoRecorde")).text()

Answer 7

This works for me:

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

jQuery version: 1.9.1

Answer 8

$("#DropDownID").val() will give the selected index value.

Answer 9

For the text of the selected item, use:

$('select[name="thegivenname"] option:selected').text();

For the value of the selected item, use:

$('select[name="thegivenname"] option:selected').val();

Answer 10

Use this

const select = document.getElementById("yourSelectId");

const selectedIndex = select.selectedIndex;
const selectedValue = select.value;
const selectedText = select.options[selectedIndex].text;   

Then you get your selected value and text inside selectedValue and selectedText.

Answer 11

Various ways

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

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

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

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

Answer 12

$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});

Answer 13

var someName = "Test";

$("#<%= ddltest.ClientID %>").each(function () {
    $('option', this).each(function () {
        if ($(this).text().toLowerCase() == someName) {
            $(this).attr('selected', 'selected')
        };
    });
});

That will help you to get right direction. Above code is fully tested if you need further help let me know.

Answer 14

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();

Answer 15

This code worked for me.

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

Answer 16

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

Instead of #selectID you can use any jQuery selector, like .selectClass using class.

As mentioned in the documentation here.

The :selected selector works for <option> elements. It does not work for checkboxes or radio inputs; use :checked for them.

.text() As per the documentation here.

Get the combined text contents of each element in the set of matched elements, including their descendants.

So you can take text from any HTML element using the .text() method.

Refer the documentation for a deeper explanation.

Answer 17

$("select[id=yourDropdownid] option:selected").text()

This works fine

Answer 18

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

Answer 19

Select Text and selected value on dropdown/select change event in jQuery

$("#yourdropdownid").change(function() {
    console.log($("option:selected", this).text()); //text
    console.log($(this).val()); //value
})

Answer 20

For getting selected value use

$('#dropDownId').val();

and for getting selected item text use this line:

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

Answer 21

Try:

$var = jQuery("#dropdownid option:selected").val();
   alert ($var);

Or to get the text of the option, use text():

$var = jQuery("#dropdownid option:selected").text();
   alert ($var);

More Info:

• http://api.jquery.com/val/
• http://api.jquery.com/text/

Answer 22

Simply try the following code.

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

it returns the text of the selected option.

Answer 23

var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;

Answer 24

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


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

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

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

Answer 25

Use:

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

Answer 26

the following worked for me:

$.trim($('#dropdownId option:selected').html())

Answer 27

In sibling case

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()

Answer 28

This work for me:

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

I'm using jQuery 1.10.2

Answer 29

$(function () {
  alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title>

  </head>
  <body>
    <form id="form1" runat="server">
      <div>
        <select id="selectnumber">
          <option value="1">one</option>
          <option value="2">two</option>
          <option value="3">three</option>
          <option value="4">four</option>
        </select>

      </div>
    </form>
  </body>
</html>

Answer 30

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>

Answer 31

If you want the result as a list, then use:

x=[];
$("#list_id").children(':selected').each(function(){x.push($(this).text());})

Answer 32

$("#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();

Answer 33

For multi-selects:

$("#yourdropdownid :selected").map(function(i, v) { return $.trim($(v).text()); }

Answer 34

Just add the below line

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

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

Answer 35

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

Or you can use this

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