Как получить метку выбора с помощью jQuery?

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

Значение можно получить с помощью $select.val().

А что насчет label?

Есть ли решение, которое будет работать в IE6?

user198729
источник
Вы имеете в виду, как получить значение selected, выделенное значение? какой в ​​вашем случае ярлык?
ant
Этот вопрос следует перефразировать, чтобы он говорил: «Как получить текст опции выбора с помощью jQuery?» и все ссылки на метку следует заменить текстом, чтобы избежать путаницы с атрибутом метки.
Джоэл Дэвис

Ответы:

221

Попробуй это:

$('select option:selected').text();
Сергей Кузнецов
источник
3
Это не всегда правильно. Отображаемое описание опции также может быть указано с помощью атрибута label (кроме <= IE7). См. W3schools.com/tags/att_option_label.asp#gsc.tab=0 и w3.org/TR/html401/interact/forms.html#h-17.6
Скотт Стаффорд
3
Чтобы получить атрибут метки , это можно использовать: jQuery ('# theid option: selected'). Attr ('label')
Дэвид Балажич
22

Привет, сначала укажите идентификатор для выбора как

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

тогда вы можете вызвать выбранный ярлык так:

jQuery('#theid option:selected').text()
open-ecommerce.org
источник
13

Для справки labelв теге опции также есть вторичный атрибут:

//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>
kingPuppy
источник
6

Чтобы получить метку конкретной опции в раскрывающемся списке, вы можете привязать это -

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

или

$('#id_of_dropdown > option[value='value_to_be_Searched']').html();
Снигдха Батра
источник
3

Я нашел это полезным

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

При доступе к селектору с помощью thisключевого слова.

$(this).find('option:selected').text()
бматову
источник
2

Попробуй это:

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

Это вытянет отображаемый текст для обоих стилей <option>элементов:

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

Если labelвнутри элемента есть и атрибут, и текст, он будет использовать labelатрибут, что соответствует поведению браузера.

Для потомков это было протестировано под jQuery 3.1.1.

amphetamachine
источник
0
<SELECT id="sel" onmouseover="alert(this.options[1].text);"
<option value=1>my love</option>
<option value=2>for u</option>
</SELECT>
Мео
источник
0

В современных браузерах для этого не нужен JQuery. Вместо этого используйте

document.querySelectorAll('option:checked')

Или укажите любой элемент DOM вместо document

Джон Хенкель
источник
-2

Вы ищете $select.html()

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

Гийом Фландр
источник
1
Это просто возвращает html для всех элементов option. Текст метки где-то есть / там / там, но это не самый эффективный способ добраться до него.
MSpreij