HTMLOptGroupElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLOptGroupElement extends HTMLElement

Beschreibung

HTMLOptGroupElement ist die DOM-Schnittstelle für das HTML-Element <optgroup>. Sie erweitert HTMLElement um zwei eigene Eigenschaften: label (die sichtbare Gruppenüberschrift) und disabled (sperrt alle enthaltenen Optionen auf einmal).

Man nutzt sie, um lange Auswahllisten in einem <select> logisch zu gliedern – etwa Länder nach Kontinent oder Produkte nach Kategorie. Per JavaScript lassen sich Gruppen dynamisch erzeugen (document.createElement('optgroup')), beschriften, befüllen und gezielt deaktivieren, z. B. abhängig von Benutzerrechten oder Lagerbestand.

Wichtig: Die Gruppe selbst ist nicht auswählbar; sie erscheint im Dropdown nur als nicht anklickbare Überschrift. Die Optionen einer Gruppe tauchen trotzdem ganz normal in select.options auf, da diese Sammlung verschachtelte <option>-Elemente in <optgroup> mitzählt.

label (string) – spiegelt das HTML-Attribut label wider; Pflicht für eine sinnvolle Darstellung.
disabled (boolean) – spiegelt das Attribut disabled; ist es gesetzt, sind alle Kind-Optionen nicht wählbar.

Parameter

Name	Typ	Default	Beschreibung
$label Pflicht	string	""	Eigenschaft: Beschriftung der Gruppe, spiegelt das Attribut `label`.
$disabled	boolean	false	Eigenschaft: Deaktiviert alle `<option>`-Elemente der Gruppe, spiegelt das Attribut `disabled`.

Rückgabewert

Typ

HTMLOptGroupElement

Beschreibung

Instanzen entstehen über document.createElement('optgroup') oder durch Abfrage vorhandener <optgroup>-Elemente im DOM.

Beispiele

Gruppen dynamisch erzeugen und befüllen

const select = document.createElement('select');

const daten = {
  Obst: ['Apfel', 'Birne'],
  Gemüse: ['Karotte', 'Lauch']
};

for (const [kategorie, eintraege] of Object.entries(daten)) {
  const gruppe = document.createElement('optgroup');
  gruppe.label = kategorie;
  for (const name of eintraege) {
    gruppe.append(new Option(name, name.toLowerCase()));
  }
  select.append(gruppe);
}

document.body.append(select);
console.log(select.options.length);
console.log(select.querySelector('optgroup') instanceof HTMLOptGroupElement);

4 true

Eine Gruppe abhängig von Rechten deaktivieren

// HTML: <select id="aktion">
//   <optgroup label="Allgemein"><option>Ansehen</option></optgroup>
//   <optgroup label="Admin" id="admin"><option>Löschen</option></optgroup>
// </select>
const istAdmin = false;
const adminGruppe = document.getElementById('admin');

adminGruppe.disabled = !istAdmin;
console.log(adminGruppe.disabled, adminGruppe.hasAttribute('disabled'));

true true

Gruppe der gewählten Option ermitteln

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

select.addEventListener('change', () => {
  const option = select.selectedOptions[0];
  const gruppe = option.closest('optgroup');
  console.log(`${option.text} gehört zu: ${gruppe?.label ?? 'keiner Gruppe'}`);
});

Karotte gehört zu: Gemüse

// Wichtig · Fallstricke

<optgroup>-Elemente lassen sich laut HTML-Spezifikation nicht verschachteln; verschachtelte Gruppen werden vom Parser aufgelöst bzw. ignoriert.
Ohne label zeigen Browser eine leere Überschrift – das Attribut immer setzen.
Deaktivierte Optionen (auch über eine gesperrte Gruppe) werden beim Absenden des Formulars nicht übermittelt, falls sie per Skript ausgewählt waren – Werte serverseitig trotzdem prüfen.
Das Aussehen der Gruppenüberschrift lässt sich in nativen Dropdowns kaum per CSS gestalten; das neue anpassbare <select> (appearance: base-select) ist noch nicht in allen Browsern verfügbar.
Die Schnittstelle selbst wird von allen aktuellen Browsern seit Langem unterstützt.

Siehe auch

HTMLParagraphElement HTMLOptionElement HTMLOutputElement HTMLButtonElement HTMLMeterElement