HTMLSelectElement.length — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.length

Beschreibung

Die Eigenschaft length des Interfaces HTMLSelectElement liefert als unsigned long, wie viele <option>-Elemente zu einem <select> gehören. Mitgezählt werden auch Optionen, die in <optgroup>-Elementen verschachtelt sind. Die <optgroup>-Elemente selbst zählen nicht. Der Wert ist identisch mit select.options.length.

Anders als bei vielen anderen length-Eigenschaften im DOM kann man diesen Wert auch schreiben:

Ist der neue Wert kleiner, werden überzählige Optionen am Ende aus dem DOM entfernt.
Ist der neue Wert größer, werden neue, leere <option>-Elemente am Ende angefügt.
Mit select.length = 0 leert man die Auswahlliste schnell und vollständig.

Typische Einsatzfälle: prüfen, ob eine Liste überhaupt Einträge hat, per Index über alle Optionen laufen oder abhängige Auswahllisten zurücksetzen, bevor man sie neu befüllt (zum Beispiel Land → Stadt).

Parameter

Name	Typ	Default	Beschreibung
$value	number		Nur beim Schreiben: die neue Anzahl an Optionen. Kleinere Werte entfernen Optionen am Ende, größere fügen leere `<option>`-Elemente an.

Rückgabewert

Typ

number

Beschreibung

Die aktuelle Anzahl der <option>-Elemente im <select>, einschließlich der Optionen in <optgroup>. Eine ganze Zahl ≥ 0.

Beispiele

Anzahl der Optionen auslesen (inklusive optgroup)

// HTML:
// <select id="obst">
//   <option>Apfel</option>
//   <optgroup label="Beeren">
//     <option>Erdbeere</option>
//     <option>Himbeere</option>
//   </optgroup>
// </select>
const select = document.querySelector('#obst');
console.log(select.length);
console.log(select.length === select.options.length);

3 true

Abhängige Auswahlliste leeren und neu befüllen

const staedte = {
  de: ['Berlin', 'Hamburg', 'München'],
  at: ['Wien', 'Graz']
};

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

land.addEventListener('change', () => {
  stadt.length = 0; // alle bisherigen Optionen entfernen
  for (const name of staedte[land.value] ?? []) {
    stadt.add(new Option(name, name.toLowerCase()));
  }
  stadt.disabled = stadt.length === 0;
  console.log(`${stadt.length} Städte geladen`);
});

3 Städte geladen // nach Auswahl von "de"

Liste kürzen und per Index durchlaufen

const select = document.createElement('select');
['Rot', 'Grün', 'Blau', 'Gelb'].forEach((f) => select.add(new Option(f)));

select.length = 2; // entfernt 'Blau' und 'Gelb'

for (let i = 0; i < select.length; i++) {
  console.log(i, select[i].text);
}

select.length = 3; // fügt eine leere Option an
console.log(JSON.stringify(select[2].text));

0 Rot 1 Grün ""

// Wichtig · Fallstricke

Schreiben verändert das DOM: Wird length verkleinert, werden die Optionen am Ende entfernt, und zwar ohne Rückfrage. Waren sie ausgewählt, ändert sich selectedIndex bzw. value entsprechend. Ein change-Ereignis wird dabei nicht ausgelöst.
Obergrenze: Laut HTML-Spezifikation wird ein Setzen auf Werte über 100.000 ignoriert. Manche Browser geben dann zusätzlich eine Konsolenwarnung aus.
Beim Vergrößern entstehen leere Optionen ohne Text und ohne value-Attribut. Für sinnvolle Einträge besser select.add(new Option(text, value)) verwenden.
length zählt nur <option>-Elemente, keine <optgroup>- oder <hr>-Elemente.
Beim Durchlaufen und gleichzeitigen Entfernen von Optionen per Index rückwärts zählen. Die Sammlung ist live, deshalb verschieben sich die Indizes sonst.
Die Eigenschaft wird in allen Browsern seit Langem unterstützt, einschließlich älterer Versionen.

Siehe auch

HTMLSelectElement.labels HTMLSelectElement.name HTMLSelectElement.form HTMLSelectElement.size HTMLSelectElement.type