<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 Kindelement von <optgroup> erlaubt, um ein leicht anzuzielendes und zu stylendes Label bereitzustellen. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements festgelegt ist, und hat die gleiche Semantik.

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 Boolean-Attribut gesetzt ist, kann keiner der Artikel in dieser Optionsgruppe ausgewählt werden. Häufig grauen Browser solche Steuerelemente aus, und sie erhalten keine Browsing-Ereignisse, wie Mausklicks oder Fokussierungsereignisse.

label

Der Name der Optionsgruppe, der vom Browser verwendet werden kann, um die Optionen in der Benutzeroberfläche zu beschriften. 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 Kindelement von <optgroup> erlaubt.
Tag-Auslassung Das Start-Tag ist obligatorisch. Das End-Tag ist optional, wenn dieses Element unmittelbar von einem anderen <optgroup>-Element oder keinem weiteren Inhalt des Elternelements gefolgt wird.
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