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 1263 · Answer 1 · edited Dec 30 '13 at 16:01

1263

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

17,763
14
122
177

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 1135 · Accepted Answer · edited Apr 19 '20 at 11:14

1135

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

6,472
4
32
36

answered Oct 13 '08 at 04:08

nickf

499,078
194
614
709

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
285

@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 133 · Answer 3 · edited Nov 29 '16 at 16:15

133

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

38,878
15
91
139

answered Jul 29 '11 at 18:55

raphie

3,149
2
25
24

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

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

109

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

28,342
21
95
123

answered May 02 '11 at 12:25

asyadiqin

1,587
2
18
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

17,890
15
70
121

answered Jun 13 '12 at 03:45

Beena Shetty

3,476
2
24
30

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

74,316
17
152
184

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

87,539
30
158
173

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

19,751
9
41
72

answered Jul 02 '14 at 23:15

mindmyweb

768
7
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,035
10
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

28,342
21
95
123

answered Mar 01 '11 at 05:44

Dilantha

178
1
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

SME

2,163
4
26
60

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

369,957
201
546
842

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 Jun 11 '12 at 16:06

9

Use:

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

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

edited Jun 11 '12 at 16:06

Peter Mortensen

28,342
21
95
123

answered Jul 11 '11 at 23:53

Mary Daisy Sanchez

709
1
9
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

489
7
15

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

33,509
12
96
140

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

28,342
21
95
123

answered Feb 12 '13 at 15:36

Martin Clemens Bloch

941
1
11
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

132,029
27
254
262

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 · 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 21 · 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 22 · answered Oct 21 '20 at 14:22

0

Try this:

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

answered Oct 21 '20 at 14:22

Zakaria Binsaifullah

66
4

jQuery get specific option tag text

22 Answers22

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

Linked

Related