HOWTO · jQuery
Cómo obtener el valor desplegable seleccionado en el evento de cambio usando jQuery
Este tutorial demuestra cómo realizar una determinada función cuando el valor seleccionado del menú desplegable se cambia mediante jQuery.
En esta página
Un controlador de cambio de jQuery le permite ejecutar código después de que cambia una selección desplegable. Dentro del controlador, lea la opción seleccionada con this.value y, a continuación, use ese valor para actualizar la página o realizar otra acción. Los ejemplos siguientes asignan cada opción a un color de fondo.
Use el método change() para obtener el valor desplegable seleccionado en el evento de cambio usando jQuery
En jQuery, change es el nombre del evento. change() es el método abreviado: pase un controlador para vincular código que responda al evento. Llamar a .change() sin un controlador, en cambio, desencadena el evento; no registra un controlador. Para un menú desplegable, el controlador se ejecuta cuando el usuario selecciona una opción diferente.
Este es un ejemplo de página de navegador; se presenta sin ejecutar, por lo que su comportamiento se describe en lugar de observarse de una ejecución. La página completa carga jQuery antes del código que lo utiliza. Los atributos value del elemento select son los valores que lee el controlador. La opción inicial tiene el valor 0, y las ramas if/else asignan de 0 a 3 a los cuatro nombres de colores CSS. El valor de la opción seleccionada es una cadena, por lo que las comparaciones usan valores entre comillas. Cambiar la selección actualiza el color de fondo del div #Main dejando intactos su texto y su borde.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown change with jQuery change()</title>
<style>
#Main {
border: 5px solid green;
background-color: lightblue;
min-height: 100px;
padding: 1rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#bgcolor").change(function () {
var bgcolor = this.value;
if (bgcolor === "0") {
$("#Main").css("background-color", "lightblue");
} else if (bgcolor === "1") {
$("#Main").css("background-color", "lightgreen");
} else if (bgcolor === "2") {
$("#Main").css("background-color", "lightpink");
} else {
$("#Main").css("background-color", "lightgrey");
}
});
});
</script>
</head>
<body>
<div id="Main">
<h1>Delftstack.com</h1>
<label for="bgcolor">Background color:</label>
<select name="bgcolor" id="bgcolor">
<option value="0">Blue</option>
<option value="1">Green</option>
<option value="2">Pink</option>
<option value="3">Grey</option>
</select>
</div>
</body>
</html>
La primera opción está seleccionada cuando se carga la página, por lo que el panel comienza en azul claro. Cada selección posterior invoca el controlador vinculado y aplica el color correspondiente. Reemplace las asignaciones de color con la acción que su página necesita, como actualizar un mensaje o filtrar los resultados mostrados. Mantenga el controlador adjunto al elemento select cuyo valor desea leer.
Use el método on() para obtener el valor desplegable seleccionado en el evento de cambio usando jQuery
Puede vincular el mismo controlador con on() pasando el nombre del evento y una devolución de llamada: $(selector).on('change', handler). Aquí, change es el nombre del evento y la función es el controlador. El selector identifica el elemento que recibe el controlador. Los argumentos de selector hijo, datos y mapa de eventos no son necesarios para este ejemplo desplegable directo.
Este segundo ejemplo de página de navegador también se presenta sin ejecutar. La página siguiente está completa y usa las mismas opciones, ID y asignación de colores que el ejemplo de change(). Utiliza on('change', ...) para registrar la devolución de llamada y, a continuación, lee la opción seleccionada de this.value. Utilice esta forma cuando desee la estructura explícita de evento y controlador de on(); el resultado visible es la misma actualización del color de fondo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown change with jQuery on()</title>
<style>
#Main {
border: 5px solid green;
background-color: lightblue;
min-height: 100px;
padding: 1rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#bgcolor").on("change", function () {
var bgcolor = this.value;
if (bgcolor === "0") {
$("#Main").css("background-color", "lightblue");
} else if (bgcolor === "1") {
$("#Main").css("background-color", "lightgreen");
} else if (bgcolor === "2") {
$("#Main").css("background-color", "lightpink");
} else {
$("#Main").css("background-color", "lightgrey");
}
});
});
</script>
</head>
<body>
<div id="Main">
<h1>Delftstack.com</h1>
<label for="bgcolor">Background color:</label>
<select name="bgcolor" id="bgcolor">
<option value="0">Blue</option>
<option value="1">Green</option>
<option value="2">Pink</option>
<option value="3">Grey</option>
</select>
</div>
</body>
</html>
Ambos enfoques vinculan un controlador al evento change; ninguno espera un clic de botón por separado. La primera forma es la abreviatura de jQuery, mientras que on() nombra el evento y la devolución de llamada como argumentos separados. Elija una vinculación para un elemento select determinado para que la acción se ejecute una vez por cambio de selección. Si el controlador parece no ejecutarse, compruebe que jQuery se haya cargado antes de la devolución de llamada de listo, que el selector coincida con el ID del elemento select y que la devolución de llamada esté vinculada al elemento cuyo valor necesita. Una página que actualiza el color de fondo es solo una ilustración: el mismo this.value puede impulsar cualquier trabajo específico de la aplicación dentro de la devolución de llamada.
