Auswahllisten unterteilen

Mit Hilfe eines HTML Tags kannst du kurzum wunderbar leicht Auswahllisten unterteilen. Durch den Einsatz von Zwischenüberschriften lässt sich daher die Übersichtlichkeit erhöhen. Das fördert schließlich die Lesbarkeit bei längeren Menüs.

In diesem Artikel zeige ich dir daher, wie das funktioniert.

Der dazu benötigte HTML Tag ist der optgroup-Tag. Der Einsatz ist denkbar einfach und bietet dabei in längeren Auswahllisten einen echten Mehrwert. Der optgroup-Tag erhöht dabei die Übersichtlichkeit in langen Auswahllisten entscheidend.

Auswahllisten unterteilen mit HTML

Das nun folgende Beispiel zeigt dabei, wie die Unterteilung einer Auswahlliste dabei aussehen könnte. Zur Veranschaulichung wurden in diesem Beispiel Kontinente und dazugehörige Länder gewählt.



Live Beispiel:


Der HTML Code zu dem eben gezeigten Beispiel schaut wie folgt aus:


Beispiel:

<form>
 <select name="Auswahl-Land">
  <optgroup label="Europa">
   <option value="Belgien">Belgien</option>
   <option value="Deutschland">Deutschland</option>
   <option value="Frankreich">Frankreich</option>
  </optgroup>
  <optgroup label="Asien">
   <option value="China">China</option>
   <option value="Indien">Indien</option>
   <option value="Japan">Japan</option>
  </optgroup>
  <optgroup label="Amerika">
   <option value="Kanada">Kanada</option>
   <option value="Mexico">Mexico</option>
   <option value="USA">Vereinigte Staaten von Amerika</option>
  </optgroup>
 </select>
</form>

Erklärung:

Wie du siehst, erzeugt das optgroup-Tag eine entsprechende Zwischenüberschrift in der Auswahlliste. Mit der Option label kannst du diese Überschrift benennen. Dir stehen übrigens alle Möglichkeiten offen, mit CSS das optgroup-Tag zu gestalten. Natürlich auch die komplette Liste an sich.

Stelle dir nun das ganze einmal mit einer Liste aller Länder der Welt vor. Es wird deutlich, dass es durchaus sinnvoll ist, lange Auswahllisten zu unterteilen.

Weitere Möglichkeiten

HTML und CSS bieten aber noch viele weitere Möglichkeiten, Listen zu erstellen und zu gestalten. Wenn du möchtest, kannst du dir daher den Artikel „Listen in HTML erstellen und gestalten“ ansehen. Dieser Artikel enthält weitere Tipps, was du mit Listen anstellen kannst.

Mit JavaScript ist es übrigens darüber hinaus auch möglich, bestimmte Werte in einer Auswahlliste zu suchen. Dies macht – insbesondere bei langen Listen – durchaus Sinn und erleichtert deren Nutzung.