Wie erhalte ich den ausgewählten Wert mithilfe von JavaScript aus einer Dropdown-Liste?
Ich habe die folgenden Methoden ausprobiert, aber alle geben den ausgewählten Index anstelle des Werts zurück:
var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
javascript
html-select
Feuerhand
quelle
quelle
Antworten:
Wenn Sie ein Auswahlelement haben, das so aussieht:
Ausführen dieses Codes:
Würde
strUser
sein2
. Wenn Sie tatsächlich möchtentest2
, tun Sie Folgendes:Welches wäre
strUser
seintest2
quelle
onchange
:)var strUser = e.options[e.selectedIndex].value;
warum nicht einfachvar strUser = e.value ?
var e = document.getElementById("ddlViewBy").value;
e.target.options[e.target.selectedIndex].text
nicht wissen, warum es in allen Antworten hier falsch ist ..Einfaches JavaScript:
jQuery:
AngularJS : ( http://jsfiddle.net/qk5wwyct ):
quelle
element.options[e.selectedIndex].value
muss seinelement.options[element.selectedIndex].value
e.target.options[e.target.selectedIndex].text
nicht wissen, warum es in allen Antworten hier falsch ist ..Dies ist korrekt und sollte Ihnen den Wert geben. Ist es der Text, nach dem Sie suchen?
Sie sind sich also der Terminologie klar:
Diese Option hat:
quelle
e.target.options[e.target.selectedIndex].text
nicht wissen, warum es in allen Antworten hier falsch ist ..Der folgende Code enthält verschiedene Beispiele zum Abrufen / Einfügen von Werten aus Eingabe- / Auswahlfeldern mithilfe von JavaScript.
Quelllink
Working Javascript & jQuery Demo
Das folgende Skript ruft den Wert der ausgewählten Option ab und fügt ihn in Textfeld 1 ein
Das folgende Skript ruft einen Wert aus einem Textfeld 2 ab und alarmiert mit seinem Wert
Das folgende Skript ruft eine Funktion von einer Funktion auf
quelle
onchange=run(this.value)
oder(this.text)
kann vorteilhafter sein.quelle
Wenn Sie jemals auf Code stoßen, der nur für Internet Explorer geschrieben wurde, sehen Sie möglicherweise Folgendes:
Wenn Sie die oben genannten Schritte in Firefox et al. Ausführen, wird der Fehler "ist keine Funktion" angezeigt, da Sie mit Internet Explorer () anstelle von [] verwenden können:
Der richtige Weg ist die Verwendung von eckigen Klammern.
quelle
Jedes Eingabe- / Formularfeld kann ein Schlüsselwort "this" verwenden, wenn Sie innerhalb des Elements darauf zugreifen. Dadurch entfällt die Notwendigkeit, ein Formular im Dom-Baum und dann dieses Element im Formular zu suchen.
quelle
Anfänger möchten wahrscheinlich auf Werte aus einer Auswahl mit dem Attribut NAME anstelle des Attributs ID zugreifen. Wir wissen, dass alle Formularelemente Namen benötigen, noch bevor sie IDs erhalten.
Daher füge ich die
getElementByName()
Lösung nur für neue Entwickler hinzu.NB. Namen für Formularelemente müssen eindeutig sein, damit Ihr Formular nach dem Posten verwendet werden kann. Das DOM kann jedoch zulassen, dass ein Name von mehreren Elementen gemeinsam genutzt wird. Aus diesem Grund sollten Sie Formularen IDs hinzufügen, wenn Sie können, oder explizit mit Formularelementnamen
my_nth_select_named_x
undmy_nth_text_input_named_y
.Beispiel mit
getElementByName
:quelle
Es gibt zwei Möglichkeiten, dies entweder mit JavaScript oder jQuery zu erreichen.
JavaScript:
ODER
jQuery:
quelle
Benutz einfach
$('#SelectBoxId option:selected').text();
um den Text wie aufgelistet zu erhalten$('#SelectBoxId').val();
zum Abrufen des ausgewählten Indexwertsquelle
Die vorherigen Antworten lassen aufgrund der Möglichkeiten, der Intuitivität des Codes und der Verwendung von
id
Versus noch Verbesserungspotenzialname
. Man kann drei Daten einer ausgewählten Option auslesen - ihre Indexnummer, ihren Wert und ihren Text. Dieser einfache, browserübergreifende Code erledigt alle drei Aufgaben:Live-Demo: http://jsbin.com/jiwena/1/edit?html,output .
id
sollte für Make-up-Zwecke verwendet werden. Ist für funktionale Formularename
weiterhin gültig, auch in HTML5, und sollte weiterhin verwendet werden. Beachten Sie zum Schluss die Verwendung von eckigen und runden Klammern an bestimmten Stellen. Wie bereits erläutert, akzeptiert nur (ältere Versionen von) Internet Explorer an allen Stellen runde.quelle
Verwenden von jQuery:
quelle
Eine andere Lösung ist:
quelle
Laufendes Beispiel, wie es funktioniert:
Hinweis: Die Werte ändern sich nicht, wenn das Dropdown-Menü geändert wird. Wenn Sie diese Funktionalität benötigen, muss eine onClick-Änderung implementiert werden.
quelle
Sie können verwenden
querySelector
.Z.B
quelle
Ich sehe das etwas anders. Normalerweise mache ich das mit dem folgenden Ansatz (es ist einfacher und funktioniert meines Wissens mit jedem Browser):
quelle
Im Jahr 2015 funktioniert in Firefox auch Folgendes.
quelle
Um den vorherigen Antworten zu folgen, mache ich das als Einzeiler. Hiermit wird der tatsächliche Text der ausgewählten Option abgerufen. Es gibt gute Beispiele, um die Indexnummer bereits zu erhalten. (Und für den Text wollte ich nur diesen Weg zeigen)
In einigen seltenen Fällen müssen Sie möglicherweise Klammern verwenden, dies ist jedoch sehr selten.
Ich bezweifle, dass dies schneller abläuft als die zweizeilige Version. Ich mag es einfach, meinen Code so weit wie möglich zu konsolidieren.
Leider holt dies das Element immer noch zweimal, was nicht ideal ist. Eine Methode, die das Element nur einmal erfasst, wäre nützlicher, aber ich habe das noch nicht herausgefunden, um dies mit einer Codezeile zu tun.
quelle
Hier ist eine JavaScript-Codezeile:
Angenommen, das Dropdown-Menü heißt list
name="list"
und ist in einem Formular mit dem Attribut name enthaltenname="form1"
.quelle
var as = document.form1.ddlViewBy.value;
..."Sie sollten verwenden
querySelector
, um dies zu erreichen. Dies standardisiert auch die Art und Weise, wie Wert aus Formularelementen abgerufen werden kann.var dropDownValue = document.querySelector('#ddlViewBy').value;
Geige: https://jsfiddle.net/3t80pubr/
quelle
Ich weiß nicht, ob ich derjenige bin, der die Frage nicht richtig beantwortet, aber das hat nur bei mir funktioniert: Verwenden eines onchange () -Ereignisses in Ihrem HTML, z.
// Javascript
Auf diese Weise erhalten Sie den Wert, der in der Auswahl-Dropdown-Liste pro Klick angegeben ist
quelle
Der einfachste Weg, dies zu tun, ist:
quelle
Hier ist eine einfache Möglichkeit, dies in einer Onchange-Funktion zu tun:
event.target.options[event.target.selectedIndex].dataset.name
quelle
Mach einfach:
document.getElementById('idselect').options.selectedIndex
Dann erhalten Sie einen ausgewählten Indexwert, beginnend mit 0.
quelle
Versuchen
Code-Snippet anzeigen
quelle
Erstellen Sie ein Dropdown-Menü mit mehreren Optionen (so viele wie Sie möchten!)
Ich habe ein bisschen komisch gemacht. Hier ist das Code-Snippet:
Ja, das Snippet hat funktioniert
quelle