Holen Sie sich den Wert der ausgewählten Option aus der Dropdown-Liste in JavaScript
In JavaScript ist die Arbeit mit oder das Nachverfolgen von Benutzerinteraktionen wie Mausklicks oder Tastatureingaben eine Herausforderung. Dank der JavaScript-Ereignisse ist es für uns einfacher, die Interaktionen der Benutzer zu verfolgen und die aktualisierten Werte zu erhalten, nachdem die Benutzer auf der Webseite einige Änderungen vorgenommen haben.
Wenn es zum Beispiel ein Dropdown-Menü gibt und Sie eine Option aus der Liste aller anderen Optionen auswählen müssen, passiert Folgendes: Sie können den Wert der Option, die Sie aus der Dropdown-Liste ausgewählt haben, leicht abrufen Liste mit Hilfe von Maus-Klick-Ereignissen.
Wie Sie dies im Detail umsetzen, erfahren Sie in diesem Artikel.
Abrufen der ausgewählten Option aus einer Liste mithilfe von Mausereignissen in JavaScript
Ereignisse in JavaScript sind eine großartige Möglichkeit, die Interaktionen des Benutzers auf der Webseite zu verfolgen, wie z. B. Mausklicks oder Tastaturklickereignisse. In JavaScript stehen verschiedene Ereignisse zur Verfügung, eine vollständige Liste finden Sie hier. Von all diesen Ereignissen werden wir uns nur auf die Diskussion des Mausklick-Ereignisses konzentrieren.
Immer wenn Benutzer auf eine der Optionen in der Dropdown-Liste klicken, wird unser Mausklick-Ereignis ausgelöst. Mit dieser Funktion können wir den Wert der ausgewählten Option einfach aus dem Dropdown-Menü abrufen.
Sehen wir uns nun an, wie es während der Ausführung funktioniert.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="list">
<option class="drop-down">test1</option>
<option class="drop-down" selected="selected">test2</option>
<option class="drop-down">test3</option>
</select>
<script src="./script.js"></script>
</body>
</html>
Das Folgende ist der JavaScript-Code.
function myFunction() {
let elem = document.querySelectorAll('.drop-down');
elem.forEach(element => {
element.addEventListener('click', e => {
console.log(e.target.innerHTML);
});
})
}
myFunction();
Ausgabe:
test2
test3
test1
Beachten Sie, dass die Ausgabe je nachdem, welche Option vom Benutzer aus der Dropdown-Liste ausgewählt wurde, unterschiedlich ist.
In unserem HTML haben wir ein select-Tag mit einer id von list, das verwendet wird, um eine Dropdown-Liste zu erstellen. In diesem Fall gibt es innerhalb des select-Tags drei Optionen, von denen jede den Klassennamen drop-down hat. Und am Ende verlinken wir den JavaScript-Code am Ende des body-Tags, da er in einer separaten Datei vorhanden ist.
Innerhalb des JavaScripts haben wir eine Funktion namens myFunction(). Hier erhalten wir zunächst alle Optionselemente der Dropdown-Liste mit dem Klassennamen drop-down über die Eigenschaft querySelectorAll. Dieser Vorgang gibt ein Array zurück, das alle Optionen der Dropdown-Liste enthält. Dann speichern wir dieses Array in einer Variablen namens elem.
Nachdem wir nun alle Optionen in der Variablen elem gespeichert haben, verwenden wir für diese Variable eine for each-Schleife. Die for each-Schleife hilft uns, die einzelnen Elemente des Arrays zu erhalten, sodass wir nun jedem dieser Optionselemente des Arrays Ereignis-Listener hinzufügen können.
Auf die einzelnen Elemente innerhalb des Arrays kann mit der Variablen element zugegriffen werden, die als Argument an die for each-Schleife übergeben wird. Um ein Ereignis zu element hinzuzufügen, müssen wir eine von JavaScript bereitgestellte Methode namens addEventListener() verwenden, die zwei Argumente benötigt.
Das erste Argument ist das Ereignis click und das zweite Argument ist die Funktion callback. Das Ereignis click weist den Browser an, die Funktion callback nur auszuführen, wenn ein Benutzer auf eine der Optionen aus dem Dropdown-Menü klickt (linke Maustaste). Die Funktion callback selbst nimmt ein Argument namens e oder event an, das uns hilft, das vom Benutzer ausgewählte Element zu erhalten.
In der Funktion callback können Sie beliebigen Code schreiben. Da wir in diesem Fall den Wert der ausgewählten Option erhalten möchten, verwenden wir e.target. Dieser Befehl gibt an, welches HTML-Element gerade ausgewählt ist.
Um schließlich den Wert dieser ausgewählten Option zu erhalten, können wir e.target.innerHTML verwenden und dies innerhalb der Methode console.log() übergeben, um die Ausgabe im Konsolenfenster anzuzeigen.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn