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

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.

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