Frage Erhalten Sie ausgewählten Wert in der Dropdown-Liste mit JavaScript?


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

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;
var value = document.getElementById("ddlViewBy").value;

1370
2017-07-06 07:25


Ursprung


Antworten:


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>

Diesen Code ausführen:

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

Machen würden strUser Sein 2. Wenn das was du willst ist es test2, dann tu das:

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

Was würde machen strUser Sein test2


2330
2017-07-06 07:29



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/qk5wwwct):

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

280
2017-12-18 02:08



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

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

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

Sie sind also klar in der Terminologie:

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

Diese Option hat:

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

155
2017-07-06 07:29



Der folgende Code zeigt verschiedene Beispiele zum Abrufen / Setzen von Werten aus Eingabe- / Auswahlfeldern mithilfe von JavaScript.

Arbeiten 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 erhält den Wert der ausgewählten Option und fügt sie in das Textfeld 1 ein

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

Das folgende Skript erhält einen Wert aus einem Textfeld 2 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>

47
2017-12-03 06:50



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

21
2017-10-25 13:27



Wenn Sie jemals auf Code stoßen, der nur für IE geschrieben wurde, sehen Sie vielleicht Folgendes:

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

Wenn Sie das oben genannte in Firefox und anderen ausführen, erhalten Sie einen 'is not a function' Fehler, weil IE Ihnen erlaubt, mit () anstelle von [] fortzufahren:

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

Der richtige Weg ist die Verwendung von eckigen Klammern.


18
2018-06-18 15:28



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

12
2018-04-14 13:45



Benutz einfach

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

  • $('#SelectBoxId').val(); um den ausgewählten Indexwert zu erhalten


11
2018-02-18 11:01



Anfänger werden wahrscheinlich lieber auf Werte aus einer Auswahl mit dem Attribut NAME als auf das Attribut ID zugreifen. Wir wissen, dass alle Formularelemente Namen benötigen, noch bevor sie IDs erhalten.

Also, ich füge die hinzu getElementByName() Lösung nur für neue Entwickler zu sehen.

NB. Namen für Formularelemente müssen eindeutig sein, damit Ihr Formular nach der Veröffentlichung verwendet werden kann. Das DOM kann jedoch zulassen, dass ein Name von mehr als einem Element verwendet wird. Ziehen Sie aus diesem Grund in Betracht, IDs zu Formularen hinzuzufügen, wenn Sie dies können, oder explizit mit Formularelementnamen my_nth_select_named_x und 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;

11
2018-03-09 03:32



Die bisherigen Antworten lassen noch Raum für Verbesserungen aufgrund der Möglichkeiten, der Intuitivität des Codes und der Verwendung von id gegen name. Man kann drei Daten einer ausgewählten Option auslesen - ihre Indexnummer, ihren Wert und ihren Text. Dieser einfache, browserübergreifende Code führt alle drei aus:

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

id sollte für Make-up-Zwecke verwendet werden. Für funktionelle Formzwecke name ist immer noch gültig, auch in HTML5, und sollte weiterhin verwendet werden. Berücksichtigen Sie schließlich die Verwendung von Quadrat anstelle von runden Klammern an bestimmten Stellen. Wie bereits erwähnt, werden nur (ältere Versionen von) IE an allen Orten runde akzeptieren.


7
2018-05-22 02:42