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.
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 may be used
with simple drop-down lists (as in a select with a
"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
select list, food types are grouped together with
<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.
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- 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.