<optgroup> HTML-Optionsgruppen-Element
Baseline
Weitgehend verfügbar
*
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.
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 leicht zu zielendes und zu stylendes Label bereitzustellen. Dies ersetzt jeden Text, der im label-Attribut des <optgroup>-Elements gesetzt wurde, 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 enthält die globalen Attribute.
disabled-
Wenn dieses Boolean-Attribut gesetzt ist, ist keines der Elemente in dieser Optionsgruppe auswählbar. Oft deaktivieren Browser solche Steuerelemente visuell, und sie erhalten keine Browsing-Ereignisse wie Mausklicks oder fokusbezogene Ereignisse.
label-
Der Name der Optionsgruppe, den der Browser bei der Kennzeichnung der Optionen in der Benutzeroberfläche verwenden kann. Dieses Attribut ist obligatorisch, wenn dieses Element verwendet wird.
Beispiele
<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. |
|---|---|
| Erlaubte Inhalte | 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 übergeordnete Element 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
| Spezifikation |
|---|
| HTML # the-optgroup-element |
Browser-Kompatibilität
Siehe auch
- Andere formularbezogene Elemente:
<form>,<legend>,<label>,<button>,<select>,<datalist>,<option>,<fieldset>,<textarea>,<input>,<output>,<progress>und<meter>. - Anpassbare Select-Elemente