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, Jun 04 '15 at 06:20
One can refer this article: http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/ — Dilip Kumar Yadav, Oct 18 '16 at 12:02
for vanilla javascript way, see http://stackoverflow.com/a/5947/32453 — rogerdpack, Jan 18 '17 at 19:27
Just $(this).prop('selected', true); replaced .att to .prop it worked for all browsers — Shahid Hussain Abbasi, Jan 12 '19 at 11:13

score 3877 · Accepted Answer · answered Oct 29 '09 at 12:05

3877

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

answered Oct 29 '09 at 12:05

rahul

174,563
47
223
254

212

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 '12 at 14:04
44

I second the comment about is() returning a boolen; alternatively, use the following small alteration: $('#yourdropdownid').children("option:selected").text(); – scubbo Jun 12 '12 at 14:56
25

@DT3 tested `is("selected").text()` returns a `TypeError: Object false has no method 'text'` – ianace Oct 19 '12 at 07:20
2

@DT3, he's not wrong about the speeds. [Here are some quick stats](http://grabilla.com/02c04-34774c6b-bb36-4324-878b-25f4ba6ca94d.html) run on a realistically sized dropdown (8 or so). – Adam Tomat Dec 04 '12 at 15:20
98

`$('select').children(':selected')` is the fastest way: http://jsperf.com/get-selected-option-text – Simon Apr 24 '13 at 13:51
1

@Sandeep .val() will return the value of the option element, whereas the OP wants the text contained in the option element: e.g. for the following 'foo' rather than 'bar' is wanted – jinglesthula Mar 18 '14 at 18:04
3

$("#IdSelect").children("option:selected").text() – JD - DC TECH Nov 18 '14 at 23:19
2

I'll add this to the mix, especially if you already have a handle to the dropdown element: $select.find("option:selected").text(); – Draghon Jun 17 '16 at 16:10
Hi how do you do this inside a Table row/cell, how do you know which of the Dropdwon from the table – Transformer Mar 12 '17 at 07:40
Just to add up to the post, is you need it by the field name would be like this: $("[name='input_name'] option:selected").text(); – viniciusalvess Jul 02 '17 at 15:44
@MHollis your way is good but too long. this method is useful when we have some dynamic elements on document. – Hemant Sankhla Jul 13 '17 at 11:18
3

children(':selected') doesn't work if you're making use of , you need find('option:selected') – Hill79 Aug 07 '17 at 11:04

score 274 · Answer 2 · answered Oct 29 '09 at 12:04

274

Try this:

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

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

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

answered Oct 29 '09 at 12:04

kgiannakakis

96,871
26
155
191

The ASP.NET version here is the only Jquery that works with asp.net for me, I hence assent to that one. This one: (**'$("#yourdropdownid option:selected").text();'** did not work in an asp.net page using a master page. – netfed Sep 09 '13 at 16:40
5

it doesn't work because asp.net master pages throws random characters in front of the selector. It's technically looking for something like `("#ct0001yourdropdownid) ` – CSharper Apr 03 '14 at 17:06
http://javascriptstutorial.com/blog/selecting-dropdown-element-using-javascript-or-jquery/ – Dilip Kumar Yadav Oct 18 '16 at 12:03
1

@CSharper - I think saying ASP.NET *throws random characters* is rather misleading. They're not random at all, they're structural and follow strict rules (based on things like whether you put an `ID` on your control, and if not then based on the index of where they occur in the current level of the tree, etc) – freefaller Mar 09 '17 at 14:03
Hi how do you do this inside a Table row/cell, how do you know which of the Dropdown from the table, especially in ASP MVC 5 – Transformer Mar 12 '17 at 07:41
You can also do $("#''"), but the selectors are cleaner. If you had a lot of controls and you were in a looping scenario then it might benefit you to use the id, but I've never had a performance issue using the selector method. – Charles Byrne Nov 28 '17 at 13:40

score 221 · Answer 3 · edited Feb 28 '15 at 08:52

221

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 '15 at 08:52

Peter Mortensen

28,342
21
95
123

answered Mar 19 '12 at 11:41

JYX

2,453
1
15
14

7

Don't be hating on this answer. Using the "find" keyword did the trick for me. I was coming from a completely different context. – Gaff Aug 06 '12 at 13:50
5

you don't need the option part at all as its implied with selected.. simply using $('#yourdropdownid :selected').text(); will work fine – Dss Jan 17 '13 at 18:52
jquery-1.10.2.min, this one worked for me, not others. – kubilay Feb 27 '14 at 07:18
The popular answer works, but I needed it on an already obtained reference to the select, so this is the best answer for me – Graham Oct 22 '18 at 09:53

score 109 · Answer 4 · edited May 12 '16 at 07:22

109

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 '16 at 07:22

Nouman Bhatti

1,119
2
25
44

answered Feb 04 '12 at 05:17

Kirk Liemohn

7,203
7
43
50

Prabhagaran · Answer 5 · 2017-08-01T07:59:04.177

72

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 01 '17 at 07:59

answered Aug 14 '15 at 11:12

Prabhagaran

3,070
1
16
17

score 66 · Answer 6 · edited Jan 17 '12 at 18:21

66

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

edited Jan 17 '12 at 18:21

Muhammad Usman

11,962
6
34
56

answered Aug 16 '11 at 17:56

Rafael

661
5
2

this helped, cos I had to use $(this).. it was easy with this one. – The Godfather Sep 16 '20 at 09:44

score 55 · Answer 7 · edited Feb 28 '15 at 08:56

55

This works for me:

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

jQuery version: 1.9.1

edited Feb 28 '15 at 08:56

Peter Mortensen

28,342
21
95
123

answered Sep 25 '13 at 07:36

Binita Bharati

2,998
28
20

4

This worked for me, because on the `change` event I can now use `$(this).find('option:selected').text()` to get text. – Timo002 Dec 08 '14 at 20:54
`$(this).children(':selected').text()` would also work. @Timo002 – Mr. Mak Apr 14 '17 at 08:06

score 55 · Answer 8 · edited Nov 14 '11 at 09:34

55

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

edited Nov 14 '11 at 09:34

Aziz Shaikh

15,104
9
55
73

answered Nov 14 '11 at 09:22

Neeraj

687
5
2

38

Not exactly the answer to the question, but was useful for me. The question wants the selected text. – Peter Nov 28 '11 at 14:50

score 43 · Answer 9 · edited Jun 29 '16 at 12:02

43

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 '16 at 12:02

Milap

6,096
8
21
44

answered Jan 24 '13 at 23:22

Kamrul

6,641
3
26
29

score 35 · Answer 10 · answered Aug 03 '14 at 19:39

35

Various ways

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

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

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

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

answered Aug 03 '14 at 19:39

MaxEcho

13,325
6
72
84

score 32 · Answer 11 · edited Nov 22 '19 at 14:30

32

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 '19 at 14:30

Justin Lessard

6,993
2
41
53

answered May 14 '15 at 14:21

Mohammed Shaheen MK

1,001
9
9

2

Upvoted because this is the only answer not using jQuery. – Justin Lessard Nov 22 '19 at 14:31
I'm with love with vanilla js. Thanks a lot for this. – Enrique Bermúdez Feb 12 '20 at 12:52

score 31 · Answer 12 · answered Feb 01 '14 at 05:55

31

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

answered Feb 01 '14 at 05:55

124

2,509
22
36

this is what, I was expecting with `$(this)` after my ajax call – Shantaram Tupe Nov 30 '16 at 06:40
You can also do $("option:selected", this).text() without wrapping this in a JQuery object. – Doug F Mar 05 '19 at 14:26

score 29 · Answer 13 · edited Feb 02 '11 at 12:28

29

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 02 '11 at 12:28

Vivek

10,426
14
44
65

answered Oct 07 '10 at 10:09

Zarni

307
3
2

score 19 · Answer 14 · edited Mar 21 '15 at 13:56

19

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 '15 at 13:56

Peter Mortensen

28,342
21
95
123

answered Nov 05 '13 at 21:38

FAA

489
7
15

score 17 · Answer 15 · edited Feb 28 '15 at 08:58

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

Thangamani Palanisamy · Answer 16 · 2013-04-23T10:23:52.183

15

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

This works fine

edited Apr 23 '13 at 10:23

answered Apr 23 '13 at 10:04

Thangamani Palanisamy

4,684
3
29
36

score 13 · Answer 17 · answered Jan 23 '16 at 09:07

13

For getting selected value use

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

and for getting selected item text use this line:

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

answered Jan 23 '16 at 09:07

Mojtaba

464
9
17

score 12 · Answer 18 · answered Apr 11 '15 at 09:39

12

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

answered Apr 11 '15 at 09:39

Nikul

1,005
1
11
29

score 11 · Answer 19 · edited Jun 29 '16 at 12:01

11

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 '16 at 12:01

Milap

6,096
8
21
44

answered Nov 19 '15 at 05:36

Sandeep Shekhawat

627
1
8
17

score 11 · Answer 20 · answered Mar 09 '17 at 07:03

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:

score 10 · Answer 21 · answered Jan 04 '17 at 12:53

10

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

answered Jan 04 '17 at 12:53

Kalaivani M

1,103
13
28

I tried logging the div in `var div = e.options[e.selectedIndex].text;`, and it only displays the first option item. How to get each item to display? – Chris22 Aug 09 '17 at 06:59
@Chris22 refer this link https://stackoverflow.com/questions/3923858/jquery-getting-all-dropdown-values – Kalaivani M Aug 30 '17 at 17:00

score 10 · Answer 22 · answered Nov 13 '18 at 06:03

10

Simply try the following code.

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

it returns the text of the selected option.

answered Nov 13 '18 at 06:03

Muddasir23

485
4
14

score 9 · Answer 23 · edited Nov 29 '14 at 09:35

9

Use:

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

edited Nov 29 '14 at 09:35

Peter Mortensen

28,342
21
95
123

answered Jul 31 '14 at 15:11

kishore

1,432
5
20
31

score 8 · Answer 24 · answered Sep 17 '15 at 05:13

8

the following worked for me:

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

answered Sep 17 '15 at 05:13

Mohammad Dayyan

18,338
35
143
207

1

Note: Do not use this for multi select. It only grabs the first selected value. – max Mar 28 '16 at 04:25

score 7 · Answer 25 · edited Jun 29 '16 at 12:03

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

score 7 · Answer 26 · answered Jul 09 '15 at 02:00

7

This work for me:

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

I'm using jQuery 1.10.2

answered Jul 09 '15 at 02:00

Rhaymand Tatlonghari

151
1
4

score 7 · Answer 27 · edited Sep 29 '16 at 04:59

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

Hi how do you do this **inside a Table row/cell**, *how do you know which of the Dropdown from the table?* I am trying to make an ajax call to fetch and populate values, I can do this outside in a page, but not inside the Table Row... can you add some help please — Transformer, Mar 12 '17 at 07:45

score 5 · Answer 28 · answered Feb 13 '20 at 16:17

5

This code worked for me.

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

answered Feb 13 '20 at 16:17

Naveenbos

2,396
3
31
58

score 4 · Answer 29 · answered Jan 18 '17 at 21:56

4

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

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

answered Jan 18 '17 at 21:56

max

7,861
15
70
115

score 3 · Answer 30 · answered Dec 17 '19 at 06:50

3

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


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

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

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

answered Dec 17 '19 at 06:50

shyamm

400
6
14

score 2 · Answer 31 · answered Mar 15 '18 at 22:21

2

For multi-selects:

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

answered Mar 15 '18 at 22:21

Curtis Yallop

5,490
3
37
27

score 2 · Answer 32 · answered Jan 17 '20 at 17:10

2

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 '20 at 17:10

Kamil Kiełczewski

53,729
20
259
241

1

Thanks for providing a pure-JS approach. – Daniel Tonon Apr 22 '20 at 00:24

score 1 · Answer 33 · answered May 21 '18 at 11:01

1

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

answered May 21 '18 at 11:01

Manish Singh

824
1
12
26

score 0 · Answer 34 · edited Apr 20 '19 at 09:11

0

Just add the below line

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

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

edited Apr 20 '19 at 09:11

Nirav Vasoya

358
3
18

answered Jan 12 '19 at 11:12

Shahid Hussain Abbasi

1,452
11
7

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

34 Answers34

Linked

Related