¿Cómo obtener la etiqueta de la opción de selección con jQuery?

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

El valor se puede recuperar mediante $select.val().

¿Qué pasa con el label?

¿Existe una solución que funcione en IE6?

user198729
fuente
¿Te refieres a cómo obtener el valor de seleccionado, el valor seleccionado? ¿Cuál está en la etiqueta de tu caja?
hormiga
Esta pregunta debería reformularse para decir "¿Cómo obtener el texto de la opción de selección con jQuery?" y todas las referencias a la etiqueta deben reemplazarse con texto para evitar confusiones con el atributo de etiqueta.
Joel Davis

Respuestas:

22

Hola, primero dale una identificación a la selección como

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

entonces puedes llamar a la etiqueta seleccionada así:

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

Como referencia, también hay un labelatributo secundario en la etiqueta de opción:

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

Para obtener la etiqueta de una opción específica en un menú desplegable, puede escribir esto:

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

o

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

Encontré esto útil

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

Al acceder al selector usando la thispalabra clave.

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

Prueba esto:

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

Esto extraerá el texto mostrado para ambos estilos de <option>elementos:

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

Si tiene un labelatributo y texto dentro del elemento, usará el labelatributo, que es el mismo comportamiento que el navegador.

Para la posteridad, esto se probó bajo jQuery 3.1.1

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

En los navegadores modernos, no necesita JQuery para esto. En su lugar use

document.querySelectorAll('option:checked')

O especifique cualquier elemento DOM en lugar de document

John Henckel
fuente
-2

Estas buscando $select.html()

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

Guillaume Flandre
fuente
1
Eso solo devuelve el html para todos los elementos de opción. El texto de la etiqueta está / in / allí en alguna parte, pero no es la forma más eficiente de acceder a él.
MSpreij