HTML Grupos opcionales


Ejemplo

Puede agrupar cuidadosamente sus opciones dentro de un menú de selección para proporcionar un diseño más estructurado en una larga lista de opciones utilizando el elemento <optgroup> .

La sintaxis es muy básica, simplemente usando el elemento con un atributo de label para identificar el título para el grupo, y que contiene cero o más opciones que deberían estar dentro de ese grupo.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Cuando se usan grupos de opciones, no todas las opciones deben estar contenidas dentro de un grupo. Además, deshabilitar un grupo de opciones deshabilitará todas las opciones dentro del grupo, y no es posible volver a habilitar manualmente una sola opción dentro de un grupo deshabilitado.