You can neatly group your options within a selection menu in order to provide a more structured layout in a long list of options by using the
The syntax is very basic, by simply using the element with a
label attribute to identify the title for the group, and containing zero or more options that should be within that group.
<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>
When using option groups, not all options need to be contained within a group. As well, disabling an option group will disable all options within the group, and it is not possible to manually re-enable a single option within a disabled group.