HTMLSelectElement.item() — Methode · JavaScript-Referenz

Signatur

HTMLSelectElement.prototype.item(index)

Beschreibung

Die Methode item() liefert die Option an Position index aus der Optionsliste eines <select>-Elements. Die Zählung beginnt bei 0 und folgt der Reihenfolge im Dokument. Optionen innerhalb von <optgroup>-Elementen werden mitgezählt, die Gruppen selbst nicht.

Das Ergebnis ist dasselbe wie bei select.options.item(index) oder dem Indexzugriff select[index] bzw. select.options[index]. Es gibt einen Unterschied: Bei einem ungültigen Index gibt item() null zurück, der Klammerzugriff dagegen undefined.

In der Praxis nutzt man item(), um eine Option an einer bekannten Position zu lesen, etwa die aktuell gewählte über selectedIndex, die erste Platzhalter-Option oder die letzte Option. Wer nach dem value oder der id einer Option sucht, nimmt besser namedItem() oder querySelector().

Parameter

Name	Typ	Default	Beschreibung
$index Pflicht	number		Nullbasierte Position der gewünschten Option. Der Wert wird in eine vorzeichenlose 32-Bit-Ganzzahl (`unsigned long`) umgewandelt. Negative Werte werden dabei zu sehr großen Zahlen und liefern deshalb `null`.

Rückgabewert

Typ

HTMLOptionElement | null

Beschreibung

Die Option an der angegebenen Position oder null, wenn der Index außerhalb der Liste liegt.

Beispiele

Aktuell gewählte Option auslesen

// HTML: <select id="land"><option value="de">Deutschland</option><option value="at" selected>Österreich</option><option value="ch">Schweiz</option></select>
const select = document.getElementById('land');
const gewaehlt = select.item(select.selectedIndex);
console.log(gewaehlt?.value, gewaehlt?.text);

at Österreich

Ungültiger Index: null statt undefined

const select = document.createElement('select');
select.add(new Option('Rot', 'red'));
select.add(new Option('Blau', 'blue'));

console.log(select.item(1).value); // "blue"
console.log(select.item(5));       // null
console.log(select[5]);            // undefined
console.log(select.item(-1));      // null

blue null undefined null

Alle Optionen durchlaufen, auch innerhalb von optgroup

// HTML: <select id="auto"><optgroup label="Deutsch"><option>VW</option><option>BMW</option></optgroup><optgroup label="Japanisch"><option>Toyota</option></optgroup></select>
const select = document.querySelector('#auto');
for (let i = 0; i < select.length; i++) {
  const opt = select.item(i);
  console.log(i, opt.text, opt.parentElement.label);
}

0 VW Deutsch 1 BMW Deutsch 2 Toyota Japanisch

Platzhalter-Option prüfen

const form = document.querySelector('form');
const select = form.querySelector('select[name="groesse"]');

form.addEventListener('submit', (event) => {
  // Die erste Option ist ein Platzhalter wie "Bitte wählen …"
  if (select.item(select.selectedIndex) === select.item(0)) {
    event.preventDefault();
    alert('Bitte eine Größe auswählen.');
  }
});

// Wichtig · Fallstricke

null und undefined: item() gibt bei ungültigem Index null zurück, select[i] dagegen undefined. Das spielt eine Rolle, wenn man strikt mit === vergleicht.
Kein Zugriff vom Ende her: Anders als Array.prototype.at() versteht item() keine negativen Indizes. item(-1) liefert null. Für die letzte Option schreibt man select.item(select.length - 1).
Keine Auswahl: Ist nichts gewählt, hat selectedIndex den Wert -1, und item(select.selectedIndex) gibt null zurück. Optional Chaining (?.) verwenden.
Liste ändert sich: Die Optionsliste ist live. Werden Optionen hinzugefügt oder entfernt, zeigen dieselben Indizes danach auf andere Elemente.
Kompatibilität: Wird von allen Browsern seit Langem unterstützt, auch vom alten Internet Explorer.

Siehe auch

HTMLSelectElement.namedItem() HTMLSelectElement.options HTMLSelectElement.selectedIndex HTMLSelectElement.length HTMLOptionsCollection HTMLOptionElement HTMLAllCollection.item()