How to get label of select option with jQuery?

JquerySelect

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

Try this:

$('select option:selected').text();

Solution 2 - Jquery

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

Solution 3 - Jquery

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>

Solution 4 - Jquery

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

Solution 5 - Jquery

I found this helpful

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

When accessing the selector using the this keyword.

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

Solution 6 - Jquery

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

Solution 7 - Jquery

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

Solution 8 - Jquery

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

Solution 9 - Jquery

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

Solution 10 - Jquery

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

document.querySelectorAll('option:checked')

Or specify any DOM element instead of document

Solution 11 - Jquery

You're looking for $select.html()

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser198729View Question on Stackoverflow
Solution 1 - JquerySergey KuznetsovView Answer on Stackoverflow
Solution 2 - Jqueryopen-ecommerce.orgView Answer on Stackoverflow
Solution 3 - JquerykingPuppyView Answer on Stackoverflow
Solution 4 - JquerySnigdha BatraView Answer on Stackoverflow
Solution 5 - JquerybmatovuView Answer on Stackoverflow
Solution 6 - JqueryeugeneView Answer on Stackoverflow
Solution 7 - JqueryamphetamachineView Answer on Stackoverflow
Solution 8 - JquerymeoView Answer on Stackoverflow
Solution 9 - JqueryitwasnoteasyView Answer on Stackoverflow
Solution 10 - JqueryJohn HenckelView Answer on Stackoverflow
Solution 11 - JqueryGuillaume FlandreView Answer on Stackoverflow