Jak uzyskać etykietę opcji wyboru za pomocą jQuery?

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

Wartość można pobrać za pomocą $select.val().

A co z tym label?

Czy jest rozwiązanie, które będzie działać w IE6?

user198729
źródło
Masz na myśli, jak uzyskać wartość wybranej, wybranej wartości? która jest w twoim przypadku etykieta?
mrówka
To pytanie powinno zostać przeformułowane tak, aby brzmiało „Jak uzyskać tekst opcji wyboru za pomocą jQuery?” a wszystkie odniesienia do etykiety należy zastąpić tekstem, aby uniknąć pomylenia z atrybutem etykiety.
Joel Davis

Odpowiedzi:

22

Cześć, najpierw podaj identyfikator do wyboru jako

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

wtedy możesz nazwać wybraną etykietę w ten sposób:

jQuery('#theid option:selected').text()
open-ecommerce.org
źródło
13

Dla odniesienia istnieje również dodatkowy labelatrybut na tagu opcji:

//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
źródło
6

Aby uzyskać etykietę określonej opcji w menu rozwijanym, możesz to zrobić -

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

lub

$('#id_of_dropdown > option[value='value_to_be_Searched']').html();
Snigdha Batra
źródło
3

Uznałem to za pomocne

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

Podczas uzyskiwania dostępu do selektora za pomocą thissłowa kluczowego.

$(this).find('option:selected').text()
bmatovu
źródło
2

Spróbuj tego:

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

Spowoduje to wyciągnięcie wyświetlanego tekstu dla obu stylów <option>elementów:

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

Jeśli zawiera zarówno labelatrybut, jak i tekst wewnątrz elementu, użyje labelatrybutu, który zachowuje się tak samo jak przeglądarka.

Dla potomnych zostało to przetestowane w jQuery 3.1.1

amfetamachina
źródło
0
<SELECT id="sel" onmouseover="alert(this.options[1].text);"
<option value=1>my love</option>
<option value=2>for u</option>
</SELECT>
meo
źródło
0

W nowoczesnych przeglądarkach nie potrzebujesz do tego JQuery. Zamiast tego użyj

document.querySelectorAll('option:checked')

Lub podaj dowolny element DOM zamiast document

John Henckel
źródło
-2

Szukasz $select.html()

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

Guillaume Flandre
źródło
1
To po prostu zwraca kod HTML dla wszystkich elementów opcji. Tekst etykiety jest gdzieś / w / tam, ale nie jest to najskuteczniejszy sposób, aby do niego dotrzeć.
MSpreij