CSS, HTML UND JAVASCRIPT MIT {STIL}

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>

Screenshots

Internet Explorer 7	Firefox 3

optgroup Attribute und Events

Kernattribute	Ereignisse
class, dir, id, lang, style, title	onclick, ondblclick onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup