| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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. Note that it is not possible to nest several
optgroup elements inside a parent
optgroup. The optgroup may be used
with simple drop-down lists (as in a select with a
size of "1" or with no
size specified, which would render as shown in the
example) and with list boxes (select elements with a
size greater than
"1").
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>
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
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- label
identifies the contents of the optgroup
User-contributed notes
- ID:
- #4
- Date:
- Mon, 12 Oct 2009 15:40:34 GMT
When scripting optgroup styling in IE (6,7,8) be very careful. I had to change the color of the optgroup, and had to resort to also change the color of the select itself, or the optgroup would not redraw itself.
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.