Mostrar contenido en jerarquía en un Select
Mostrar bien los datos en los formularios, es importante. En los desplegables, donde los usuarios deben escoger una opción, es indispensable. Veamos cómo mostramos contenido en jerarquía en un select.
Los selects a los que estamos acostumbrados son los desplegables en los que se listan las opciones, y punto. Lo que vamos a ver es la etiqueta y el código que nos permite mostrar el contenido en jerarquía en un select. Una imagen vale más que mil palabras:
Podéis ver un selector y en el desplegable dos secciones diferenciables: Premier League y La Liga. Debajo de estas opciones (que no son seleccionables), cuelgan las opciones que si pueden escogerse.
Una manera ideal para mostrar de forma correcta tus datos a los usuarios.
El código
Fijaos que la clave está en la etiqueta OPTGROUP con su label. Esto creará na jerarquí a la hora de mostrar el desplegable. No afecta nada al formulario. Deberá tratarse igual cuando se reciban los datos.
<label for="Teams">Select Team</label>
<select name="Teams" id="Teams">
<optgroup label="Premier League ">
<option value="Arsenal">Arsenal</option>
<option value="Manchester United">Manchester United</option>
<option value="Manchester City">Manchester City</option>
</optgroup>
<optgroup label="La Liga">
<option value="FC Barcelona">FC Barcelona</option>
<option value="Real Madrid">Real Madrid</option>
</optgroup>
</select>El código en marcha
See the Pen HTML5 – Rendering hierarchy slect by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Estad atentos que iremos añadiendo más tutoriales de programación web que esperamos que sean de utilidad y que os faciliten el día a día en vuestra programación.
Más información