<optgroup>: Das Optionsgruppen-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <optgroup> HTML-Element erstellt eine Gruppierung von Optionen innerhalb eines <select>-Elements.

In anpassbaren <select>-Elementen ist das <legend>-Element als Kind von <optgroup> erlaubt, um ein einfach zu zielendes und zu stylendes Label bereitzustellen. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements gesetzt ist und hat die gleichen Semantiken.

Probieren Sie es aus

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

label {
  display: block;
  margin-bottom: 10px;
}

Hinweis: Optgroup-Elemente dürfen nicht verschachtelt werden.

Attribute

Dieses Element beinhaltet die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, ist keines der Elemente in dieser Optionsgruppe auswählbar. Oftmals blenden Browser solche Steuerungen aus und sie erhalten keine Browser-Ereignisse, wie Mausklicks oder Fokus-bezogene.

label

Der Name der Optionsgruppe, den der Browser verwenden kann, um die Optionen in der Benutzeroberfläche zu kennzeichnen. Dieses Attribut ist zwingend erforderlich, wenn dieses Element verwendet wird.

Beispiele

html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubter Inhalt Null oder mehr <option>-Elemente. In anpassbaren Select-Elementen ist ein <legend>-Element als Kind von <optgroup> erlaubt.
Tag-Auslassung Das Start-Tag ist erforderlich. Das End-Tag ist optional, wenn dieses Element unmittelbar von einem anderen <optgroup>-Element gefolgt wird oder wenn das Elternelement keinen weiteren Inhalt hat.
Erlaubte Eltern Ein <select>-Element.
Implizite ARIA-Rolle group
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLOptGroupElement`](/de/docs/Web/API/HTMLOptGroupElement)

Spezifikationen

Specification
HTML
# the-optgroup-element

Browser-Kompatibilität

Siehe auch