jQuery get specific option tag text

Question

Suppose I have a drop-down list like:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Given the value '2' (i.e., using a specific value, not necessarily the selected one), what selector can I use to get "Option B"?

I tried $("#list[value='2']").text();, but it is not working.

For this period of time, use: $("#list option").filter(function () { return $(this).html() == "stuff"; }).val(); — rook
– rook, Commented Aug 15, 2013 at 12:11

ArtOfWarfare · Accepted Answer · 2013-12-30 16:01:21Z

1275

If you'd like to get the option with a value of 2, use

$("#list option[value='2']").text();

If you'd like to get whichever option is currently selected, use

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

edited Dec 30, 2013 at 16:01

ArtOfWarfare

21.7k19 gold badges150 silver badges203 bronze badges

answered May 15, 2009 at 15:52

Gabejazz

Sign up to request clarification or add additional context in comments.

3 Comments

Knowledge Craving Over a year ago

To get the value instead of the text, you will need to write:- $("select#list").val(); I know that this is not the actual answer of the question asked, but still thought of mentioning this point for newbies coming through Google.

fullstacklife Over a year ago

I use $("#list option:selected").text() and $("#list option:selected").attr('value')

theJerm Over a year ago

For getting the selected text (even though the question didn't ask for that specifically), this method is superior due to not having to know what the selected value is.

Arsen Khachaturyan · Accepted Answer · 2020-04-19 11:14:35Z

1148

It's looking for an element with id list which has a property value equal to 2.
What you want is the option child of the list:

$("#list option[value='2']").text()

edited Apr 19, 2020 at 11:14

Arsen Khachaturyan

8,4304 gold badges46 silver badges47 bronze badges

answered Oct 13, 2008 at 4:08

nickf

548k199 gold badges660 silver badges727 bronze badges

5 Comments

Kevin Florida Over a year ago

Thank you for this nickf. Here is this answer expanded if you want to get the value dynamically: var selectValue = document.getElementById('list').value; var selectOption = $("#list option[value=" + selectValue + "]").text(); ///good example nickf.

nickf Over a year ago

@Kevin, in that case, you might want to use the answer below this one. $('#list option:selected').text()

Derek 朕會功夫 Over a year ago

@nickf , and more simpler, $('#list').val()

itsmequinn Over a year ago

@Derek ,val() will not give the text of the option, it will give its value, which in some cases (many I dare say) is not the same.

Hassan ALAMI Over a year ago

you should always use .trim() after .text() since some browser may add sometimes some spaces before and after the text that are invisible to the user but may lead to getting wrong values $("#list option[value='2']").text().trim()

Paul Vargas · Accepted Answer · 2016-11-29 16:15:44Z

135

This worked perfectly for me, I was looking for a way to send two different values with options generated by MySQL, and the following is generic and dynamic:

`$(this).find("option:selected").text();`

As mentioned in one of the comments. With this I was able to create a dynamic function that works with all my selection boxes that I want to get both values, the option value and the text.

Few days ago I noticed that when updating the jQuery from 1.6 to 1.9 of the site I used this code, this stop working... probably was a conflict with another piece of code... anyway, the solution was to remove option from the find() call:

$(this).find(":selected").text();

That was my solution... use it only if you have any problem after updating your jQuery.

edited Nov 29, 2016 at 16:15

Paul Vargas

42.2k16 gold badges108 silver badges148 bronze badges

answered Jul 29, 2011 at 18:55

raphie

3,3052 gold badges32 silver badges30 bronze badges

3 Comments

dbinott Over a year ago

supposedly this is the more efficient way to do it according to WebStorm 8.

StubbornShowaGuy Over a year ago

While this answer is insightful and helped me with a problem I was having, to nitpick, it does not properly answer the question: Please note that this is not asking how to get the selected text value, but just any one of them, whether selected or not, depending on the value attribute.

raphie Over a year ago

It's true @StubbornShowaGuy that it is not specified by value. The solution is assuming someone is looking for the label if the value is sent. But there's no reason for that if you can send both values at the same time... example var me = $(this).find(':selected'); var val = me.val(); var txt = me.text().trim(); ... In that case there's no need to make a second request.

Peter Mortensen · Accepted Answer · 2011-05-25 09:44:38Z

108

Based on the original HTML posted by Paolo I came up with the following.

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

It has been tested to work on Internet Explorer and Firefox.

edited May 25, 2011 at 9:44

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 2, 2011 at 12:25

asyadiqin

1,6773 gold badges19 silver badges25 bronze badges

2 Comments

Doug S Over a year ago

An alternative to this is: $("option:selected", this).text()

oasisfleeting Over a year ago

This is a better answer because it accounts for complex scenarios not just static html and simple javascript events.

Shawn Chin · Accepted Answer · 2011-09-23 13:40:19Z

37

$("#list option:selected").each(function() {
   alert($(this).text());
});

for multiple selected value in the #list element.

edited Sep 23, 2011 at 13:40

Shawn Chin

87.4k20 gold badges168 silver badges193 bronze badges

answered Jun 4, 2010 at 14:30

m3ct0n

3873 silver badges3 bronze badges

Comments

Wesley Smith · Accepted Answer · 2016-08-19 03:27:02Z

37

If there is only one select tag in on the page then you can specify select inside of id 'list'
```
jQuery("select option[value=2]").text();
```

To get selected text

jQuery("select option:selected").text();

edited Aug 19, 2016 at 3:27

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

answered Jun 13, 2012 at 3:45

Beena Shetty

3,7362 gold badges30 silver badges31 bronze badges

Comments

Andrew Moore · Accepted Answer · 2008-10-13 04:08:45Z

24

Try the following:

$("#list option[value=2]").text();

The reason why your original snippet wasn't working is because your OPTION tags are children to your SELECT tag, which has the id list.

answered Oct 13, 2008 at 4:08

Andrew Moore

95.8k30 gold badges167 silver badges175 bronze badges

Comments

Shaunak D · Accepted Answer · 2015-04-17 16:37:28Z

19

This is an old Question which has not been updated in some time the correct way to do this now would be to use

$("#action").on('change',function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

I hope this helps :-)

edited Apr 17, 2015 at 16:37

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

answered Jul 2, 2014 at 23:15

mindmyweb

9089 silver badges13 bronze badges

1 Comment

Wesley Smith Over a year ago

This is definitely not correct Please note that this is not asking how to get the selected text value

Peter Mortensen · Accepted Answer · 2011-05-25 09:42:40Z

17

I wanted to get the selected label. This worked for me in jQuery 1.5.1.

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

edited May 25, 2011 at 9:42

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Mar 1, 2011 at 5:44

Dilantha

1882 silver badges5 bronze badges

Comments

Avinash Saini · Accepted Answer · 2013-04-03 11:21:19Z

17

$(this).children(":selected").text()

answered Apr 3, 2013 at 11:21

Avinash Saini

1,24312 silver badges10 bronze badges

1 Comment

MartinM Over a year ago

Unfortunatelly, this does not work when you have optgroup tag as a child of your select and the selected option is in this optgroup. use $("#list option:selected").text(); which works even in this case

Chaitanya K · Accepted Answer · 2017-03-02 10:49:56Z

14

You can get selected option text by using function .text();

you can call the function like this :

jQuery("select option:selected").text();

edited Mar 2, 2017 at 10:49

Chaitanya K

1,8474 gold badges35 silver badges69 bronze badges

answered Mar 2, 2017 at 9:35

Dilipkumar63

1511 silver badge3 bronze badges

Comments

Bill the Lizard · Accepted Answer · 2010-06-08 11:29:44Z

13

$("#list [value='2']").text();

leave a space after the id selector.

edited Jun 8, 2010 at 11:29

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered May 31, 2010 at 6:38

Mon

1311 silver badge2 bronze badges

Comments

eon · Accepted Answer · 2011-05-26 19:04:13Z

9

While "looping" through dynamically created select elements with a .each(function()...): $("option:selected").text(); and $(this + " option:selected").text() did not return the selected option text - instead it was null.

But Peter Mortensen's solution worked:

$(this).find("option:selected").text();

I do not know why the usual way does not succeed in a .each() (probably my own mistake), but thank you, Peter. I know that wasn't the original question, but am mentioning it "for newbies coming through Google."

I would have started with $('#list option:selected").each() except I needed to grab stuff from the select element as well.

answered May 26, 2011 at 19:04

eon

1,9381 gold badge23 silver badges24 bronze badges

Comments

Vickysw · Accepted Answer · 2022-04-27 12:54:44Z

9

Use:

function selected_state(){
    jQuery("#list option").each(function(){
        if(jQuery(this).val() == "2"){
            jQuery(this).attr("selected","selected");
            return false;
        }else
           jQuery(this).removeAttr("selected","selected"); // For toggle effect
    });
}

jQuery(document).ready(function(){
    selected_state();
});

edited Apr 27, 2022 at 12:54

Vickysw

7011 bronze badges

answered Jul 11, 2011 at 23:53

Mary Daisy Sanchez

1,1271 gold badge13 silver badges27 bronze badges

Comments

F. M. · Accepted Answer · 2013-11-05 21:57:29Z

5

I was looking for getting val by internal field name instead of ID and came from google to this post which help but did not find the solution I need, but I got the solution and here it is:

So this might help somebody looking for selected value with field internal name instead of using long id for SharePoint lists:

var e = $('select[title="IntenalFieldName"] option:selected').text();

answered Nov 5, 2013 at 21:57

F. M.

5091 gold badge7 silver badges17 bronze badges

1 Comment

Andrew Kozak Over a year ago

Solid solution. Sorry it's in such a secret place down here. You might want to find a more prominent place to provide this solution. Maybe you could ask and answer a question of your own?

Community · Accepted Answer · 2017-05-23 12:18:30Z

5

A tip: you can use below code if your value is dynamic:

$("#list option[value='"+aDynamicValue+"']").text();

Or (better style)

$("#list option").filter(function() {
     return this.value === aDynamicValue;
}).text();

As mentioned in jQuery get specific option tag text and placing dynamic variable to the value

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Mar 9, 2015 at 5:43

Alireza Fattahi

46k18 gold badges133 silver badges186 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2013-02-18 21:50:55Z

4

I needed this answer as I was dealing with a dynamically cast object, and the other methods here did not seem to work:

element.options[element.selectedIndex].text

This of course uses the DOM object instead of parsing its HTML with nodeValue, childNodes, etc.

edited Feb 18, 2013 at 21:50

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Feb 12, 2013 at 15:36

Martin Clemens Bloch

1,0971 gold badge13 silver badges29 bronze badges

Comments

VisioN · Accepted Answer · 2013-01-20 14:57:54Z

3

As an alternative solution, you can also use a context part of jQuery selector to find <option> element(s) with value="2" inside the dropdown list:

$("option[value='2']", "#list").text();

answered Jan 20, 2013 at 14:57

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2012-06-11 16:08:14Z

I wanted a dynamic version for select multiple that would display what is selected to the right (wish I'd read on and seen $(this).find... earlier):

<script type="text/javascript">
    $(document).ready(function(){
        $("select[showChoices]").each(function(){
            $(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'>&nbsp;</span>");
            doShowSelected($(this).attr('id'));//shows initial selections
        }).change(function(){
            doShowSelected($(this).attr('id'));//as user makes new selections
        });
    });
    function doShowSelected(inId){
        var aryVals=$("#"+inId).val();
        var selText="";
        for(var i=0; i<aryVals.length; i++){
            var o="#"+inId+" option[value='"+aryVals[i]+"']";
            selText+=$(o).text()+"<br>";
        }
        $("#spn"+inId).html(selText);
    }
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
    <option selected="selected" value=1>opt 1</option>
    <option selected="selected" value=2>opt 2</option>
    <option value=3>opt 3</option>
    <option value=4>opt 4</option>
</select>

Anfath Hifans · Accepted Answer · 2018-05-08 09:57:02Z

You can get one of following ways

$("#list").find('option').filter('[value=2]').text()

$("#list").find('option[value=2]').text()

$("#list").children('option[value=2]').text()

$("#list option[value='2']").text()

$(function(){    
    
    console.log($("#list").find('option').filter('[value=2]').text());
    console.log($("#list").find('option[value=2]').text());
    console.log($("#list").children('option[value=2]').text());
    console.log($("#list option[value='2']").text());
    
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

Zakaria Binsaifullah · Accepted Answer · 2020-10-21 14:22:26Z

2

Try this:

jQuery("#list option[value='2']").text()

answered Oct 21, 2020 at 14:22

Zakaria Binsaifullah

1242 silver badges5 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2020-08-20 14:23:19Z

0

Try

[...list.options].find(o=> o.value=='2').text

let text = [...list.options].find(o=> o.value=='2').text;

console.log(text);

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

answered Aug 20, 2020 at 14:23

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

Archil Dekanosidze · Accepted Answer · 2023-03-24 23:39:05Z

0

you can use $("#list option[value='2']").text(); for text of the option with value equal to 2 and you can use $("#list option:selected").text(); for text of the selected option

answered Mar 24, 2023 at 23:39

Archil Dekanosidze

261 silver badge5 bronze badges

Collectives™ on Stack Overflow

jQuery get specific option tag text

23 Answers 23

3 Comments

5 Comments

`$(this).find("option:selected").text();`

3 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

23 Answers 23

3 Comments

5 Comments

$(this).find("option:selected").text();

3 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related

`$(this).find("option:selected").text();`