select Archives - Sentido Web

Javascript

Select Box Factory: combos con diseño y funcionalidades

ByLuis September 9, 2008

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

Usa divs en vez de options
Añade funcionalidades al desplegable
Los contenedores pueden contener lo que necesitemos
Las opciones pueden estar activas o inactivas
Los estilos se pueden modificar con facilidad
Distintos tipos de combos
Filtros

Select Box Factory

XHTML

Opciones de una SELECT agrupadas

ByLuis November 20, 2006

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.

Ejemplo