HTMLSelectElement.namedItem() — Methode · JavaScript-Referenz

Signatur

HTMLSelectElement.prototype.namedItem(name)

Beschreibung

Mit namedItem() greifen Sie gezielt über einen Bezeichner auf eine Option eines <select>-Elements zu, statt über ihren Index. Durchsucht werden alle Optionen des Auswahlfelds, auch solche innerhalb von <optgroup>. Zurückgegeben wird die erste Option in Dokumentreihenfolge, deren id-Attribut oder (veraltetes) name-Attribut exakt dem Suchwert entspricht.

Die Methode ist praktisch, wenn Optionen feste, sprechende IDs haben, etwa um eine bestimmte Option vorzuwählen, zu deaktivieren oder auszublenden, ohne sich auf ihre Position zu verlassen. Sie entspricht dem Aufruf select.options.namedItem(name) auf der zugehörigen HTMLOptionsCollection.

Wichtig: Gesucht wird nicht nach dem value-Attribut oder dem sichtbaren Text der Option. Um eine Option über ihren Wert zu finden, verwenden Sie z. B. select.querySelector('option[value="…"]') oder setzen einfach select.value.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string		Der gesuchte Bezeichner, der mit dem `id`- oder `name`-Attribut einer Option verglichen wird. Der Vergleich unterscheidet Groß- und Kleinschreibung. Nicht-String-Werte werden in einen String umgewandelt.

Rückgabewert

Typ

HTMLOptionElement | null

Beschreibung

Die erste passende HTMLOptionElement-Instanz oder null, wenn keine Option mit dieser id bzw. diesem name existiert.

Beispiele

Option über ihre ID abrufen

// HTML:
// <select id="land">
//   <option id="opt-de" value="DE">Deutschland</option>
//   <option id="opt-at" value="AT">Österreich</option>
//   <option id="opt-ch" value="CH">Schweiz</option>
// </select>

const select = document.getElementById('land');
const option = select.namedItem('opt-at');

console.log(option.value, option.textContent);
console.log(select.namedItem('opt-fr'));

AT Österreich null

Bestimmte Option vorwählen und deaktivieren

const select = document.getElementById('versand');

const setOption = (id, { selected = false, disabled = false } = {}) => {
  const opt = select.namedItem(id);
  if (!opt) {
    console.warn(`Option "${id}" nicht gefunden`);
    return;
  }
  opt.selected = selected;
  opt.disabled = disabled;
};

// Expressversand ist heute nicht verfügbar, Standard vorwählen
setOption('versand-express', { disabled: true });
setOption('versand-standard', { selected: true });

console.log(select.value);

standard

Vergleich: namedItem() vs. Suche nach value

// <select id="groesse">
//   <option id="g-m" value="M">Medium</option>
// </select>
const select = document.getElementById('groesse');

console.log(select.namedItem('M'));            // sucht id/name, nicht value
console.log(select.namedItem('g-m').value);
console.log(select.querySelector('option[value="M"]').id);

null M g-m

// Wichtig · Fallstricke

Kein Suchen nach value oder Text: Häufiger Fehler. namedItem() vergleicht nur mit id und name.
Gibt es mehrere Treffer (z. B. doppelte IDs, was ungültiges HTML ist), wird nur der erste zurückgegeben.
Das name-Attribut auf <option> ist kein gültiges HTML5 mehr. Verwenden Sie stattdessen id.
Der Rückgabewert kann null sein. Prüfen Sie ihn vor dem Zugriff, oder nutzen Sie optionale Verkettung (select.namedItem('x')?.value).
Der Vergleich unterscheidet Groß- und Kleinschreibung.
Die Methode wird in allen modernen Browsern seit Langem unterstützt. Bei der Suche per ID im ganzen Dokument ist document.getElementById() die übliche Alternative, namedItem() beschränkt die Suche aber auf das jeweilige Auswahlfeld.

Siehe auch

HTMLAllCollection.namedItem() HTMLSelectElement.item() HTMLSelectElement.add() HTMLSelectElement.remove() HTMLSelectElement.showPicker()