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


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

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>

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

3

Encontré esto útil

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

Al acceder al selector usando la thispalabra clave.

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


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


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


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


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.