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