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

In diesem Artikel

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

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 Erlaubte Inhalte Tag-Auslassung Erlaubte Eltern Implizite ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Keine.

Null oder mehr <option>-Elemente. In anpassbaren select-Elementen ist ein <legend>-Element als Kind von <optgroup> erlaubt.

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.

Ein <select>-Element.

group

Keine role erlaubt

[`HTMLOptGroupElement`](/de/docs/Web/API/HTMLOptGroupElement)

Andere formularbezogene Elemente: <form>, <legend>, <label>, <button>, <select>, <datalist>, <option>, <fieldset>, <textarea>, <input>, <output>, <progress> und <meter>.
Anpassbare Select-Elemente

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden