¿Cómo obtener la opción seleccionada $ (this) en jQuery?


91

El siguiente código funciona:

$("#select-id").change(function(){
  var cur_value = $('#select-id option:selected').text();
  . . .
});

Cómo refactorizar la segunda línea para:

var cur_value = $(this).***option-selected***.text();

¿Para qué usas ***option-selected***?

Respuestas:


120

Para el valor seleccionado: $(this).val()

Si necesita el elemento de opción seleccionado, $("option:selected", this)


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

Esto funcionó perfectamente para mí; lo intenté $("option:selected", this)como se mencionó anteriormente, pero eso fue problemático. Estaba usando un clic de botón para agregar el texto del elemento de opción seleccionado a otro div, pero cuando hice clic en el botón, en realidad cambió el elemento seleccionado ... extraño. Usa este.
skwidbreth

53

En mi opinión, la mejor y más corta forma para que los eventos onchange en el menú desplegable obtengan la opción seleccionada:

$('option:selected',this);

para obtener el atributo de valor:

$('option:selected',this).attr('value');

para obtener la parte mostrada entre las etiquetas:

$('option:selected',this).text();

En tu muestra:

$("#select-id").change(function(){
  var cur_value = $('option:selected',this).text();
});

No lo use .context, está en desuso desde jQuery 1.10 - api.jquery.com/category/deprecated/deprecated-1.10
rafx

Sí, pero lo que quieres decir es esto: api.jquery.com/context $ ("ul", document.body) .context.nodeName que no uso
angelmedia

1
Me gusta la respuesta, pero ¿por qué es mejor?
Sébastien Gicquel

39
var cur_value = $('option:selected',this).text();

Si bien esto puede responder teóricamente a la pregunta, sería preferible incluir aquí las partes esenciales de la respuesta y proporcionar el enlace como referencia.
Enamul Hassan


9

Puede usar findpara buscar la opción seleccionada que sea descendiente de los nodos señalados por el objeto jQuery actual:

var cur_value = $(this).find('option:selected').text();

Dado que es probable que este sea un hijo inmediato, en realidad sugeriría usar en su .childrenlugar:

var cur_value = $(this).children('option:selected').text();

7
var cur_value = $(this).find('option:selected').text();

Dado que optiones probable que sea hijo inmediato de selectusted, también puede usar:

var cur_value = $(this).children('option:selected').text();

http://api.jquery.com/find/


¿Dónde se obtiene option-selectedsin comillas ...?
Platinum Azure

Eso fue un error tipográfico cuando publiqué. Corregido la respuesta.
thomthom

find('option:selected')devuelve una cadena vacía para mí. ¿Qué versión de jQuery se requiere? Estoy trabajando en 1.6.1. children('option:selected')funciona.
B Seven

option:selectedha estado allí desde v1.0 api.jquery.com/selected-selector
thomthom

0

Mejor conjetura:

var cur_value = $('#select-id').children('option:selected').text();

Me gustan más los niños en este caso porque sabes que solo vas a bajar una rama del árbol DOM ...


Quizás lo que realmente quisiste decir fue var cur_value = $ (this) .children ('option: selected'). Text ();
Joe Johnston

0

Es solo

$(this).val();

Creo que jQuery es lo suficientemente inteligente como para saber lo que necesitas

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.