Cambios en un combo con jQuery

17/May/2011 jQuery , , 9 Comentarios
programación jquery en español

Cuando creamos combos en un formulario nos puede aparecer la necesidad de detectar cuándo el usuario ha cambiado un valor del combo y saber que valor se ha seleccionado. Lo que en HTML viene a ser el evento onChange.

Pero, lo primero, creemos el formulario con el combo:

  1. <form id="formulario">
  2. <select id="combo">
  3. <option value="FC. Barcelona">FC. Barcelona</option>
  4. <option value="Real Madrid">Real Madrid</option>
  5. <option value="Atlético Madrid">Atlético Madrid</option>
  6. <option value="Betis">Betis</option>
  7. <option value="Villareal">Villareal</option>
  8. <option value="Real Sociedad">Real Sociedad</option>
  9. </select>
  10. </form>

Ahora vamos a inyectar el código jQuery para el control de cambios en el combo de forma no intrusiva. Para ello creamos código jQuery en la cabecera de la página.

El método jQuery que nos permite controlar los cambios en un combo es .change(). Aplicaremos el método .change() sobre el elemento que representa al combo (el del id "combo")

  1. $("#combo").change(...);

En el manejador que asignamos al evento change buscaremos el nuevo valor que tenga el combo. Para ello nos vamos a valer de selectores. En concreto del "option:selected".

  1. "#combo option:selected"

Si bien, para obtener el valor del elemento utilizamos la función .val().

Ya solo nos queda mostrar el nuevo valor del elemento tras los cambios en el combo. Por ejemplo, volvaremos dicho valor en una capa ayudándonos del método .html()

El código jQuery final nos quedará de la siguiente forma:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#combo").change(function(){
  4. var op = $("#combo option:selected").val();
  5. $('#capa').html(op);
  6. });
  7. });
  8. </script>

O como nos comenta Unai:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("#combo").change(function(){
  4. var op = $(this).find("option:selected").val();
  5. $('#capa').html(op);
  6. });
  7. });
  8. </script>

Vídeos sobre jQuery


9 comentarios en “Cambios en un combo con jQuery”

Víctor Cuervo

Lorena Gómez

Saludos como seria para 4 combos dependientes

Víctor Cuervo

Gonzalo

Estimados

Por favor necesito rescatar la variable al momento de escoger una opcion Ejemplo: FC. Barcelona que esto quede guardada en una variable y despues pasarla a PHP pero no lo he podido realizar y llevo varias noches intentado. me podrian ayudar por favor.

Gracias.-

Víctor Cuervo

Unai Valle

Emilio, el evento onchange se lanza cuando cambia el atributo value de un elemento. En este caso se cambia el “value” del select, así que:


$(“#combo1”).change(function() {
...
}

Víctor Cuervo

Emilio

Excelente aporte..
pueden ayudarme con este codigo?
quiero que al seleccionar una opcion del select me ingrese un texto en un campo de texto:
este es el codigo que puse pero no funciona.

$(document).ready(function(){
$(“#combo1 option:selected”).change(function() {
if (this.value == “Egreso”){
$(“#monto”).val(“-“);
}
})
});

Víctor Cuervo

Pemo Chen

voy a colocarlo aqui…. necesito un combox que ciando lo seleccione o abra cargue los datos desde una bd, datos actualizados sin refresh o actualizar. Gracias

Víctor Cuervo

Unai Valle

El código que puse antes no es que esté demasiado “optimizado”…

Dentro de la función tenemos el objeto “this” que en este caso hace referencia al select del DOM, así que simplemente podemos saber qué valor tiene con hacer un this.value:

$("#combo").change(function(){
   var op = this.value;
   $('#capa').html(op);
});
Víctor Cuervo

Víctor Cuervo

@Unai,

Muy buena idea para optimizar. Lo incorporo al artículo.
Muchas gracias por el comentario.

Víctor Cuervo

Unai Valle

Ouch, se ve mal el código. A ver ahora…

$("#combo").change(function(){
  var op = $(this).find("option:selected").val();
  $('#capa').html(op);						
});
Víctor Cuervo

Unai Valle

Yo optimizaría el script así:

$("#combo").change(function(){
  var op = $(this).find("option:selected").val();
  $('#capa').html(op);						
});

Dentro de la función ya tenemos una referencia al combo, así que no hace falta volverla a buscar. Así que lo transformamos a un objeto jQuery ($(this)) y buscamos dentro de él el option seleccionado (.find(“option:selected”)).

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*