130 
<select> <option value="test">label </option> </select>

The value can be retrieved by $select.val().

What about the label?

Is there a solution that will work in IE6?

Improve this question
2
  • You mean how to get value of selected, the selected value ? which is in your case label ? Commented Feb 1, 2010 at 9:47
  • This question should be reworded to say "How to get text of select option with jQuery?" and all references to label should be replaced with text to avoid confusion with the label attribute. Commented Nov 13, 2015 at 0:35

11 Answers 11

Reset to default
255

Try this:

$('select option:selected').text();
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This isn't always correct. The option's shown description can be specified by a 'label' attribute as well (except <= IE7). See w3schools.com/tags/att_option_label.asp#gsc.tab=0 and w3.org/TR/html401/interact/forms.html#h-17.6
To get the label attribute, this can be used: jQuery('#theid option:selected').attr('label')
24

Hi first give an id to the select as 

<select id=theid> <option value="test">label </option> </select>

then you can call the selected label like that:

jQuery('#theid option:selected').text()
Improve this answer

Comments

19

For reference there is also a secondary label attribute on the option tag:

//returns "GET THIS" when option is selected $('#selecter :selected').attr('label');

Html

<select id="selecter"> <option value="test" label="GET THIS"> Option (also called label)</option> </select>
Improve this answer

Comments

10

I found this helpful

$('select[name=users] option:selected').text()

When accessing the selector using the this keyword.

$(this).find('option:selected').text()
Improve this answer

Comments

7

To get the label of a specific option in a dropdown yo can ty this -- 

$('.class_of_dropdown > option[value='value_to_be_searched']').html();

or

$('#id_of_dropdown > option[value='value_to_be_Searched']').html();
Improve this answer

Comments

3

Try this:

$('select option:selected').prop('label');

This will pull out the displayed text for both styles of <option> elements:

  • <option label="foo"><option> -> "foo"
  • <option>bar<option> -> "bar"

If it has both a label attribute and text inside the element, it'll use the label attribute, which is the same behavior as the browser.

For posterity, this was tested under jQuery 3.1.1

Improve this answer

Comments

2 
$("select#selectbox option:eq(0)").text()

The 0 index in the "option:eq(0)" can be exchanged for whichever indexed option you'd like to retrieve.

Improve this answer

Comments

1

In modern browsers you do not need JQuery for this. Instead use

document.querySelectorAll('option:checked')

Or specify any DOM element instead of document

Improve this answer

1 Comment

Presumably, you want to run it against the element, not the whole document. And to get the text value, you need to access element.textContent
0 
<SELECT id="sel" onmouseover="alert(this.options[1].text);" <option value=1>my love</option> <option value=2>for u</option> </SELECT>
Improve this answer

Comments

0

Created working Plunker for this. https://plnkr.co/edit/vR9aGoCwoOUL9tevIEen $('#console').append("<br/>"+$('#test_s :selected').text())

Improve this answer

Comments

-2

You're looking for $select.html()

http://api.jquery.com/html/

Improve this answer

1 Comment

That just returns the html for all option elements. The label text is /in/ there somewhere, but it's not the most efficient way to get at it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.