HTMLOptionsCollection.length — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptionsCollection.length

Beschreibung

Die Eigenschaft length einer HTMLOptionsCollection enthält die Anzahl der <option>-Elemente, die zu einem <select>-Element gehören. An diese Sammlung kommt man meist über select.options. Optionen innerhalb von <optgroup>-Elementen werden mitgezählt.

Anders als bei den meisten DOM-Sammlungen kann man length hier nicht nur lesen, sondern auch setzen:

Ist der neue Wert kleiner als die aktuelle Anzahl, werden die überzähligen Optionen am Ende aus dem DOM entfernt. Mit length = 0 leert man ein Auswahlfeld also vollständig.
Ist der neue Wert größer, hängt der Browser neue, leere <option>-Elemente an. Sie haben keinen Text und keinen value-Wert.

Die Sammlung ist live. Wenn Optionen hinzugefügt oder entfernt werden, sei es über add(), remove() oder direkte DOM-Änderungen, passt sich length sofort an. select.options.length liefert denselben Wert wie select.length.

Parameter

Name	Typ	Default	Beschreibung
$value	number		Nur beim Schreiben: die neue Anzahl der Optionen. Der Wert wird in eine vorzeichenlose Ganzzahl umgewandelt. Kleinere Werte kürzen die Liste, größere hängen leere Optionen an.

Rückgabewert

Typ

number

Beschreibung

Eine nicht-negative Ganzzahl: die aktuelle Anzahl der <option>-Elemente in der Sammlung.

Beispiele

Anzahl der Optionen auslesen

// HTML: <select id="land"><option>Deutschland</option><option>Österreich</option><option>Schweiz</option></select>
const select = document.querySelector('#land');
console.log(select.options.length);
console.log(select.length); // gleicher Wert

3 3

Auswahlfeld leeren und mit Daten aus einer API neu füllen

const citySelect = document.querySelector('#stadt');

const loadCities = async (country) => {
  const res = await fetch(`/api/staedte?land=${encodeURIComponent(country)}`);
  const cities = await res.json(); // z. B. ['Berlin', 'Hamburg']

  // Alle bestehenden Optionen entfernen
  citySelect.options.length = 0;

  for (const city of cities) {
    citySelect.options.add(new Option(city, city));
  }
  console.log(`${citySelect.options.length} Städte geladen`);
};

loadCities('DE');

2 Städte geladen

Liste kürzen und erweitern

const select = document.createElement('select');
['A', 'B', 'C', 'D'].forEach((t) => select.add(new Option(t)));

select.options.length = 2; // entfernt C und D
console.log([...select.options].map((o) => o.text));

select.options.length = 4; // hängt zwei leere Optionen an
console.log([...select.options].map((o) => o.text || '(leer)'));

["A", "B"] ["A", "B", "(leer)", "(leer)"]

Rückwärts-Schleife zum gezielten Entfernen

const select = document.querySelector('#produkte');

// Rückwärts laufen, weil sich length beim Entfernen ändert
for (let i = select.options.length - 1; i >= 0; i--) {
  if (select.options[i].disabled) {
    select.options.remove(i);
  }
}
console.log('Verbleibend:', select.options.length);

Verbleibend: 5

// Wichtig · Fallstricke

Live-Sammlung: Wenn man in einer Vorwärts-Schleife mit i < options.length Optionen entfernt, werden Elemente übersprungen. Deshalb rückwärts laufen oder vorher mit [...select.options] eine Kopie anlegen.
Ein größerer Wert erzeugt leere Optionen ohne Text und ohne value. Das ist selten gewollt; zum Hinzufügen besser add() bzw. new Option() verwenden. Browser können übertrieben große Werte ignorieren.
Nicht-numerische oder negative Werte werden in eine vorzeichenlose Ganzzahl umgewandelt. Das kann zu unerwarteten Ergebnissen führen, deshalb immer gültige Ganzzahlen zuweisen.
Wenn beim Kürzen die aktuell ausgewählte Option entfernt wird, ändert sich selectedIndex. Ein change-Ereignis wird dabei nicht ausgelöst.
Kompatibilität: wird seit langem von allen Browsern unterstützt, auch das Setzen von length.

Siehe auch

HTMLOptionsCollection.selectedIndex HTMLAllCollection.length HTMLCollection.length HTMLOptionElement.text HTMLFormElement.length