Heim >Web-Frontend >js-Tutorial >Wie kann ich mit jQuery ausgewählte Optionen zuverlässig aus einem Dropdown abrufen?
Ausgewählte Option aus einem Dropdown mit jQuery abrufen
Beim Arbeiten mit Dropdown-Menüs ist es wichtig, die ausgewählte Option genau abzurufen. Obwohl $("#id").val() häufig für diesen Zweck verwendet wird, kann es in bestimmten Szenarien zu unerwarteten Ergebnissen führen.
Problem:
In In bestimmten Fällen gibt die Verwendung von $("#id").val() möglicherweise nicht den Wert der ausgewählten Option zurück, insbesondere wenn der Dropdown-Liste ein ID-Attribut zugewiesen ist. Betrachten wir das folgende HTML-Codebeispiel:
<label for="name">Name</label> <input type="text" name="name">
In diesem Szenario würde die Verwendung von $('#aioConceptName').val() eine leere Zeichenfolge zurückgeben.
Lösung:
Um die ausgewählte Option aus einem Dropdown-Menü genau abzurufen, müssen wir einen etwas anderen Ansatz verwenden. Abhängig von unseren Anforderungen können wir entweder den ausgewählten Text oder den ausgewählten Wert erhalten.
Ausgewählten Text abrufen:
Um den Text der ausgewählten Option zu erhalten, können wir verwenden Folgender Code:
var conceptName = $('#aioConceptName').find(":selected").text();
Ausgewählte abrufen Wert:
Um den Wert der ausgewählten Option zu erhalten, verwenden wir einen etwas anderen Code:
var conceptName = $('#aioConceptName').find(":selected").val();
Der Grund, warum val() in diesem Szenario nicht funktioniert, ist dass das Klicken auf eine Option den Wert des Dropdown-Menüs selbst nicht ändert. Stattdessen wird der ausgewählten Option die Eigenschaft :selected hinzugefügt, die ein untergeordnetes Element des Dropdowns ist. Daher müssen wir find(":selected") verwenden, um die spezifische Option auszuwählen und ihren Text oder Wert entsprechend abzurufen.
Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery ausgewählte Optionen zuverlässig aus einem Dropdown abrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!