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?

14voto

Olawale Oladiran Punkte 445

Ich weiß nicht, ob ich derjenige bin, der die Frage nicht richtig versteht, aber bei mir hat es einfach funktioniert: Verwenden Sie ein onchange()-Ereignis in Ihrem HTML, z. B.

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

//javascript

function selectNum(){
    var strUser = document.getElementById("numberToSelect").value;
}

Dadurch erhalten Sie den Wert, der in der Dropdown-Liste steht, per Klick

9voto

Frank Conijn Punkte 2851

Die bisherigen Antworten lassen noch Raum für Verbesserungen, was die Möglichkeiten, die Intuitivität des Codes und die 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 tut alle drei:

<!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 Zwecke der funktionalen Form, name ist immer noch gültig, auch in HTML5, und sollte weiterhin verwendet werden. Achten Sie schließlich auf die Verwendung von eckigen und runden Klammern an bestimmten Stellen. Wie bereits erwähnt, akzeptieren nur (ältere) Versionen des Internet Explorer runde Klammern an allen Stellen.

9voto

Verwendung von jQuery:

$('select').val();

8voto

Clairton Luz Punkte 1840

Am einfachsten ist dies zu bewerkstelligen:

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

1 Stimmen

Er möchte nicht den Wert, sondern den angezeigten Text des Auswahlfeldes

0 Stimmen

Ich denke, das ist die eigentliche Antwort, nach der die meisten Menschen suchen.

2 Stimmen

Gute Antwort! Sie war nützlich

8voto

Javad Kargar Punkte 1019

Eine andere Lösung ist:

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

0 Stimmen

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