Valor desplegable seleccionado en evento de cambio usando jQuery
-
Use el método
cambiar ()para obtener el valor desplegable seleccionado en el evento de cambio usando jQuery -
Use el método
on()para 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.
jQuery proporciona varios métodos para realizar algo si se cambia un valor desplegable. Este tutorial demuestra diferentes métodos para mostrar jQuery en el efecto de cambio desplegable.
Use el método cambiar () para obtener el valor desplegable seleccionado en el evento de cambio usando jQuery
El cambio () es un evento jQuery incorporado que ocurre cada vez que se cambia un valor en los elementos del formulario. Cada vez que cambiamos un valor de formulario, el cambio invocará un método adjunto.
El cambio () se puede usar para cuadros de selección, casillas de verificación, menús desplegables, botones de opción, etc. Este método se puede implementar de dos maneras:
$(selector).cambio()- Solo activa el eventocambiopara los elementos dados.$(selector).cambio(función): activará el eventocambiare invocará la función proporcionada dentro del método; la función puede ser cualquier cosa. Esta función es un parámetro opcional.
Probemos un ejemplo usando cambio():
<!DOCTYPE html>
<html>
<head>
<title>JQuery Change Method</title>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(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>
<select name="bgcolor" id="bgcolor">
<option value="0">Background Color Blue</option>
<option value="1">Background Color Green</option>
<option value="2">Background Color Pink</option>
<option value="3">Background Color grey</option>
</select>
</div>
</body>
</html>
El código anterior puede cambiar el color de fondo del div cada vez que se selecciona un valor. Ver la salida:
Use el método on() para obtener el valor desplegable seleccionado en el evento de cambio usando jQuery
El método on() se puede utilizar con el evento cambiar para realizar una determinada operación cuando se selecciona un valor. El método on() con cambio invocará el cambio de evento y la función provista dentro de él.
El método on() es un método jQuery incorporado que se utiliza para diferentes operaciones. La sintaxis de este método es:
$(selector).on(event, childSelector, data, function, map)
Dónde:
- El
eventoes un parámetro obligatorio; en nuestro caso, serácambio. - El
childSelectores un parámetro opcional para especificar los elementos secundarios a los que se adjuntará el evento. - Los
datostambién son un parámetro opcional que se utiliza para pasar los datos cuando se activa el evento. - La
funcióntambién es un parámetro opcional que se invoca cuando se activa el evento. - El
mapaes el mapa de eventos.
Ahora probemos un ejemplo con el método on() para ejecutar el código jQuery después de seleccionar un valor:
<!DOCTYPE html>
<html>
<head>
<title>JQuery On Method</title>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(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>
<select name="bgcolor" id="bgcolor">
<option value="0">Background Color Blue</option>
<option value="1">Background Color Green</option>
<option value="2">Background Color Pink</option>
<option value="3">Background Color grey</option>
</select>
</div>
</body>
</html>
El código anterior puede cambiar el color de fondo para el div utilizando el método on() con un evento de cambio cada vez que se selecciona un valor. Ver la salida:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook