Holen Sie sich den ausgewählten Wert in der Dropdown-Liste mit JavaScript

1784

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;
Feuerhand
quelle

Antworten:

2927

Wenn Sie ein Auswahlelement haben, das so aussieht:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Ausführen dieses Codes:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Würde strUsersein 2. Wenn Sie tatsächlich möchten test2, tun Sie Folgendes:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

Welches wäre strUserseintest2

Paolo Bergantino
quelle
13
@ R11G, benutze onchange:)
AlexJaa
142
var strUser = e.options[e.selectedIndex].value;warum nicht einfachvar strUser = e.value ?
Die rote Erbse
18
@ TheRedPea - Vielleicht, weil beim Schreiben dieser Antwort die Möglichkeit bestand (wie weit entfernt sie auch sein mag), dass eine alte Version von Netscape Navigator untergebracht werden musste, wurde eine ebenso alte Methode für den Zugriff auf den Wert einer einzelnen Auswahl verwendet. Aber ich rate nur darüber. ;-)
RobG
12
Ich benutzte so:var e = document.getElementById("ddlViewBy").value;
Fathur Rohim
3
sollte e.target.options[e.target.selectedIndex].textnicht wissen, warum es in allen Antworten hier falsch ist ..
OZZIE
372

Einfaches JavaScript:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];
Vitalii Fedorenko
quelle
1
Ich muss etwas falsch machen, denn wenn ich das versuche, erhalte ich den Text jeder Option in der Dropdown-Liste zurück.
Kevin
6
Das hat bei mir anders funktioniert. $ ("# ddlViewBy: selected"). val () nicht ohne selected
Ruwantha
1
element.options[e.selectedIndex].valuemuss seinelement.options[element.selectedIndex].value
Christopher
Immer noch nützlich - danke, dass Sie die Variationen / Sprache geschrieben haben! Wenn ich nur das Äquivalent für Office JS API Dropdown wüsste ...
Cindy Meister
sollte e.target.options[e.target.selectedIndex].textnicht wissen, warum es in allen Antworten hier falsch ist ..
OZZIE
174
var strUser = e.options[e.selectedIndex].value;

Dies ist korrekt und sollte Ihnen den Wert geben. Ist es der Text, nach dem Sie suchen?

var strUser = e.options[e.selectedIndex].text;

Sie sind sich also der Terminologie klar:

<select>
    <option value="hello">Hello World</option>
</select>

Diese Option hat:

  • Index = 0
  • Wert = Hallo
  • Text = Hallo Welt
Greg
quelle
1
Ich dachte, der ".value" in Javascript sollte den Wert für mich zurückgeben, aber nur der ".text" würde zurückgeben, wie der .SelectedValue in asp.net zurückgibt. Danke zum Beispiel gegeben!
Feuer Hand
1
Ja - machen Sie den Wert der Option so, wie er ist. Einfacher - der Typ oben muss mehr Code schreiben, um seine anfängliche Unbestimmtheit auszugleichen.
Andrew Koper
sollte e.target.options[e.target.selectedIndex].textnicht wissen, warum es in allen Antworten hier falsch ist ..
OZZIE
62

Der folgende Code enthält verschiedene Beispiele zum Abrufen / Einfügen von Werten aus Eingabe- / Auswahlfeldern mithilfe von JavaScript.

Quelllink

Working Javascript & jQuery Demo

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

Das folgende Skript ruft den Wert der ausgewählten Option ab und fügt ihn in Textfeld 1 ein

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

Das folgende Skript ruft einen Wert aus einem Textfeld 2 ab und alarmiert mit seinem Wert

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

Das folgende Skript ruft eine Funktion von einer Funktion auf

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>
Code Spy
quelle
onchange=run(this.value)oder (this.text)kann vorteilhafter sein.
Berci
42
var selectedValue = document.getElementById("ddlViewBy").value;
Mohammad Faisal
quelle
5
Dies ist die einfachste Lösung, zumindest für moderne Browser. Siehe auch W3Schools .
Erik Koopmans
22

Wenn Sie jemals auf Code stoßen, der nur für Internet Explorer geschrieben wurde, sehen Sie möglicherweise Folgendes:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

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:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Der richtige Weg ist die Verwendung von eckigen Klammern.

Carl Onager
quelle
19
<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

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.

boateng
quelle
Eine Erklärung wäre angebracht.
Peter Mortensen
14

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_xund my_nth_text_input_named_y.

Beispiel mit getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
Ben Greenaway
quelle
Funktioniert nicht, wenn my_select_with_name_ddlViewBy ein Array wie my_select_with_name_ddlViewBy [] ist
zeuf
14

Es gibt zwei Möglichkeiten, dies entweder mit JavaScript oder jQuery zu erreichen.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

ODER

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'
Dulith De Costa
quelle
12

Benutz einfach

  • $('#SelectBoxId option:selected').text(); um den Text wie aufgelistet zu erhalten

  • $('#SelectBoxId').val(); zum Abrufen des ausgewählten Indexwerts

Marvil Joy
quelle
5
Dies verwendet jQuery, das die Frage des OP nicht beantwortet.
David Meza
9

Die vorherigen Antworten lassen aufgrund der Möglichkeiten, der Intuitivität des Codes und der Verwendung von idVersus noch Verbesserungspotenzial name. 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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

Live-Demo: http://jsbin.com/jiwena/1/edit?html,output .

idsollte für Make-up-Zwecke verwendet werden. Ist für funktionale Formulare nameweiterhin 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.

Frank Conijn
quelle
8

Verwenden von jQuery:

$('select').val();
Félix Gagnon-Grenier
quelle
7

Eine andere Lösung ist:

document.getElementById('elementId').selectedOptions[0].value
Javad Kargar
quelle
6

Laufendes Beispiel, wie es funktioniert:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);
<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

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.

Ani Menon
quelle
Gute Antwort, um zu zeigen, wie der Code nach der Verwendung aktualisiert werden muss!
Benutzer, der kein Benutzer ist
5

Sie können verwenden querySelector.

Z.B

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;
Rounin
quelle
5

Ich sehe das etwas anders. Normalerweise mache ich das mit dem folgenden Ansatz (es ist einfacher und funktioniert meines Wissens mit jedem Browser):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>
ThomAce
quelle
4

Im Jahr 2015 funktioniert in Firefox auch Folgendes.

e. Optionen .selectedIndex

Hector Llorens
quelle
4

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)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

In einigen seltenen Fällen müssen Sie möglicherweise Klammern verwenden, dies ist jedoch sehr selten.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

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.

Genko
quelle
3

Hier ist eine JavaScript-Codezeile:

var x = document.form1.list.value;

Angenommen, das Dropdown-Menü heißt list name="list"und ist in einem Formular mit dem Attribut name enthalten name="form1".

Belgacem Ksiksi
quelle
OP sagte, dass das für sie nicht funktioniert hat: "Ich habe die folgenden Methoden ausprobiert, aber alle geben den ausgewählten Index anstelle des Werts zurück: var as = document.form1.ddlViewBy.value;..."
Benutzer, der kein Benutzer ist
2

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/

Pal Singh
quelle
1

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.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// Javascript

function sele(){
    var strUser = numberToSelect.value;
}

Auf diese Weise erhalten Sie den Wert, der in der Auswahl-Dropdown-Liste pro Klick angegeben ist

Olawale Oladiran
quelle
1

Der einfachste Weg, dies zu tun, ist:

var value = document.getElementById("selectId").value;
Clairton Luz
quelle
Er möchte nicht den Wert, sondern den angezeigten Text des Auswahlfelds
Thanasis
0

Hier ist eine einfache Möglichkeit, dies in einer Onchange-Funktion zu tun:

event.target.options[event.target.selectedIndex].dataset.name

zackifizieren
quelle
1
Apropos Einfachheit, dachte ich an dieser Stelle von event.target
Christian Læirbag
0

Mach einfach: document.getElementById('idselect').options.selectedIndex

Dann erhalten Sie einen ausgewählten Indexwert, beginnend mit 0.

Knautiluz
quelle
Dies funktioniert nicht
Hujjat Nazari
-1

Versuchen

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

Kamil Kiełczewski
quelle
-1

Erstellen Sie ein Dropdown-Menü mit mehreren Optionen (so viele wie Sie möchten!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Ich habe ein bisschen komisch gemacht. Hier ist das Code-Snippet:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

Ja, das Snippet hat funktioniert

Gefährliches Spiel
quelle