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

In moderneren Browsern, querySelector ermöglicht es uns, die ausgewählte Option in einer einzigen Anweisung abzurufen, indem wir die :checked Pseudoklasse . Aus der gewählten Option können wir alle benötigten Informationen entnehmen:

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Answer 2

event.target.value innerhalb des onChange-Callbacks hat den Trick für mich getan.

Answer 3

Hier ist eine JavaScript-Codezeile:

var x = document.form1.list.value;

Angenommen, das Dropdown-Menü namens Liste name="list" und in ein Formular mit dem Attribut name aufgenommen name="form1" .

Answer 4

Sie sollten Folgendes verwenden querySelector um dies zu erreichen. Dadurch wird auch die Art und Weise standardisiert, wie Werte von Formularelementen abgerufen werden.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Fiedel: https://jsfiddle.net/3t80pubr/

Answer 5

Ich denke, Sie können einen Ereignis-Listener an das Select-Tag selbst anhängen, z. B:

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

In diesem Szenario sollten Sie sicherstellen, dass Sie ein Wertattribut für alle Ihre Optionen haben, und dass diese nicht null sind.