jquery - value - select option labels




How to get label of select option with jQuery? (6)

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



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>

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

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









select