von "wählen Sie" Tag in JavaScript-Variable

Question

Probe von <select> HTML-Formular Element Einlochen Wert von W3Schools (etwas modifiziert):

<select> 
    <option value="a">Option A</option> 
    <option value="b">Option B</option> 
    /*...*/ 
</select> 

Soweit ich sehen konnte, weder option noch select hat id Eigenschaft, so das gute alte document.getElementById("name of select element").value funktioniert nicht.

Aber dann, wie kann ich das value Attribut der Option, die in der Liste in eine JS-Variable ausgewählt ist?

Ich bin mir bewusst, dass es durch einen Funktionsaufruf, z. wenn ich ein Button-Element drücke, aber was muss ich in diese Funktion schreiben?

Answer 1

Abgesehen von nur ihm eine ID zu geben, können Sie ein onchange Ereignis hinzufügen:

<select onchange="yourfunction(this.value)"> 
... 

Es gibt auch andere Möglichkeiten, Elemente in Ihrem DOM zugreifen. Zum Beispiel unter der Annahme, dies ist der einzige (oder erste) auswählen, die auf Ihrer Seite, die Sie seinen Wert mit einer Zeile wie diese zugreifen können:

var val = document.getElementsByTagName("select")[0].value; 

Answer 2

Wenn Sie nicht über ein id mit zu arbeiten, bietet das DOM eine einige andere APIs, die Sie verwenden können, aber wohl das vielseitigste ist:

document.querySelector("CSS Selector Here"); 

So können Sie einen Selektor verwenden, das das select Element durch den Tag-Namen select oder durch seine Position im DOM oder von einer Klasse findet Name, der darauf usw. angewendet wird

Dann, um den Wert zu erhalten, würden Sie dies schreiben:

var val = document.querySelector("CSS Selector Here").selectedIndex.value;