Auswahl-Liste (select) mit multiple (Mehrfach-Auswahl), optgroup, und option

Beispiel 1

Normal

Wert 1 Wert 2 Wert 3 Wert A Wert B Wert B

Quellcode

  <select name="auswahl_1">
   <optgroup label="Gruppe 1">
    <option value="1">Wert 1</option>
    <option value="2">Wert 2</option>
    <option value="3">Wert 3</option>
   </optgroup>
   <optgroup label="Gruppe 2">
    <option value="a">Wert A</option>
    <option selected="selected" value="b">Wert B</option>
    <option value="c">Wert B</option>
   </optgroup>
  </select  

Beispiel 2

Multiple

Wert 1 Wert 2 Wert 3 Wert A Wert B Wert B

Quellcode

  <select class="multiple" name="auswahl_2" multiple="multiple">
   <optgroup label="Gruppe 1">
    <option value="1">Wert 1</option>
    <option selected="selected" value="2">Wert 2</option>
    <option value="3">Wert 3</option>
   </optgroup>
   <optgroup label="Gruppe 2">
    <option selected="selected" value="a">Wert A</option>
    <option value="b">Wert B</option>
    <option selected="selected" value="c">Wert B</option>
   </optgroup>
  </select  

Stylesheet

  /* Select allgemein */
  select {width:auto;}
  
  /* Select mit Mehrfachauswahl, über Klasse multiple */
  select.multiple {width:200px;}  

Erläuterungen

select

Auswahl-Liste in zwei Varianten. Standard ist die ausklappbare Liste, eine weitere Möglichkeit bietet die Mehrfachauswahl multiple="multiple" bei gedrückter Strg- bzw. Apfel-Taste.

optgroup

Bietet die Möglichkeit Werte zu gruppieren. Benennung erfolgt mittels label-Tag.

option

Wählbarer Wert. Mittels selected="selected" können Werte vorgewählt werden.

• www.ploehr.de