2530

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

5

35 Answers 35

4029
$("#yourdropdownid option:selected").text();
4
  • 218
    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.
    – MHollis
    May 18, 2012 at 14:04
  • 45
    I second the comment about is() returning a boolen; alternatively, use the following small alteration: $('#yourdropdownid').children("option:selected").text();
    – scubbo
    Jun 12, 2012 at 14:56
  • 104
    $('select').children(':selected') is the fastest way: jsperf.com/get-selected-option-text
    – Seimen
    Apr 24, 2013 at 13:51
  • And if have scape caracteres like \n \t you can add .trim() getting like this: $("#yourdropdownid option:selected").text().trim();
    – Leffa
    Apr 22, 2022 at 20:39
290

Try this:

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

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

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

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.

0
120

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

1
  • ``` <script> $(document).ready(function() { $("#submit").click(function() { var value = $("#myselection option:selected"); alert(value.text()); }); }); </script> ``` <br> Link: geeksforgeeks.org/… Jul 22, 2022 at 19:47
81

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());
});
69
$("option:selected", $("#TipoRecorde")).text()
0
56

This works for me:

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

jQuery version: 1.9.1

0
54

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

2
  • 40
    Not exactly the answer to the question, but was useful for me. The question wants the selected text.
    – Peter
    Nov 28, 2011 at 14:50
  • @Neeraj, thank you for the answer. I discovered that val() != text() and in case when you have more then one value you will get something like.... '\n\tBYELORUSSIAN\n\tCATALAN\n\tCHINESESIMPLIFIED\n\tCHINESETRADITIONAL\n\tCROATIAN\n\tCZECH\n\tDANISH\n\tDUTCH\n\tESPERANTO\n\tESTONIAN\n\tFINNISH\n\tFRENCH\n\tGALICIAN\n\tGERMA' Feb 14, 2023 at 9:11
44

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

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.

0
35

Various ways

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

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

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

4. $("#myselect").find(":selected").text();
32
$("#dropdownID").change(function(){
  alert($('option:selected', $(this)).text());
});
0
31
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.

0
20

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

This code worked for me.

$("#yourdropdownid").children("option").filter(":selected").text();
1
  • Works too! And if have scape caracteres like \n \t you can add .trim() getting like this: $("#yourdropdownid").children("option").filter(":selected").text().trim();
    – Leffa
    Apr 22, 2022 at 20:39
17
 $("#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.

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

This works fine

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


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

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

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

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:

14

Simply try the following code.

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

it returns the text of the selected option.

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

For getting selected value use

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

and for getting selected item text use this line:

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

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
})
12
var e = document.getElementById("dropDownId");
var div = e.options[e.selectedIndex].text;
0
9

Use:

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

the following worked for me:

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

This work for me:

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

I'm using jQuery 1.10.2

7

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

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

Click to see OutPut Screen

0
6

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>

1
  • 1
    Thanks for providing a pure-JS approach. Apr 22, 2020 at 0:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.