Neueste Web-Entwicklung Tutorials
 

Wählen Sie Optionen Kollektion

<Objekt auswählen

Beispiel

Finden Sie heraus, wie viele Möglichkeiten es in einer bestimmten Dropdown-Liste ist:

var x = document.getElementById("mySelect").options.length;

Das Ergebnis von x wird sein:

4
Versuch es selber "

Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.

Definition und Verwendung

Die Optionen Kollektion gibt eine Auflistung aller <option> Elemente in einer Dropdown-Liste.

Note: Die Elemente in der Sammlung sortiert werden , wie sie im Quelltext angezeigt.

Browser-Unterstützung

Sammlung
options Ja Ja Ja Ja Ja

Syntax

selectObject .options

Eigenschaften

Eigentum Beschreibung
length Gibt die Anzahl der <option> Elemente in der Sammlung.

Hinweis: Diese Eigenschaft ist schreibgeschützt
selectedIndex Setzt oder gibt den Index des ausgewählten <option> Element in der Auflistung (starts at 0)

Methods

Methode Beschreibung
[ index ] Gibt das <option> Element aus der Sammlung mit dem angegebenen Index (starts at 0) .

Hinweis: Gibt null zurück , wenn der Index außerhalb des zulässigen Bereichs
[ add( option [, index ]) ] Fügt ein <option> Element in die Sammlung am angegebenen Index. Wird kein Index angegeben ist, fügt es die Möglichkeit, am Ende der Sammlung
item( index ) Gibt das <option> Element aus der Sammlung mit dem angegebenen Index (starts at 0) .

Hinweis: Gibt null zurück , wenn der Index außerhalb des zulässigen Bereichs
namedItem( id ) Gibt das <option> Element aus der Sammlung mit der angegebenen ID.

Hinweis: Gibt null zurück , wenn die ID nicht existiert
remove( index ) Entfernt das <option> Element mit dem angegebenen Index aus der Sammlung

Technische Details

DOM Version: Core Level 2 Document Object
Rückgabewert: Ein HTMLOptionsCollection Objekt, stellvertretend für alle <option> Elemente in dem <select> Elemente. Die Elemente in der Sammlung werden sortiert, wie sie im Quelltext erscheinen
Beispiele

Mehr Beispiele

Beispiel

[Index]

Holen Sie sich den Text der ersten Option (index 0) in einer Dropdown-Liste:

var x = document.getElementById("mySelect").options[0].text;

Das Ergebnis von x wird sein:

Apple
Versuch es selber "

Beispiel

item( index )

Holen Sie sich den Text der ersten Option (index 0) in einer Dropdown-Liste:

var x = document.getElementById("mySelect").options.item(0).text;

Das Ergebnis von x wird sein:

Apple
Versuch es selber "

Beispiel

namedItem( id )

Holen Sie sich den Text der Option mit id = „orange“ in einer Dropdown-Liste:

var x = document.getElementById("mySelect").options.namedItem("orange").text;

Das Ergebnis von x wird sein:

Orange
Versuch es selber "

Beispiel

Fügen Sie eine "Kiwi" Option an der Indexposition "1" in einer Dropdown-Liste:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c, 1);
Versuch es selber "

Beispiel

Entfernen Sie die Option mit dem Index "1" aus einer Dropdown-Liste:

var x = document.getElementById("mySelect");
x.options.remove(1);
Versuch es selber "

Beispiel

Schleife durch alle Optionen in einer Dropdown-Liste und geben Sie den Text der einzelnen Optionen:

var x = document.getElementById("mySelect");
var txt = "";
var i;
for (i = 0; i < x.length; i++) {
    txt = txt + x.options[i].text + "<br>";
}

Das Ergebnis der txt wird:

Apple
Orange
Pineapple
Banana
Versuch es selber "

Beispiel

Wählen Sie eine Option in der Dropdown-Liste und geben den Text der ausgewählten Option in einem Element mit id = „Demo“:

var x = document.getElementById("mySelect");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML = x.options[i].text;

Das Ergebnis könnte sein:

Banana
Versuch es selber "

Beispiel

Ändern Sie die Optionen in einer Dropdown-Liste in Abhängigkeit von der gewählten Option in einer anderen Dropdown-Liste:

var carsAndModels = {};
carsAndModels['VO'] = ['V70', 'XC60', 'XC90'];
carsAndModels['VW'] = ['Golf', 'Polo', 'Scirocco', 'Touareg'];
carsAndModels['BMW'] = ['M6', 'X5', 'Z3'];

function ChangeCarList() {
    var carList = document.getElementById("car");
    var modelList = document.getElementById("carmodel");
    var selCar = carList.options[carList.selectedIndex].value;

    while (modelList.options.length) {
        modelList.remove(0);
    }

    var cars = carsAndModels[selCar];
    if (cars) {
        var i;
        for (i = 0; i < cars.length; i++) {
            var car = new Option(cars[i], i);
            modelList.options.add(car);
        }
    }
}
Versuch es selber "
<Objekt auswählen