Cómo seccionar una lista de opciones

html select option input

Cuando utilizamos listas desplegables con <select> podemos usar la etiqueta <optgroup> para seccionar la lista mostrada.

En este ejemplo creamos una lista de diversas mascotas, seccionadas por razas:

<select>
  <option>Selecciona una opción</option>
  <optgroup label="Perros">
    <option value="labrador-retriever">Labrador Retriever</option>
    <option value="golden-retriever">Golden Retriever</option>
    <option value="chihuahua">Chihuahua</option>
  </optgroup>
  <optgroup label="Gatos">
    <option value="siames">Siamés</option>
    <option value="persa">Persa</option>
    <option value="british-shorthair">British Shorthair</option>
  </optgroup>
  <optgroup label="Peces">
    <option value="goldfish">Goldfish</option>
    <option value="betta">Betta</option>
    <option value="guppy">Guppy</option>
  </optgroup>
</select>
Visualización
INFO

Recordemos que es importante colocar el atributo value para conseguir un valor real al momento de manipular con JavaScript.

Comentarios