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?

Just my two cents: An "ASP" drop-down is no special; it's just good old HTML. :-) — ankush981, Commented Jun 4, 2015 at 6:20
One can refer this article: javascriptstutorial.com/blog/… — Dilip Kumar Yadav, Commented Oct 18, 2016 at 12:02
for vanilla javascript way, see stackoverflow.com/a/5947/32453 — rogerdpack, Commented Jan 18, 2017 at 19:27
Just $(this).prop('selected', true); replaced .att to .prop it worked for all browsers — Shahid Hussain Abbasi, Commented Jan 12, 2019 at 11:13

rahul · Accepted Answer · 2009-10-29 12:05:38Z

4031

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

answered Oct 29, 2009 at 12:05

rahul

186k49 gold badges236 silver badges264 bronze badges

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
Commented 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
Commented Jun 12, 2012 at 14:56
105

$('select').children(':selected') is the fastest way: jsperf.com/get-selected-option-text
– Seimen
Commented 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
Commented Apr 22, 2022 at 20:39

Add a comment |

kgiannakakis · Accepted Answer · 2009-10-29 12:04:28Z

291

Try this:

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

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

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

answered Oct 29, 2009 at 12:04

kgiannakakis

104k27 gold badges159 silver badges197 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2015-02-28 08:52:31Z

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.

edited Feb 28, 2015 at 8:52

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Mar 19, 2012 at 11:41

JYX

2,6532 gold badges18 silver badges15 bronze badges

Add a comment |

Nouman Bhatti · Accepted Answer · 2016-05-12 07:22:38Z

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

edited May 12, 2016 at 7:22

Nouman Bhatti

1,4116 gold badges31 silver badges55 bronze badges

answered Feb 4, 2012 at 5:17

Kirk Liemohn

7,8839 gold badges47 silver badges58 bronze badges

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

Add a comment |

Prabhagaran · Accepted Answer · 2017-08-01 07:59:04Z

82

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

edited Aug 1, 2017 at 7:59

answered Aug 14, 2015 at 11:12

Prabhagaran

3,6701 gold badge21 silver badges19 bronze badges

Add a comment |

Muhammad Usman · Accepted Answer · 2012-01-17 18:21:59Z

69

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

edited Jan 17, 2012 at 18:21

Muhammad Usman

12.5k6 gold badges37 silver badges60 bronze badges

answered Aug 16, 2011 at 17:56

Rafael

6915 silver badges2 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2015-02-28 08:56:48Z

56

This works for me:

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

jQuery version: 1.9.1

edited Feb 28, 2015 at 8:56

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Sep 25, 2013 at 7:36

Binita Bharati

5,6631 gold badge44 silver badges27 bronze badges

Add a comment |

Aziz Shaikh · Accepted Answer · 2011-11-14 09:34:54Z

54

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

edited Nov 14, 2011 at 9:34

Aziz Shaikh

16.5k11 gold badges64 silver badges81 bronze badges

answered Nov 14, 2011 at 9:22

Neeraj

6935 silver badges2 bronze badges

40

Not exactly the answer to the question, but was useful for me. The question wants the selected text.
– Peter
Commented 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'
– Roman Denisenko
Commented Feb 14, 2023 at 9:11

Add a comment |

Milap · Accepted Answer · 2016-06-29 12:02:14Z

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

edited Jun 29, 2016 at 12:02

Milap

7,1518 gold badges26 silver badges47 bronze badges

answered Jan 24, 2013 at 23:22

Kamrul

7,2813 gold badges32 silver badges31 bronze badges

Add a comment |

Justin Lessard · Accepted Answer · 2019-11-22 14:30:17Z

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.

edited Nov 22, 2019 at 14:30

Justin Lessard

11.6k7 gold badges50 silver badges62 bronze badges

answered May 14, 2015 at 14:21

Mohammed Shaheen MK

1,20912 silver badges10 bronze badges

Add a comment |

MD SHAHIDUL ISLAM · Accepted Answer · 2014-08-03 19:39:08Z

35

Various ways

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

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

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

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

answered Aug 3, 2014 at 19:39

MD SHAHIDUL ISLAM

14.4k6 gold badges83 silver badges92 bronze badges

Add a comment |

124 · Accepted Answer · 2014-02-01 05:55:09Z

32

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

answered Feb 1, 2014 at 5:55

124

2,80727 silver badges37 bronze badges

Add a comment |

Vivek · Accepted Answer · 2011-02-02 12:28:44Z

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.

edited Feb 2, 2011 at 12:28

Vivek

11k15 gold badges49 silver badges67 bronze badges

answered Oct 7, 2010 at 10:09

Zarni

3273 silver badges2 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2015-03-21 13:56:07Z

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

edited Mar 21, 2015 at 13:56

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Nov 5, 2013 at 21:38

FAA

5091 gold badge7 silver badges16 bronze badges

Add a comment |

Naveenbos · Accepted Answer · 2020-02-13 16:17:09Z

20

This code worked for me.

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

answered Feb 13, 2020 at 16:17

Naveenbos

2,5523 gold badges34 silver badges60 bronze badges

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
Commented Apr 22, 2022 at 20:39

Add a comment |

Peter Mortensen · Accepted Answer · 2015-02-28 08:58:50Z

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.

edited Feb 28, 2015 at 8:58

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Jan 30, 2014 at 14:29

Nikhil Agrawal

26.4k21 gold badges92 silver badges127 bronze badges

Add a comment |

Thangamani Palanisamy · Accepted Answer · 2013-04-23 10:23:52Z

16

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

This works fine

edited Apr 23, 2013 at 10:23

answered Apr 23, 2013 at 10:04

Thangamani Palanisamy

5,2324 gold badges34 silver badges39 bronze badges

Add a comment |

shyamm · Accepted Answer · 2019-12-17 06:50:30Z

16

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


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

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

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

answered Dec 17, 2019 at 6:50

shyamm

5406 silver badges17 bronze badges

Add a comment |

Vishal Thakur · Accepted Answer · 2017-03-09 07:03:10Z

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:

answered Mar 9, 2017 at 7:03

Vishal Thakur

1,67619 silver badges25 bronze badges

Add a comment |

Muddasir23 · Accepted Answer · 2018-11-13 06:03:43Z

14

Simply try the following code.

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

it returns the text of the selected option.

answered Nov 13, 2018 at 6:03

Muddasir23

6027 silver badges17 bronze badges

Add a comment |

Nikul · Accepted Answer · 2015-04-11 09:39:05Z

13

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

answered Apr 11, 2015 at 9:39

Nikul

1,0251 gold badge13 silver badges33 bronze badges

Add a comment |

Mojtaba · Accepted Answer · 2016-01-23 09:07:31Z

13

For getting selected value use

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

and for getting selected item text use this line:

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

answered Jan 23, 2016 at 9:07

Mojtaba

5149 silver badges19 bronze badges

Add a comment |

Milap · Accepted Answer · 2016-06-29 12:01:50Z

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
})

edited Jun 29, 2016 at 12:01

Milap

7,1518 gold badges26 silver badges47 bronze badges

answered Nov 19, 2015 at 5:36

Sandeep Shekhawat

6951 gold badge9 silver badges19 bronze badges

Add a comment |

Kalaivani M · Accepted Answer · 2017-01-04 12:53:48Z

12

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

answered Jan 4, 2017 at 12:53

Kalaivani M

1,27016 silver badges29 bronze badges

Add a comment |

Peter Mortensen · Accepted Answer · 2014-11-29 09:35:43Z

9

Use:

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

edited Nov 29, 2014 at 9:35

Peter Mortensen

31.3k22 gold badges109 silver badges132 bronze badges

answered Jul 31, 2014 at 15:11

kishore

1,6987 gold badges24 silver badges34 bronze badges

Add a comment |

Mohammad Dayyan · Accepted Answer · 2015-09-17 05:13:23Z

8

the following worked for me:

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

answered Sep 17, 2015 at 5:13

Mohammad Dayyan

22.2k44 gold badges169 silver badges239 bronze badges

Add a comment |

Mhandzkie · Accepted Answer · 2015-07-09 02:00:43Z

7

This work for me:

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

I'm using jQuery 1.10.2

answered Jul 9, 2015 at 2:00

Mhandzkie

2092 silver badges5 bronze badges

Add a comment |

Milap · Accepted Answer · 2016-06-29 12:03:07Z

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

edited Jun 29, 2016 at 12:03

Milap

7,1518 gold badges26 silver badges47 bronze badges

answered Dec 5, 2014 at 6:33

vineet

14.2k10 gold badges60 silver badges76 bronze badges

Add a comment |

Satinder singh · Accepted Answer · 2016-09-29 04:59:33Z

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

Kamil Kiełczewski · Accepted Answer · 2020-01-17 17:10:47Z

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>

answered Jan 17, 2020 at 17:10

Kamil Kiełczewski

90.1k32 gold badges383 silver badges360 bronze badges

1

Thanks for providing a pure-JS approach.
– Daniel Tonon
Commented Apr 22, 2020 at 0:24

Add a comment |

Collectives™ on Stack Overflow

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

35 Answers 35

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
dom
drop-down-menu
jquery-selectors
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

35 Answers 35

Not the answer you're looking for? Browse other questions tagged javascriptjquerydomdrop-down-menujquery-selectors or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
jquery
dom
drop-down-menu
jquery-selectors
or ask your own question.