HTMLSelectElement: selectedOptions-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die schreibgeschützte HTMLSelectElement
-Eigenschaft
selectedOptions
enthält eine Liste der
<option>
-Elemente, die innerhalb des <select>
Elements enthalten sind und derzeit ausgewählt sind. Die Liste der ausgewählten Optionen ist ein
HTMLCollection
-Objekt mit einem Eintrag pro aktuell ausgewählter Option.
Eine Option wird als ausgewählt betrachtet, wenn sie ein HTMLOptionElement.selected
Attribut besitzt.
Wert
Eine HTMLCollection
, die jedes derzeit ausgewählte
HTMLOptionElement
auflistet, das entweder ein Kind des
HTMLSelectElement
ist oder eines HTMLOptGroupElement
innerhalb des
<select>
Elements ist.
Mit anderen Worten, jede Option, die innerhalb des <select>
Elements enthalten ist, kann
Teil der Ergebnisse sein, aber Optionsgruppen sind in der Liste nicht enthalten.
Wenn momentan keine Optionen ausgewählt sind, ist die Sammlung leer und gibt eine
length
von 0 zurück.
Beispiele
In diesem Beispiel wird ein <select>
-Element mit mehreren Optionen verwendet,
um es dem Benutzer zu ermöglichen, verschiedene Lebensmittel zu bestellen.
HTML
Das HTML, das das Auswahlfeld und die <option>
-Elemente erstellt,
die jede der Essensauswahlmöglichkeiten darstellen, sieht so aus:
<label for="foods">What do you want to eat?</label><br />
<select id="foods" name="foods" size="7" multiple>
<option value="1">Burrito</option>
<option value="2">Cheeseburger</option>
<option value="3">Double Bacon Burger Supreme</option>
<option value="4">Pepperoni Pizza</option>
<option value="5">Taco</option>
</select>
<br />
<button name="order" id="order">Order Now</button>
<p id="output"></p>
Das <select>
-Element ist so eingestellt, dass mehrere Elemente ausgewählt werden können,
und es ist 7 Zeilen hoch. Beachten Sie auch das <button>
, dessen Rolle es ist,
das Abrufen der HTMLCollection
der ausgewählten Elemente mittels der
selected
-Eigenschaft auszulösen.
JavaScript
Der JavaScript-Code, der den Ereignishandler für die Schaltfläche sowie den Ereignishandler selbst festlegt, sieht so aus:
let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");
orderButton.addEventListener(
"click",
() => {
let collection = itemList.selectedOptions;
let output = "";
for (let i = 0; i < collection.length; i++) {
if (output === "") {
output = "Your order for the following items has been placed: ";
}
output += collection[i].label;
if (i === collection.length - 2 && collection.length < 3) {
output += " and ";
} else if (i < collection.length - 2) {
output += ", ";
} else if (i === collection.length - 2) {
output += ", and ";
}
}
if (output === "") {
output = "You didn't order anything!";
}
outputBox.textContent = output;
},
false,
);
Dieses Skript richtet einen click
-Ereignislistener auf der Schaltfläche "Jetzt bestellen" ein. Wenn
geklickt, ruft der Ereignishandler die Liste der ausgewählten Optionen mit
selectedOptions
ab und durchläuft dann die Optionen in der Liste. Es wird ein String
konstruiert, um die bestellten Artikel aufzulisten, mit einer Logik, die die Liste unter Verwendung korrekter englischer
Grammatikregeln erstellt (einschließlich eines seriellen Kommas).
Ergebnis
Der resultierende Inhalt sieht in Aktion so aus:
Spezifikationen
Specification |
---|
HTML Standard # dom-select-selectedoptions-dev |
Browser-Kompatibilität
BCD tables only load in the browser