There is in fact a third tag that can be used with selection lists. The optgroup tag can be optionally placed around groups of options in order to divide the list up into manageable groups. The optgroup tags add extra labels into the list that define the relationship between the options within that particular group and therefore assist your visitors in finding the desired option from within a longer list since they can first locate the group that they expect the option to be in. The optgroup entries are not able to be selected and are merely a way of dividing up a selection list into manageable sections.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<h1>Selection Lists with Optgroups</h1>
<form action="#">
lt;select name="sel1" size="1">
<option value=" " selected="selected"> </option>
&<optgroup label="group one">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<optgroup label="group two">

<option value="1a">First</option>
<option value="2a">Second</option>
<option value="3a">Third</option>

Here's what the Selection List with Optgroups page looks like in your web browser.

The first entry in the list is the default blank entry that we are using to indicate that nothing has been selected yet. This entry is not contained within a group. The remaining six entries in the list are divided up into two groups each of which is contained within an optgroup. The mandatory label attribute supplies the text that will be displayed in the selection list to describe the group. These entries in the selection list will be highlighted in such a way as to indicate that they are headings for the following entries in the list.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow