Ausgewählter Dropdown-Wert bei Änderungsereignis mit jQuery
-
Verwenden Sie die
change()-Methode, um den ausgewählten Dropdown-Wert bei einem Änderungsereignis mit jQuery abzurufen -
Verwenden Sie die
on()-Methode, um den ausgewählten Dropdown-Wert bei einem Änderungsereignis mit jQuery abzurufen
Dieses Tutorial zeigt, wie eine bestimmte Funktion ausgeführt wird, wenn der ausgewählte Wert des Dropdowns mit jQuery geändert wird.
jQuery bietet mehrere Methoden, um etwas auszuführen, wenn ein Dropdown-Wert geändert wird. Dieses Tutorial zeigt verschiedene Methoden, um jQuery auf dem Dropdown-Änderungseffekt anzuzeigen.
Verwenden Sie die change()-Methode, um den ausgewählten Dropdown-Wert bei einem Änderungsereignis mit jQuery abzurufen
change() ist ein eingebautes jQuery-Event, das immer dann eintritt, wenn ein Wert in den Formularelementen geändert wird. Immer wenn wir einen Formularwert ändern, ruft die Änderung eine damit verbundene Methode auf.
Das change() kann für Select-Boxen, Checkboxen, Dropdowns, Radio-Buttons usw. verwendet werden. Diese Methode kann auf zwei Arten implementiert werden:
$(selector).change()– Löst nur daschange-Ereignis für die angegebenen Elemente aus.$(selector).change(function)– Es löst daschange-Ereignis aus und ruft die in der Methode bereitgestellte Funktion auf; Die Funktion kann alles sein. Diese Funktion ist ein optionaler Parameter.
Versuchen wir ein Beispiel mit change():
<!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>
Der obige Code kann die Hintergrundfarbe für das div jedes Mal ändern, wenn ein Wert ausgewählt wird. Siehe die Ausgabe:
Verwenden Sie die on()-Methode, um den ausgewählten Dropdown-Wert bei einem Änderungsereignis mit jQuery abzurufen
Die Methode on() kann mit dem Ereignis change verwendet werden, um eine bestimmte Operation auszuführen, wenn ein Wert ausgewählt wird. Die Methode on() mit change ruft die Ereignisänderung und die darin bereitgestellte Funktion auf.
Die on()-Methode ist eine eingebaute jQuery-Methode, die für verschiedene Operationen verwendet wird. Die Syntax für diese Methode lautet:
$(selector).on(event, childSelector, data, function, map)
Wo:
- Das
Ereignisist ein obligatorischer Parameter; in unserem Fall wird eschangesein. - Der
childSelectorist ein optionaler Parameter zur Angabe der untergeordneten Elemente, an die das Ereignis angehängt wird. - Das
dataist ebenfalls ein optionaler Parameter, der für die zu übergebenden Daten verwendet wird, wenn das Ereignis ausgelöst wird. - Die
Funktionist ebenfalls ein optionaler Parameter, der aufgerufen wird, wenn das Ereignis ausgelöst wird. - Die
Karteist die Ereigniskarte.
Versuchen wir nun ein Beispiel mit der Methode on(), um den jQuery-Code auszuführen, nachdem ein Wert ausgewählt wurde:
<!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>
Der obige Code kann die Hintergrundfarbe für das div mit der on()-Methode mit einem change-Event jedes Mal ändern, wenn ein Wert ausgewählt wird. Siehe die Ausgabe:
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