Ausgewählten Wert in Dropdown-Liste mit JavaScript abrufen

Question

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>

Answer 1

Sie können verwenden querySelector .

z.B.

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

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

Answer 2

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

Answer 3

Um mit den vorherigen Antworten übereinzustimmen, ist dies, wie ich es als ein Einzeiler tun. Damit wird der tatsächliche Text der ausgewählten Option abgerufen. Es gibt bereits gute Beispiele für die Abfrage der Indexnummer. (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 kann es notwendig sein, Klammern zu verwenden, aber das ist sehr selten der Fall.

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

Ich bezweifle, dass dies schneller geht als die zweizeilige Version. Ich mag es einfach, meinen Code so weit wie möglich zu konsolidieren.

Leider wird dadurch das Element zweimal geholt, was nicht ideal ist. Eine Methode, die das Element nur einmal abruft, wäre nützlicher, aber das habe ich noch nicht herausgefunden, in Bezug auf diese mit einer Zeile Code zu tun.

Answer 4

Ich habe eine etwas andere Vorstellung davon, wie man das erreichen kann. Normalerweise mache ich das mit dem folgenden Ansatz (es ist ein einfacher Weg 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>

Answer 5

Im Jahr 2015, in Firefox funktioniert auch das Folgende.

e. Optionen .selectedIndex