Create Groups in a Drop-Down List Box

Grouping items in a drop-down list box is easy with the optgroup element. The optgroup element is a child to the select element and has two attributes: label (required) and disabled (optional). The required label attribute specifies the text that will appear as a header to the contained group of options. Many browsers render the label text in bold italic. The optional disabled attribute is used to render the entire group of options non-selectable to the user. Options within an option group are indented. Listing 1 shows an example of how to use the optgroup element:
<html>
<body>
<select>
<optgroup label=”Numbers”>
<option value=”1″>One</option>
<option value=”2″>Two</option>
<option value=”3″>Three</option>
</optgroup>
<optgroup label=”Letters” disabled=”true”>
<option value=”4″>A</option>
<option value=”5″>B</option>
<option value=”6″>C</option>
</optgroup>
</select>
</body>
</html>
Listing 1. The optgroup element allows you to grouping options.

Screenshot 1. Grouped options as rendered in Internet Explorer 6 and Firefox 1.5.
In HTML 4.0, an optgroup element can only contain option elements. In other words, option groups cannot be nested. This may change in a future version of HTML.

Use styles to change the look of your option groups

You can modify the appearance of the option groups within your drop-down list box by using styles. If you specify properties for the optgroup selector within a cascading style sheet, all options within all option groups will render using those same properties. You can also specify properties for the option selector to have the options render differently than the option group, but again this affects all options.
The alternative is to specify the class or id attribute on the optgroup element, as shown in Listing 2, and then write styles for those attributes so that only specific option groups are affected.
<html>
<head>
<style>
optgroup {
font-family:Times New Roman;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:underline;
color:red;
background-color:lightyellow;
}
option {
font-size:14pt;
font-weight:bold;
font-style:italic;
text-decoration:line-through;
color:blue;
background-color:lightcyan;
}
#ShapesGroup {
font-family:Arial;
font-size:12pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
color:green;
background-color:pink;
}
.ColorsGroup {
font-family:Verdana;
font-size:14pt;
font-weight:bold;
font-style:normal;
text-decoration:overline;
color:cyan;
background-color:black;
}
.ColorsGroup option {
font-size:10pt;
text-decoration:none;
color:black;
background-color:white;
}
</style>
</head>
<body>
<select>
<optgroup label=”Numbers”>
<option value=”1″>One</option>
<option value=”2″>Two</option>
<option value=”3″>Three</option>
</optgroup>
<optgroup label=”Letters” disabled=”true”>
<option value=”4″>A</option>
<option value=”5″>B</option>
<option value=”6″>C</option>
</optgroup>
<optgroup label=”Shapes” id=”ShapesGroup”>
<option value=”7″>Circle</option>
<option value=”8″>Triange</option>
<option value=”9″>Square</option>
</optgroup>
<optgroup label=”Colors”>
<option value=”10″>Red</option>
<option value=”11″>Green</option>
<option value=”12″>Blue</option>
</optgroup>
</select>
</body>
</html>
Listing 2. The optgroup element allows you to grouping options.

Screenshot 2. Stylized grouped options as rendered in Internet Explorer 6 and Firefox 1.5.

Browser support

At the time this article was written, the optgroup element was not widely supported by all browsers. Browsers that do not support the optgroup element should ignore it, rendering your options in a single list. Those browsers that do support it will handle it in different ways.
For example, the disabled attribute works in as specified Mozilla Firefox 1.5 but is not supported in Microsoft Internet Explorer 6 (refer to Screenshot 1). In regards to CSS, Internet Explorer 6 ignores most style properties, while Firefox 1.5 correctly renders them (refer to Screenshot 2). There are other differences—and I have only mentioned two different browsers.
Advertisements
By Rz Rasel Posted in Html Tagged