<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.

In anpassbaren <select>-Elementen ist das <legend>-Element als Kind von <optgroup> erlaubt, um ein Label bereitzustellen, das leicht anvisierbar und stilisierbar ist. Dies ersetzt jeden im label-Attribut des <optgroup>-Elements gesetzten Text und besitzt 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 umfasst die globalen Attribute.

disabled

Wenn dieses Boolesche Attribut gesetzt ist, ist keines der Elemente in dieser Optionsgruppe auswählbar. Oftmals blenden Browser solche Steuerelemente aus und sie erhalten keine Browsereignisse, wie Mausklicks oder fokussierte Ereignisse.

label

Der Name der Optionsgruppe, den der Browser verwenden kann, wenn er die Optionen in der Benutzeroberfläche beschriftet. 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. In anpassbaren select-Elementen ist ein <legend>-Element als Kind von <optgroup> erlaubt.
Tag-Auslassung Der Start-Tag ist obligatorisch. Der End-Tag ist optional, wenn dieses Element unmittelbar von einem anderen <optgroup>-Element gefolgt wird, oder wenn das Eltern-Element 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