So rufen Sie aus dem ausgewählten Wert aus dem Dropdown JavaScript ab
In JavaScript stoßen wir häufig auf benutzerfreundliche Webseiten, die einen Fragebogen oder ein Formular enthalten, um den Wert einzelner oder mehrerer ausgewählter Optionen zu erhalten. Darüber hinaus möchten wir während des Umgangs mit einer Quiz-basierten Webseite den Benutzer über den Status gegen die angegebene Antwort mit einem Wert benachrichtigen (korrekt, falsch). In solchen Fällen ist es sehr hilfreich, die ausgewählten Werte aus der Dropdown -Person zu richten und Zeit am Ende des Benutzers zu sparen.
In diesem Artikel werden Sie veranlasst, ausgewählte Werte aus einer Dropdown -Liste in JavaScript abzurufen.
So erhalten/abgerufen Sie ausgewählten Wert aus dem Dropdown in JavaScript?
Um den ausgewählten Wert aus dem Dropdown in JavaScript abzurufen, können Sie:
-
- “Wert" Eigentum.
- “SelectedIndex" Eigentum.
Wir werden jetzt jede der genannten Ansätze einzeln durchlaufen!
Methode 1: Ausgewählter Wert aus dem Dropdown -Bereich in JavaScript mithilfe der Werteigenschaft abrufen/abrufen
Der "WertEigenschaft gibt das Wertattribut eines Textfelds zurück. Wir werden diese Methode verwenden, um die ausgewählte Option aus einer Dropdown -Liste zu erhalten und ihren Wert anzuzeigen:
Syntax
auswählen.Wert
Hier das "WertDie Eigenschaft gibt den aus der Dropdown -Liste ausgewählten jeweiligen Wert zurück.
Lassen Sie uns das folgende Beispiel für ein besseres Verständnis des Konzepts durchgehen:
Beispiel
In diesem Beispiel geben wir die mit dem Namen benannte ID anwählen”Und fügen Sie die Optionswerte ein, die in der Dropdown -Liste ausgewählt werden sollen. Diese Optionswerte werden innerhalb der “platziert" Stichworte.
Jetzt werden wir einen Knopf mit einem angebenONCLICK" Fall. Dies wird so funktionieren, dass wenn der Knopf mit Wert “Option überprüfen"Drücken Sie, die Funktion"Wähle Wert()”Wird ausgelöst:
Wählen Sie das Geschlecht aus der angegebenen Dropdown -Liste aus:
Der Wert des ausgewählten Geschlechts lautet:
class = "output">
Als nächstes werden wir eine Funktion namens deklarieren “Wähle Wert()”. Hier werden wir das verwenden “dokumentieren.QuerySelector ()Methode zum Zugriff auf die ID des erstellten Dropdown-Menüs. Danach erhalten wir den Wert des ausgewählten Geschlechts aus der Dropdown -Liste mit der “Wert" Eigentum. Zuletzt die “TextinhaltDie Eigenschaft gibt den Textinhalt des ausgewählten Wertes zurück und zeigt ihn an:
Die Ausgabe der obigen Implementierung erfolgt wie folgt:
Methode 2: Abrufen Sie den ausgewählten Wert aus dem Dropdown in JavaScript mit der Eigenschaft "SelectedIndex" ab
Der "Möglichkeit"Immobilien gibt eine Sammlung aller Elemente und die" zurück "SelectedIndexDie Eigenschaft gibt den Index der ausgewählten Option aus der “zurückMöglichkeitEigenschaft in einer Dropdown-Liste. Wir werden beide zusammen verwenden, um eine bestimmte Option auszuwählen und den Wert der entsprechenden Option anzuzeigen, indem wir auf den Index zugreifen.
Syntax
wählen.Optionen [auswählen.SelectedIndex].Wert
Die oben gegebene Syntax hilft beim Abholen des Werts der ausgewählten Dropdown-Menüoption mit seinem Index.
Schauen Sie sich das folgende Beispiel zur Demonstration an:
Beispiel
Wir werden nun denselben HTML -Code im vorherigen Beispiel verwenden und einige Änderungen im JavaScript -Code vornehmen. Dazu werden wir die Funktion definieren “Wähle Wert()”Und greifen Sie auf die zugewiesene ID des mit dem Namen Dropdown -Menüs namens"wählen”Mit Hilfe des Dokuments.QuerySelector () -Methode. Danach werden wir das verwenden “Optionen"Eigenschaft in Kombination mit anderen Eigenschaften, einschließlich"SelectedIndex”Um den Wert der ausgewählten Option abzurufen.
Zuletzt die “TextinhaltIn dieser Methode wird die Eigenschaft verwendet, um den Textinhalt des ausgewählten Werts zurückzugeben und den entsprechenden Wert anzuzeigen:
Ausgang
Wir haben die einfachsten Methoden zur Verfügung gestellt, um einen ausgewählten Wert aus der Dropdown in JavaScript abzurufen.
Abschluss
Um den ausgewählten Wert aus dem Dropdown in JavaScript abzurufen/abzurufen, wenden Sie die “anWertEigenschaft, um den Wert des ausgewählten Elements aus der Dropdown -Liste und der “zu erhaltenMöglichkeitEigentum zusammen mit dem “SelectedIndexEigenschaft, um die Optionen zu erhalten und den Wert der ausgewählten Option zu erhalten, indem Sie auf den Index der bestimmten Option zugreifen. In dieser Beschreibung wurde die Methoden zum Abholen/Abrufen ausgewählter Werte aus dem Dropdown in JavaScript erläutert/abgerufen.