Cómo seccionar una lista de opciones

Generated avatar
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

Compartir

Esta artículo aparece en estas rutas de aprendizaje

Web Dev (Frontend)

Aprendamos HTML, CSS y JS para navegador

Generated avatar
En construcción