optgroup (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Example
In this
select list, food types are grouped together with
optgroup elements:
<form>
<select name="favoritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
<option>Beans</option>
<option>Onions</option>
<option>Courgettes</option>
</optgroup>
⋮
</select>
</form>
Description
In
longer select lists, it may be
beneficial to subgroup related items in much the same way as you might
organize list content by nesting those lists. You effectively create a
series of categories, and items that fit into each category. The
optgroup element allows you to do this in
select lists, helping to visually clarify the
organization of list items, although browsers use a range of different
visual styles to indicate related groups of options, as Figure 1 shows.
Note that optgroup is only used to
identify related items visually. It contains no useful data, nor can users
click on an option group as they could an individual
option.
Use This For …
This element is used to group related items as a means to enhance the clarity of information presented to the user.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
User-contributed notes
- ID:
- #2
- Date:
- Thu, 05 Jun 2008 12:02:07 GMT
I was considering nesting option groups in order to create a multi-level hierarchy in my select list, decided to read the W3C HTML 4.01 standard just to check this was permissible, but believe its not.
Not sure its clear from the description that for valid mark-up this can only provide a single sub-level.
If you do attempt it, a quick test I just ran in IE7 and FF2 shows that they will close any outer optgroups before starting a new one - essentially reverting to the standard.
Hope its all helpful.
- ID:
- #1
- Date:
- Fri, 28 Mar 2008 11:33:39 GMT
Option groups may be more useful in list boxes (SELECT elements with SIZE>1) than in drop-down lists (SELECT element with SIZE=1).
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
