Aktuell ausgewählte Option in JavaScript

1. Verwenden Sie HTMLSelectElement.options, um die aktuelle Option aus einer Auswahlliste mit JavaScript abzurufen
2. Verwenden Sie HTMLSelectElement.selectedOptions, um die aktuelle Option aus einer Auswahlliste mit JavaScript abzurufen

Wir können verschiedene Arten von Formularen in Webseiten haben, wobei jedes Feld von einem bestimmten Typ ist. Manchmal müssen wir eine Option aus der Dropdown-Liste auswählen. Mit dem Element <select> wird eine Dropdown-Liste erstellt. Die Tags <option> innerhalb des <select>-Tags werden verwendet, um Optionen in der Dropdown-Liste zu definieren.

In diesem Tutorial erfahren Sie, wie Sie mit JavaScript die aktuell ausgewählte Option im Element <select> abrufen.

Verwenden Sie HTMLSelectElement.options, um die aktuelle Option aus einer Auswahlliste mit JavaScript abzurufen

Die Eigenschaft HTMLSelectElement.options gibt die HtmlOptionsCollections der im <select>-Element vorhandenen <option>-Elemente zurück.

Wir können eine Funktion erstellen, die den Wert der ausgewählten Option aus der Liste anzeigt.

Überprüfen Sie den Code unten.

HTML Quelltext:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript-Code:

var selection = document.getElementById('cars');
function select() {
  alert(selection.options[selection.selectedIndex].value);
}

Der selectedIndex gibt den Index der ausgewählten Option zurück.

Verwenden Sie HTMLSelectElement.selectedOptions, um die aktuelle Option aus einer Auswahlliste mit JavaScript abzurufen

Dieses HTMLSelectElement.selectedOptions enthält die Liste aller <option>-Elemente, die im ausgewählten <select>-Element definiert sind.

Überprüfen Sie den Code unten.

HTML Quelltext:

<select id="cars" onchange="select()">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

JavaScript-Code:

var selection = document.getElementById('cars');
function select() {
  alert(selection.selectedOptions[0].value);
}

Diese Methode funktioniert im Allgemeinen nicht im Internet Explorer.