<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, kann keins der Elemente in dieser Optionsgruppe ausgewählt werden. Oft wird diese Steuerung in Browsern ausgegraut und erhält keine Browserevents, wie zum Beispiel Mausklicks oder Fokus-bezogene Ereignisse.

label

Der Name der Optionsgruppe, den der Browser zur 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 direkt 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

BCD tables only load in the browser

Siehe auch