jQuery get specific option tag text

Question

All right, say I have this:

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

What would the selector look like if I wanted to get "Option B" when I have the value '2'?

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. 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, Aug 15 '13 at 12:11

score 1274 · Answer 1 · edited Dec 30 '13 at 16:01

1274

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

ArtOfWarfare

20,617
19
137
193

answered May 15 '09 at 15:52

11

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. – Knowledge Craving Jun 19 '10 at 20:50
I use $("#list option:selected").text() and $("#list option:selected").attr('value') – fullstacklife Feb 24 '11 at 17:10
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. – theJerm Sep 12 '12 at 22:32

score 1147 · Accepted Answer · edited Apr 19 '20 at 11:14

1147

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 '20 at 11:14

Arsen Khachaturyan

7,904
4
42
42

answered Oct 13 '08 at 04:08

nickf

537,072
198
649
721

5

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. – Kevin Florida Apr 05 '11 at 13:48
287

@Kevin, in that case, you might want to use the answer below this one. `$('#list option:selected').text()` – nickf Apr 05 '11 at 16:10
7

@nickf , and more simpler, `$('#list').val()` – Derek 朕會功夫 Apr 28 '12 at 23:38
37

@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. – itsmequinn Jan 10 '13 at 14:39
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()`` – Hassan ALAMI Aug 20 '19 at 08:52

score 135 · Answer 3 · edited Nov 29 '16 at 16:15

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

Paul Vargas

41,222
15
102
148

answered Jul 29 '11 at 18:55

raphie

3,285
2
29
26

2

supposedly this is the more efficient way to do it according to WebStorm 8. – dbinott Oct 01 '14 at 14:59
2

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._ – StubbornShowaGuy May 27 '16 at 00:40
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. – raphie Aug 03 '22 at 18:46

score 108 · Answer 4 · edited May 25 '11 at 09:44

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 '11 at 09:44

Peter Mortensen

30,738
21
105
131

answered May 02 '11 at 12:25

asyadiqin

1,637
3
19
25

11

An alternative to this is: $("option:selected", this).text() – Doug S Aug 18 '13 at 20:05
This is a better answer because it accounts for complex scenarios not just static html and simple javascript events. – oasisfleeting May 13 '15 at 04:26

score 37 · Answer 5 · edited Aug 19 '16 at 03:27

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 '16 at 03:27

Wesley Smith

19,401
22
85
133

answered Jun 13 '12 at 03:45

Beena Shetty

3,676
2
28
31

score 37 · Answer 6 · edited Sep 23 '11 at 13:40

37

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

for multiple selected value in the #list element.

edited Sep 23 '11 at 13:40

Shawn Chin

84,080
19
162
191

answered Jun 04 '10 at 14:30

m3ct0n

387
3
3

score 24 · Answer 7 · answered Oct 13 '08 at 04:08

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

Andrew Moore

93,497
30
163
175

score 19 · Answer 8 · edited Apr 17 '15 at 16:37

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 '15 at 16:37

Shaunak D

20,588
10
46
79

answered Jul 02 '14 at 23:15

mindmyweb

888
9
13

This is definitely not correct **Please note that this is not asking how to get the selected text value** – Wesley Smith Aug 18 '16 at 23:39

score 17 · Answer 9 · answered Apr 03 '13 at 11:21

17

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

answered Apr 03 '13 at 11:21

Avinash Saini

1,203
11
10

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 – MartinM Mar 02 '17 at 14:45

score 17 · Answer 10 · edited May 25 '11 at 09:42

17

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

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

edited May 25 '11 at 09:42

Peter Mortensen

30,738
21
105
131

answered Mar 01 '11 at 05:44

Dilantha

188
2
5

score 14 · Answer 11 · edited Mar 02 '17 at 10:49

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

Chaitanya K

1,827
4
32
67

answered Mar 02 '17 at 09:35

Dilipkumar63

151
1
3

score 13 · Answer 12 · edited Jun 08 '10 at 11:29

13

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

leave a space after the id selector.

edited Jun 08 '10 at 11:29

Bill the Lizard

398,270
210
566
880

answered May 31 '10 at 06:38

Mon

131
1
2

score 9 · Answer 13 · answered May 26 '11 at 19:04

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.

score 9 · Answer 14 · edited Apr 27 '22 at 12:54

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 '22 at 12:54

Vickysw

70
10

answered Jul 11 '11 at 23:53

Mary Daisy Sanchez

947
1
12
26

score 5 · Answer 15 · answered Nov 05 '13 at 21:57

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 05 '13 at 21:57

FAA

499
1
7
16

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? – Andrew Kozak Dec 30 '13 at 09:35

score 5 · Answer 16 · edited May 23 '17 at 12:18

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 '17 at 12:18

Community

1
1

answered Mar 09 '15 at 05:43

Alireza Fattahi

42,517
14
123
173

score 4 · Answer 17 · edited Feb 18 '13 at 21:50

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 '13 at 21:50

Peter Mortensen

30,738
21
105
131

answered Feb 12 '13 at 15:36

Martin Clemens Bloch

1,047
1
12
28

score 3 · Answer 18 · answered Jan 20 '13 at 14:57

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 '13 at 14:57

VisioN

143,310
32
282
281

score 2 · Answer 19 · answered May 08 '18 at 09:57

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>

score 2 · Answer 20 · answered Oct 21 '20 at 14:22

2

Try this:

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

answered Oct 21 '20 at 14:22

Zakaria Binsaifullah

126
1
5

score 2 · Answer 21 · edited Jun 11 '12 at 16:08

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>

score 0 · Answer 22 · answered Aug 20 '20 at 14:23

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>

score 0 · Answer 23 · answered Mar 24 '23 at 23:39

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 '23 at 23:39

Archil Dekanosidze

26
1
5

jQuery get specific option tag text

23 Answers23

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

Linked

Related