Jan 2009

HTML option und optgroup • Optionen einer Select-Liste

option fügt Elemente in ein Pulldown- oder Klappmenü ein, das mit einem select-Tag definiert wird. Innerhalbe des select-Tags dürfen beliebig viele option-Tags eingefügt werden.

optgroup gruppiert verwandte Optionen einer Select-Liste in einem HTML-Formular und erzeugt eine hierarchische Struktur. Die Struktur sorgt in langen Select-Listen für eine bessere Übersicht.

Wenn ein Element aus der Liste gewählt wird, wird per Vorgabe der Wert zum Inhalt des Formulars hinzugefügt, der direkt nach dem öffnenden option-Tag steht. Durch das value-Attribut kann aber auch ein anderer beliebiger Wert angegeben werden.

Die einzelnen Elemente können nur über das option-Tag eingefügt werden. Sowohl das optgroup- als auch das option-Tag müssen innerhalb der öffnenden und schließenden Klammern des select-Tags stehen.

Die Reihenfolge der option-Tags bestimmt die Reihenfolge in der Liste. Das selected-Attribut kann allerdings dazu benutzt werden, ein Element anzugeben, das stets als erstes in der Liste angezeigt wird.

Die Optionen einer Selectliste wollten wie ein Menü behandelt werden: Der Text für jeden Eintrag sollte kurz sein, etwa ein bis zwei Worte.

Attribute für option

disabled
ist ein boolescher Wert. Wenn das Attribut vorhanden ist, deaktiviert es die Option des select-Elements. Einige Browser rendern die Option dann ausgegraut.
label
erzeugt eine Kurzfassung des Textes, der nach dem öffnenden <option>-Tag steht.
selected
gibt an, welcher Eintrag des Klappmenüs ganz oben in der Liste stehen soll. Einige Browser stellen das gewählte Element auch herausgehoben dar. Per Vorgabe werden die Elemente in der Liste in der gleichen Reihenfolge dargestellt, in der sie in den <option>-Tags aufgeführt sind, und kein Element wird hervorgehoben.
value
wird benutzt, um einen anderen Wert für das Element einzusetzen als den, der im <option>-Tag aufgeführt wird.

HTML optgroup

Mit optgroup läßt sich nur eine Ebene einziehen. Eine tiefere Verschachtelung ist nicht möglich.

Attribute für optgroup

disabled
boolescher Wert, der eine Gruppe von Einträgen außer Funktion setzt. Das Attribut wird von allen modernen Browsern unterstützt, von IE aber erst ab Version 8.
label
erzeugt eine kurze Beschreibung.

Beispiel: option-Tags in einer Selectliste

<select name="select">
   <optgroup label="Italienische Gerichte">
      <option> Pizza </option>
      <option> Tortelloni </option>
      <option> Bifsteca </option>
      </optgroup>
   <optgroup label="Deutsche Gerichte">
      <option> Pfannkuchen </option>
      <option> Tafelspitz </option>
      <option> Fischstäbchen </option>
   </optgroup>
   <optgroup label="Süssigkeiten" disabled="disabled">
      <option> Schokoriegel </option>
      <option> Sahneeis </option>
      <option> Kaugummi </option>
      <option> Pfefferminz </option>
   </optgroup>
</select>
Optionen in einer Auswahlliste mit select

Screenshots

Darstellung von optgroup in IE7 Darstellung von optgroup in Firefox 2
Internet Explorer 7 Firefox 3

optgroup Attribute und Events

KernattributeEreignisse
class, dir, id, lang, style, title