Stil mit {stil}

Jan 2009

HTML-Tag optgroup – Optionen in Select-Listen gruppieren

Das <optgroup>-Tag gruppiert verwandte Einträge innerhalb einer Select-Liste und erzeugt so eine hierarchische Struktur, die bei langen Listen für eine bessere Übersicht sorgt.

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.

Mit dem OPTGROUP-Element läßt sich nur eine Ebene einziehen. Eine tiefer gehende 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: optgroup in einer Auswahl mit select

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

Screenshots

Internet Explorer 7	Firefox 3

HTML-Attribute und Ereignisse für optgroup

Zum Seitenanfang