Grouping Menu Items

optgroup element. Along with optgroup, you also use the label attribute in both the optgroup opening tag and each individual item within that group (see Example 5-15).

Example 5-15. Using optgroup to group options in a form menu

<select name="regions" size="14">
<optgroup label="Western Region">
<option value="Arizona" label="Arizona">Arizona</option>
<option value="California" label="California">California</option>
<option value="Colorado" label="Colorado">Colorado</option>
<option value="Nevada" label="Nevada">Nevada</option>
<option value="Texas" label="Texas">Texas</option>
<option value="Utah" label="Utah">Utah</option>
</optgroup>
<optgroup label="Eastern Region">
<option value="Connecticut" label="Connecticut">Connecticut</option>
<option value="Maine" label="Maine">Maine</option>
<option value="New_Hampshire" label="New Hampshire">New Hampshire</option>
<option value="New_Jersey" label="New Jersey">New Jersey</option>
<option value="New_York" label="New York">New York</option>
<option value="Vermont" label="Vermont">Vermont</option>
</optgroup>
</select>

Figure 5-16 shows the results.