Select-Optionen-Sammlung

HTML DOM Select-Objekt

Definition und Verwendung

Optionen Die Sammlung gibt alle in der Dropdown-Liste enthaltenen option-Element Sammlung.

Anmerkung:Die Elemente im Set sind in der Reihenfolge ihrer appearance im Quellcode sortiert.

Beispiel

Beispiel 1

Zeige die Anzahl der Optionen in einer bestimmten Abwahlliste an:

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

Selbst ausprobieren

Das Ergebnis von x wird sein:

4

Hinweis:Mehr Beispiele werden am Ende der Seite bereitgestellt.

Syntax

selectObject.options

Attribut

Attribut Beschreibung
length

Gibt die Anzahl der <option>-Elemente in der Sammlung zurück.

Anmerkung:Dieses Attribut ist schreibgeschützt.
selectedIndex Setzt oder gibt die Indexnummer des ausgewählten <option>-Elements in der Sammlung zurück (ab 0 beginnend).

Methode

Methode Beschreibung
[index]

Von der Sammlung das <option>-Element mit der angegebenen Indexnummer (ab 0 beginnend) zurückgeben.

Anmerkung:Wenn die Indexnummer außerhalb des Bereichs liegt, wird null zurückgegeben.
[add(option[,index]]] Füge das <option>-Element an die angegebene Stelle in der Sammlung ein. Wenn keine Stelle angegeben ist, wird die Option am Ende der Sammlung eingefügt.
item(index)

Von der Sammlung das <option>-Element mit der angegebenen Indexnummer (ab 0 beginnend) zurückgeben.

Anmerkung:Wenn die Indexnummer außerhalb des Bereichs liegt, wird null zurückgegeben.
namedItem(id)

Von der Sammlung das <option>-Element mit der angegebenen ID zurückgeben.

Anmerkung:Wenn id Wenn es nicht existiert, wird null zurückgegeben.
remove(index) Entferne das <option>-Element mit der angegebenen Indexnummer aus der Sammlung.

Technische Details

DOM-Version: Core Level 2 Document Object
Rückgabewert:

HTMLOptionsCollection-Objekt, das alle <option>-Elemente im <select>-Element darstellt.

Die Elemente im Set sind in der Reihenfolge ihrer appearance im Quellcode sortiert.

Mehr Beispiele

Beispiel 2: [index]

Den Text der ersten Option in der Abwahlliste (Index 0) abrufen:

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

Selbst ausprobieren

Das Ergebnis von x wird sein:

Apfel

Beispiel 3: item(index)

Den Text der ersten Option in der Abwahlliste (Index 0) abrufen:

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

Selbst ausprobieren

Das Ergebnis von x wird sein:

Apfel

Beispiel 4: namedItem(id)

Den Text der Option mit id="orange" in der Abwahlliste abrufen:

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

Selbst ausprobieren

Das Ergebnis von x wird sein:

Orange

Beispiel 5

In der Abwahlliste am Indexstandort "1" die Option "Kiwi" hinzufügen:

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

Selbst ausprobieren

Beispiel 6

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

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

Selbst ausprobieren

Beispiel 7

Durchlaufen Sie alle Optionen der Dropdown-Liste und geben Sie den Text jeder Option aus:

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

Selbst ausprobieren

Das Ergebnis von x wird sein:

Apfel
Orange
Ananas
Banane

Beispiel 8

Wählen Sie eine Option aus der Dropdown-Liste aus und geben Sie den Text der ausgewählten Option im Element mit id="demo" aus:

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

Selbst ausprobieren

Das Ergebnis von x wird sein:

Banane

Beispiel 9

Ändern Sie die Auswahl in der Dropdown-Liste basierend auf der Auswahl 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);
    }
  }
}

Selbst ausprobieren

Browser-Unterstützung Sammlung Optionen Ja Ja Ja Ja Ja

HTML DOM Select-Objekt