<optgroup>: Das Option Group-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.

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 umfasst die globalen Attribute.

disabled

Wenn dieses Boolean-Attribut gesetzt ist, ist keines der Elemente in dieser Optionsgruppe auswählbar. Oftmals werden solche Steuerelemente von den Browsern ausgegraut und erhalten keine Browser-Ereignisse wie Mausklicks oder Fokus-bezogene Ereignisse.

label

Der Name der Optionsgruppe, den der Browser bei der Beschriftung der Optionen in der Benutzeroberfläche verwenden kann. Dieses Attribut ist obligatorisch, 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.
Tag-Auslassung Das Start-Tag ist obligatorisch. 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.
Implizierte 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