Opciones de una SELECT agrupadas
Algo que no mucha gente suele conocer es que en una select de un HTML se pueden agrupar opciones. Algunos pensarán que esto es una tonterÃa y que es imposible no saberlo, pero conozco bastantes casos de gente que usa selects y que no se fija en toda su especificación, lo cual no me extraña, porque yo jamás he tenido que crear una select agrupada, y supongo que es porque la “opción” que agrupa no es seleccionable.
Para agrupar opciones se necesita la etiqueta optgroup, la cual encerrará las opciones que pertenecen al mismo grupo, y dispondrá de un atributo label que será el texto que aparecerá agrupando las opciones.
<select name="prueba">
<option value="1">Opción 1</option>
<optgroup label="Opción 2">
<option value="2.1">Opción 2.1</option>
<option value="2.2">Opción 2.2</option>
<option value="2.3">Opción 2.3</option>
</optgroup>
<option value="3">Opción 3</option>
<optgroup label="Opción 4">
<option value="4.1">Opción 2.1</option>
<option value="4.2">Opción 4.2</option>
</optgroup>
</select>A la hora de modificar los estilos de optgroup, hay que tener cuidado que algunos los heredarán las opciones que contenga, por ejemplo el color de la letra.