HTML Selection Menu Controls Option Groups
Example
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 <optgroup> element.
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.
