jquery select change event obtener la opción seleccionada

235

Ligé un evento en el evento de cambio de mis elementos seleccionados con esto:

$('select').on('change', '', function (e) {

});

¿Cómo puedo acceder al elemento que se seleccionó cuando ocurre el evento de cambio?

jquery events Zulakis
fuente
1
¿Por qué dices eso?
Miguel
3
@superuberduper Evité jquery todo el tiempo que pude, pero la resistencia es inútil. Te sentirás mucho mejor después de haber sido asimilado.
adg
lolol @adg tan bueno!
SuperUberDuper

Respuestas:

461 
$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});
Naftali aka Neal
fuente
8
¿Qué significa la sintaxis $ ("selector", esto)? Tengo una idea general, pero no estoy totalmente seguro
JoshWillik
14
@JoshWillik con $("selector", this)usted está encontrando todos los selectorelementos dentro thisdel contexto. Escribir $("selector", this)es casi lo mismo que $(this).find('selector')
Bellash
8
@JoshWillik: como $()es un alias de jQuery(), puede encontrar la documentación aquí: api.jquery.com/jQuery La firma indicada allí es obviamente jQuery( selector [, context ] ). @Bellash: si es "casi lo mismo", ¿cuál es la diferencia? ¿O qué es más rápido? Prefiero .find()ya que esto es más OO IMO ...
Adrian Föder
77
¿Cómo verificar en caso de selección múltiple?
Hemant_Negi
3
@ AdrianFöder Para usted y otras personas que lo buscan, .find()es aproximadamente un 10% más rápido según esta respuesta: stackoverflow.com/a/9046288/2767703
Kevin van Mierlo
75

Puedes usar el método de búsqueda jQuery

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

La solución anterior funciona perfectamente, pero elijo agregar el siguiente código para ellos dispuestos a obtener la opción de hacer clic. Le permite obtener la opción seleccionada incluso cuando este valor seleccionado no ha cambiado. (Probado solo con Mozilla)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });
Bellash
fuente
La vinculación a optioneventos es una propuesta arriesgada, especialmente en dispositivos móviles. Por ejemplo, Webkit no admite este evento correctamente: bugs.chromium.org/p/chromium/issues/detail?id=5284
Ian Kemp
¡Está bien! Como dije, ¡la segunda solución no es compatible con muchos navegadores!
Bellash
15

Alternativa delegada

En caso de que alguien esté usando el enfoque delegado para su oyente, úselo e.target(se referirá al elemento select).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle Demo

DanielST
fuente
+1 porque esto es lo que quiero, pero cuando probé esto localmente, no funciona. Solo funciona en jsfiddle, ¿qué CDN debo agregar?
AVI
6

Esto me parece más corto y más limpio. Además, puede recorrer los elementos seleccionados si hay más de uno;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});
1.44mb
fuente
selectedOptionsno está disponible en todos los navegadores.
Bernhard Döbler
@ BernhardDöbler, ¿cuáles? alguna fuente?
1.44mb
1
Copié tu código a IE 11 y recibí un error. Terminé con this.options[ this.options.selectedIndex ]. Mozilla dice que es compatible con Firefox desde 26, IE Sin soporte.
Bernhard Döbler
6 
<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

Primero crea a select option. Después de ese uso jquery, puede obtener el valor seleccionado actual cuando el usuario cambia el select optionvalor.


fuente
1
¿podría por favor compartir una explicación más detallada de su respuesta?
Mostafiz
@MostafizurRahman mi código es muy fácil, por eso escribí solo código.
3 
$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});
Serdar Karaca
fuente
2

Otra forma corta de obtener el valor del valor seleccionado, 

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});
Recep Can
fuente
si este es el caso, ¿por qué no "var selectedVal = $ (" # selectElement "). val ()" work¿
LuisE
El caso está obteniendo valor cuando se produce un evento de cambio en el elemento seleccionado. El valor no se actualizará cuando seleccione cambios si le gusta.
Recep Can
0

Consulte la documentación oficial de la API https://api.jquery.com/selected-selector/

Esto funciona bien:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

y

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

y ser fácil para una elección única

var SelVal = $( "#idSelect option:selected" ).val();
alex Roosso
fuente
0

Puede usar este evento jquery select change para obtener el valor de la opción seleccionada

Para demostración

$(document).ready(function () {   
    $('body').on('change','#select', function() {
         $('#show_selected').val(this.value);
    });
}); 
<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>
Expandir fragmento

Desarrollador
fuente