2281 Stimmen

Ausgewählten Wert in Dropdown-Liste mit JavaScript abrufen

Wie erhalte ich den ausgewählten Wert aus einer Dropdown-Liste mit JavaScript?

Ich habe die folgenden Methoden ausprobiert, aber sie geben alle den ausgewählten Index statt des Wertes zurück:

var e = document.getElementById("ddlViewBy");
function show(){
  var as = document.forms[0].ddlViewBy.value;
  var strUser = e.options[e.selectedIndex].value;
  console.log(as, strUser);
}
e.onchange=show;
show();

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

0 Stimmen

Wie kann ich den ausgewählten Wert erhalten, wenn ich das Attribut "ausgewählt" nicht verwende?

3641voto

Paolo Bergantino Punkte 465120

Wenn Sie ein Select-Element haben, das wie folgt 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.value;

Würde machen strUser sein 2 . Wenn Sie eigentlich etwas wollen test2 dann tun Sie dies:

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

Das würde bedeuten strUser sein test2

0 Stimmen

Ich schreibe genau denselben Code, aber innerhalb einer Funktion im Skript-Tag. Wenn der Benutzer die Option aus dem Dropdown-Menü auswählt, dann sollte ich den Text erhalten. Also sollte ich mit onclick/ontoggle/onchange? Welche der ein?

169 Stimmen

var strUser = e.options[e.selectedIndex].value; warum nicht einfach var strUser = e.value ?

27 Stimmen

@TheRedPea - vielleicht, weil, als diese Antwort geschrieben wurde, die Möglichkeit bestand (wie gering auch immer), dass eine uralte Version von Netscape Navigator berücksichtigt werden musste, so dass eine ebenso uralte Methode für den Zugriff auf den Wert eines einzelnen Selects verwendet wurde. Aber das ist nur eine Vermutung ;-)

464voto

Vitalii Fedorenko Punkte 103468

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").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'
}];

2 Stimmen

Ich muss etwas falsch machen, denn wenn ich dies versuche, erhalte ich den Text jeder Option in der Dropdown-Liste.

6 Stimmen

Das hat bei mir auf unterschiedliche Weise funktioniert. $("#ddlViewBy :selected").val() nicht ohne selected

1 Stimmen

element.options[e.selectedIndex].value muss sein element.options[element.selectedIndex].value

194voto

Greg Punkte 306033
var strUser = e.options[e.selectedIndex].value;

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

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

Damit Sie sich über die Terminologie im Klaren sind:

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

Diese Option hat:

  • Index = 0
  • Wert = hallo
  • Text = Hallo Welt

1 Stimmen

Ich dachte, die ".value" in Javascript sollte den Wert für mich zurückgibt, aber nur die ".text" würde als was die .SelectedValue in asp.net zurückgibt. Vielen Dank für das Beispiel gegeben!

1 Stimmen

Ja - machen Sie den Wert der Option so hoch wie er ist. Einfacher - der Typ oben muss mehr Code schreiben, um seine anfängliche Unklarheit auszugleichen.

0 Stimmen

Sollte sein e.target.options[e.target.selectedIndex].text Ich weiß nicht, warum es in allen Antworten hier falsch ist.

70voto

Code Spy Punkte 8650

Der folgende Code zeigt verschiedene Beispiele für das Abrufen/Eingeben von Werten aus Eingabe-/Auswahlfeldern mit JavaScript.

Quelle Link

Arbeiten Javascript & jQuery Demo

enter image description here

enter image description here

 <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 ermittelt den Wert der ausgewählten Option und setzt ihn in das Textfeld 1

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

Das folgende Skript ruft einen Wert aus einem Textfeld 2 ab und gibt eine Meldung mit diesem Wert aus

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

Das folgende Skript ruft eine Funktion aus einer Funktion auf

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

    function pop(val) {
        alert(val);
    }?
</script>

0 Stimmen

onchange=run(this.value) o (this.text) wohlwollender sein kann.

55voto

Mohammad Faisal Punkte 1919
var selectedValue = document.getElementById("ddlViewBy").value;

5 Stimmen

Dies ist die einfachste Lösung, zumindest bei modernen Browsern. Siehe auch W3Schulen .

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X