[jquery] How to get label of select option with jQuery?

<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?

This question is related to jquery select

The answer is


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


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>

I found this helpful

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

When accessing the selector using the this keyword.

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

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


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

document.querySelectorAll('option:checked')

Or specify any DOM element instead of document


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

<SELECT id="sel" onmouseover="alert(this.options[1].text);"
<option value=1>my love</option>
<option value=2>for u</option>
</SELECT>

You're looking for $select.html()

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


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


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