Question

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

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

Enquirer: haddar

||

Solution #1:

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

Solution #2:

Try this:

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

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

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

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.

Respondent: JYX

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

Respondent: Kirk Liemohn

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());
});
Respondent: Prabhagaran

Solution #6:

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

Solution #7:

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

Respondent: Neeraj

Solution #8:

This works for me:

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

jQuery version: 1.9.1

Respondent: Binita Bharati

Solution #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();
Respondent: Kamrul

Solution #10:

Various ways

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

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

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

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

Solution #11:

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

Solution #12:

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.

Solution #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.

Respondent: Zarni

Solution #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();
Respondent: FAA

Solution #15:

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

Respondent: Nikhil Agrawal

Solution #16:

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

This works fine

Solution #17:

For getting selected value use

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

and for getting selected item text use this line:

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

Solution #18:

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

Solution #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
})
Respondent: Sandeep Shekhawat

Solution #20:

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:

Respondent: Vishal Thakur

Solution #21:

Simply try the following code.

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

it returns the text of the selected option.

Respondent: Muddasir23

Solution #22:

Use:

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

Solution #23:

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

Solution #24:

the following worked for me:

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

Solution #25:

This work for me:

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

I’m using jQuery 1.10.2

Solution #26:

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()
Respondent: vineet

Solution #27:

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

Respondent: Bhanu Pratap

Solution #28:

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

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

Solution #29:

This code worked for me.

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

Solution #30:

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


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

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

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

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy