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

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;

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

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

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

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

Quelllink

Working Javascript & jQuery Demo

 <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>

var selectedValue = document.getElementById("ddlViewBy").value;

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.

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

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;

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'

Benutz einfach

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

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

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.

Verwenden von jQuery:

$('select').val();

Eine andere Lösung ist:

document.getElementById('elementId').selectedOptions[0].value

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.

Sie können verwenden querySelector.

Z.B

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

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

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>

Im Jahr 2015 funktioniert in Firefox auch Folgendes.

e. Optionen .selectedIndex

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.

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".

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/

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

Der einfachste Weg, dies zu tun, ist:

var value = document.getElementById("selectId").value;

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

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

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

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

Versuchen

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

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