Optgroup : Organiser ses menus déroulants

Peut-être avez-vous déjà rencontré la balise optgroup. Elle permet de grouper les éléments d’une liste déroulante afin d’y mettre un peu d’ordre et ainsi y voir plus clair.

Sans et avec optgoup

Techniquement, les lignes de code HTML correspondantes sont :

<select>
<optgroup label="Fruits">
<option>Pomme</option>
<option>Banane</option>
<option>Cerise</option>
</optgroup>
<optgroup label="Légumes">
<option>Salade</option>
<option>Carotte</option>
</optgroup>
</select>

Une balise méconnue mais qui au final rend bien des services côté ergonomie.