HTML : Option Groups/Sections

Mon, Apr 28, 2008

XHTML

Have you ever wanted/needed to create a select drop down menu with options divided into sub-sections or groups with labels? See the screenshot below.

You can easily achieve this with HTML by wrapping OPTION tags inside a SELECT tag with an OPTGROUP tag, each with a label attribute in order to create the group caption or label. See the sample code below.

<select name="test">
    <optgroup label="Group 01">
        <option>Option 01</option>
        <option>Option 02</option>
        <option>Option 03</option>
    </optgroup>
    <optgroup label="Group 02">
        <option>Option 04</option>
        <option>Option 05</option>
        <option>Option 06</option>
        <option>Option 07</option>
    </optgroup>
    <optgroup label="Group 03">
        <option>Option 08</option>
        <option>Option 09</option>
    </optgroup>
</select>
, , , , ,

This post was written by:

Antonie Potgieter - who has written 46 posts on Lost-In-Code.

I (Antonie Potgieter) am a software engineer/web developer located in South Africa. My full-time work is the management of Tribulant Software and the development of its software packages.

Contact the author

Leave a Reply