it-swarm.com.de

Ausgewählten Wert in einer 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 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;
1485
Fire Hand

Wenn Sie ein select-Element 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>

Diesen Code ausführen:

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

strUser würde 2 sein. Wenn Sie eigentlich test2 wünschen, dann machen Sie folgendes:

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

Was würde strUser zu test2 machen

2513

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

So ist Ihnen die Terminologie klar:

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

Diese Option hat:

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

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

Quelllink

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 ruft den Wert der ausgewählten Option ab und fügt ihn 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 aus einer Funktion auf.

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

    function pop(val) {
        alert(val);
    }?
</script>
51
Code Spy
var selectedValue = document.getElementById("ddlViewBy").value;
29
Mohammad Faisal

Wenn Sie Code, der nur für IE geschrieben wurde, überqueren, 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 und anderen ausführen, erhalten Sie einen Fehler "ist keine Funktion", da Sie mit IE using () anstelle von [] verwenden können:

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

Der richtige Weg ist die Verwendung eckiger Klammern.

18
Carl Onager
<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>
13
boateng

Benutz einfach

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

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

12
Marvil Joy

Anfänger möchten wahrscheinlich auf Werte von select mit dem Attribut NAME statt mit dem Attribut ID zugreifen. Wir wissen, dass alle Formularelemente Namen benötigen, noch bevor sie IDs erhalten.

Ich füge also die getElementByName()-Lösung nur für neue Entwickler hinzu.

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 mehreren Elementen gemeinsam verwendet wird. Aus diesem Grund sollten Sie ggf. Formulare zu Formularen hinzufügen oder mit den Elementnamen my_nth_select_named_x und my_nth_text_input_named_y explizit angeben.

Beispiel mit getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;
11
Ben Greenaway

Die vorherigen Antworten lassen aufgrund der Möglichkeiten, der Intuitivität des Codes und der Verwendung von id gegenüber name noch Verbesserungsbedarf zu. Es können drei Daten einer ausgewählten Option ausgelesen werden - Indexnummer, Wert und Text. Dieser einfache, browserübergreifende Code erfüllt alle drei Funktionen: 

<!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. Aus funktionalen Gründen ist name auch in HTML5 gültig und sollte weiterhin verwendet werden. Beachten Sie schließlich die Verwendung von eckigen gegenüber runden Klammern an bestimmten Stellen. Wie bereits erläutert, akzeptieren nur ältere Versionen von IE an allen Stellen runde Versionen. 

8
Frank Conijn

Siehe Artikel Auswahl des Dropdown-Elements mit JavaScript oder jQuery. Sie haben es mit JavaScript und jQuery auf viele Arten erklärt.

JQuery verwenden:

$(‘select’).val();
6
user5846985

Sie können querySelector verwenden.

Z.B.

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

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

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 die Dropdown-Liste geändert wird. Wenn Sie diese Funktionalität benötigen, muss eine OnClick-Änderung implementiert werden.

4
Ani Menon

Es gibt zwei Möglichkeiten, dies entweder mit JavaScript oder JQuery auszuführen.

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'
4
Dulith De Costa

Um den obigen Antworten zu folgen, mache ich es 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 so zeigen)

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

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

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

Ich bezweifle, dass dies schneller abläuft als die zweizeilige Version. Ich möchte einfach meinen Code so weit wie möglich konsolidieren.

Wenn jemand weiß, wie man dies in einer Zeile erledigt, ohne das Element zweimal zu holen, würde ich mich freuen, wenn Sie kommentieren und mir zeigen, wie. Ich konnte das noch nicht verstehen ...

3
Genko

2015 funktioniert in Firefox auch das Folgende.

e .options .selectedIndex

3
Hector Llorens

eine andere Lösung ist:

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

Hier ist eine JavaScript-Codezeile:

var x = document.form1.list.value;

Angenommen, das Dropdown-Menü hat den Namen list name="list" und ist in ein Formular mit dem Namensattribut name="form1" aufgenommen.

2
Belgacem Ksiksi

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

Dann bekomme ich einen Indexwert, beginnend mit 0.

1
Knautiluz

Ich kann nur feststellen, dass dieser Code nicht funktioniert, wenn Sie IE7- verwenden und vergessen haben, das value-Attribut für Ihre <option>- Tags anzugeben Wert.

1
peirix

Sie können einfach selectElement.value verwenden, um den Wert der ausgewählten Option des select zu erhalten.

document.getElementById("idOfSelect").value;

var res = document.querySelector('p');
var select = document.querySelector('select');
res.textContent = "Selected Value: "+select.value;
select.addEventListener("change", function(e){
  res.textContent = "Selected Value: "+select.value;
});
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Change value of the select to show the value.
<p>
</p>

0
hev1

Ich habe eine etwas andere Ansicht, wie ich das erreichen kann. Normalerweise mache ich das mit folgender Vorgehensweise: (Dies ist einfacher und funktioniert mit jedem Browser, soweit ich weiß.)

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