HTMLOptGroupElement.label — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOptGroupElement.label

Beschreibung

Die Eigenschaft label des Interfaces HTMLOptGroupElement ist ein String und spiegelt das HTML-Attribut label eines <optgroup>-Elements wider. Der Browser zeigt diesen Text in einer Auswahlliste (<select>) als nicht auswählbare Überschrift über den zugehörigen <option>-Einträgen an.

Wenn du label liest, bekommst du den aktuellen Attributwert. Schreibst du die Eigenschaft, wird das Attribut sofort geändert und die Darstellung aktualisiert. Fehlt das Attribut, liefert die Eigenschaft einen leeren String "" und nicht null.

Typische Einsatzfälle sind dynamisch erzeugte Auswahllisten, zum Beispiel Produkte nach Kategorie, Städte nach Land oder Zeitzonen nach Kontinent. Die Eigenschaft hilft außerdem dabei, die Gruppe einer ausgewählten Option zu ermitteln, etwa über option.parentElement.label.

Nach der HTML-Spezifikation ist das Attribut label bei <optgroup> Pflicht. Ohne das Attribut zeigen Browser eine leere Gruppenüberschrift an.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs label, oder "", wenn das Attribut fehlt. Beim Schreiben wird der zugewiesene Wert in einen String umgewandelt und als Attribut gesetzt.

Beispiele

Gruppentitel auslesen

// HTML:
// <select id="auto">
//   <optgroup label="Deutsche Hersteller">
//     <option>VW</option><option>BMW</option>
//   </optgroup>
//   <optgroup label="Japanische Hersteller">
//     <option>Toyota</option>
//   </optgroup>
// </select>

const gruppen = document.querySelectorAll('#auto optgroup');
gruppen.forEach((g) => console.log(g.label));

Deutsche Hersteller Japanische Hersteller

Auswahlliste dynamisch mit Gruppen aufbauen

const daten = {
  Europa: ['Berlin', 'Paris', 'Rom'],
  Asien: ['Tokio', 'Seoul']
};

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

for (const [kontinent, staedte] of Object.entries(daten)) {
  const gruppe = document.createElement('optgroup');
  gruppe.label = kontinent; // setzt das Attribut label
  staedte.forEach((stadt) => gruppe.append(new Option(stadt, stadt.toLowerCase())));
  select.append(gruppe);
}

document.body.append(select);
console.log(select.querySelector('optgroup').outerHTML.slice(0, 26));

Gruppe der gewählten Option ermitteln

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

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

BMW gehört zu: Deutsche Hersteller

Label nachträglich ändern, zum Beispiel mit Anzahl

document.querySelectorAll('optgroup').forEach((g) => {
  const anzahl = g.querySelectorAll('option').length;
  g.label = `${g.label} (${anzahl})`;
});

console.log(document.querySelector('optgroup').label);

Deutsche Hersteller (2)

// Wichtig · Fallstricke

Leerer String statt null: Fehlt das Attribut, gibt label den Wert "" zurück. Wenn du wissen willst, ob das Attribut wirklich vorhanden ist, prüfe mit hasAttribute('label').
Nicht mit HTMLOptionElement.label verwechseln: Bei <option> weicht die Eigenschaft auf den Textinhalt aus, wenn das Attribut fehlt. Bei <optgroup> gibt es diesen Rückfall nicht.
Nur reiner Text: Der Wert wird als Text dargestellt und nicht als HTML ausgewertet. Deshalb besteht hier kein XSS-Risiko. Markup wie <b> erscheint wörtlich in der Liste.
Keine Verschachtelung: <optgroup> darf nicht in einem anderen <optgroup> stehen. Für Hierarchien solltest du auf eigene Komponenten ausweichen.
Darstellung: Wie das Label aussieht (Schriftschnitt, Einrückung), bestimmt der Browser bzw. das Betriebssystem, und du kannst es mit CSS nur begrenzt anpassen. Bei <datalist> wird <optgroup> nicht unterstützt.
Kompatibilität: Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLMeterElement.labels HTMLOptGroupElement.disabled HTMLOptionElement.label HTMLOutputElement.labels HTMLTrackElement.label