Como obter o rótulo da opção de seleção com jQuery?

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

O valor pode ser recuperado por $select.val().

E quanto ao label?

Existe uma solução que funcionará no IE6?

user198729
fonte
Você quer dizer como obter o valor de selecionado, o valor selecionado? qual está na sua etiqueta de case?
formiga de
Esta questão deve ser reformulada para dizer "Como obter o texto da opção de seleção com jQuery?" e todas as referências ao rótulo devem ser substituídas por texto para evitar confusão com o atributo rótulo.
Joel Davis

Respostas:

22

Oi primeiro dê um id ao select como

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

então você pode chamar o rótulo selecionado assim:

jQuery('#theid option:selected').text()
open-ecommerce.org
fonte
13

Para referência, também há um labelatributo secundário na tag de opção:

//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
fonte
6

Para obter o rótulo de uma opção específica em uma lista suspensa, você pode digitar isto -

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

ou

$('#id_of_dropdown > option[value='value_to_be_Searched']').html();
Snigdha Batra
fonte
3

Eu achei isso útil

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

Ao acessar o seletor usando a thispalavra - chave.

$(this).find('option:selected').text()
bmatovu
fonte
2

Experimente isto:

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

Isso puxará o texto exibido para os dois estilos de <option>elementos:

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

Se ele tiver um labelatributo e um texto dentro do elemento, ele usará o labelatributo, que é o mesmo comportamento do navegador.

Para a posteridade, isso foi testado em jQuery 3.1.1

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

Em navegadores modernos, você não precisa do JQuery para isso. Em vez de usar

document.querySelectorAll('option:checked')

Ou especifique qualquer elemento DOM em vez de document

John Henckel
fonte
-2

Você está procurando por $select.html()

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

Guillaume Flandre
fonte
1
Isso apenas retorna o html para todos os elementos de opção. O texto do rótulo está / em / ali em algum lugar, mas não é a maneira mais eficiente de obtê-lo.
MSpreij