		Site Navigation
	Home
	Products
	Tags
	Levels
	Dates
	Authors

		5 MOST RECENT
	Click to view Braintrove article: Locate the Design Checker Task Pane in InfoPath 2010 Written by Gregory Scot Collins Monday, 23 August 2010, 7:36 AM Products: InfoPath and Office InfoPath 2010 moved the location to access the Design Checker task pane. Learn how to access it in its new home. Locate the Design Checker Task Pane in InfoPath 2010
	Click to view Braintrove article: Locate Conditional Formatting and Custom Validation in InfoPath 2010 Written by Gregory Scot Collins Wednesday, 30 June 2010, 4:03 PM Products: InfoPath and Office InfoPath 2010 moved and changed accessibility for a number of features. Some of the most common of these are conditional formatting and custom data validation. Learn how to access them in their new home. Locate Conditional Formatting and Custom Validation in InfoPath 2010
	Click to view Braintrove article: Conditionally Display Different Values In a Single Expression Box Written by Gregory Scot Collins Saturday, 20 March 2010, 8:24 PM Products: InfoPath and Office Using a special little-known XPath expression you can display multiple values in a single expression box rather than in multiple expression boxes with conditional formatting. Conditionally Display Different Values In a Single Expression Box
	Click to view Braintrove article: Create a Button With a Blank Label Written by Gregory Scot Collins Saturday, 20 March 2010, 7:04 PM Products: InfoPath and Office InfoPath 2007 no longer allows you to have a blank label for buttons?useful for creating picture buttons. Discover this easy way to work around this issue. Create a Button With a Blank Label
	Click to view Braintrove article: Create Shared Rules Written by Gregory Scot Collins Monday, 15 March 2010, 12:41 PM Products: InfoPath and Office Avoid the maintenance nightmare of having multiple controls with the same set of rules with this simple trick that allows you to share rules between controls. Create Shared Rules

		5 MOST POPULAR
	Click to view Braintrove article: Access a Method in a Master Page with Code-Behind Written by Gregory Scot Collins Friday, 16 June 2006, 7:09 AM Product: ASP.NET Write code for pages with code-behind to access a method in an immediate or parent master page from a content page. Access a Method in a Master Page with Code-Behind
	Click to view Braintrove article: Pass Query String Parameters to an ASP.NET Xml Control Written by Gregory Scot Collins Friday, 19 May 2006, 5:19 PM Product: ASP.NET Use the Page_Load method of your ASPX page to attach a list of parameters to your asp:Xml control that will be passed through to your XSL transform. Pass Query String Parameters to an ASP.NET Xml Control
	Click to view Braintrove article: Prevent Namespace Prefixes from Being Copied to the Output Written by Gregory Scot Collins Monday, 1 May 2006, 7:18 AM Products: HTML, JavaScript, XML, XPath and XSLT The extra namespace prefixes required to transform XML are not always desirable on the output. This article describes a technique for excluding specific namespace prefixes from the output. Prevent Namespace Prefixes from Being Copied to the Output
	Click to view Braintrove article: Create Groups in a Drop-Down List Box Written by Gregory Scot Collins Saturday, 17 June 2006, 5:57 AM Products: CSS, FireFox, HTML and Internet Explorer Create grouped option-sets in your drop-down list boxes, each with its own non-selectable header. Create Groups in a Drop-Down List Box
	Click to view Braintrove article: Configure IIS 7 for Custom Error Pages Written by Gregory Scot Collins Tuesday, 31 July 2007, 9:32 PM Product: Internet Information Services Viewing custom error pages on your local computer requires configuring IIS to know about your error page. In IIS 7 you must also configure it to return custom error pages locally. Configure IIS 7 for Custom Error Pages

		5 MOST FORGOTTEN
	Click to view Braintrove article: Install Windows 7 Beta onto a Virtual Machine Written by Gregory Scot Collins Wednesday, 25 February 2009, 9:52 AM Products: Virtual Server and Windows Walk through the simple process of installing Microsoft Windows 7 Beta onto a virtual machine with screenshots for every step in the process. Install Windows 7 Beta onto a Virtual Machine
	Click to view Braintrove article: Group Dates by Year, Month and Day Written by Gregory Scot Collins Thursday, 17 August 2006, 1:35 AM Products: CSS, HTML, XML, XPath and XSLT Group lists of date-oriented items, such as calendar events or birthdays, by year, month and day. Group Dates by Year, Month and Day
	Click to view Braintrove article: Configure Lab Color Mode Defaults for Braintrove Articles Written by Gregory Scot Collins Wednesday, 30 April 2008, 10:36 PM Product: Photoshop Make the appropriate changes in a couple of dialog boxes in order to complete the tasks of Braintrove articles involving the Photohshop Lab Color mode. Configure Lab Color Mode Defaults for Braintrove Articles
	Click to view Braintrove article: Create a Monochromatic Dream Text Effect Using Styles Written by Gregory Scot Collins Saturday, 11 March 2006, 1:45 PM Product: Photoshop Create a monochromatic dream text effect using styles. Create a Monochromatic Dream Text Effect Using Styles
	Click to view Braintrove article: Combine Multiple Sums Into a Single Function Written by Gregory Scot Collins Tuesday, 22 January 2008, 5:07 AM Products: Excel and Office Write shorter, more concise and readable function statements by harnessing the power of ranges and multiple arguments. Combine Multiple Sums Into a Single Function

		Books
	HTML and XML for Beginners
	Learning Web Design : A Beginner's Guide to HTML, Graphics, and Beyond
	Weaving a Website: Programming in HTML, Java Script, Perl and Java
	HTML: Your visual blueprint for designing effective Web pages
	Sams Teach Yourself Web Publishing with HTML & XHTML in 21 Days

		Magazines
	Inside Web Development
	Inside Web Design
	Practical Web Design
	Soa Web Services Journal
	Net Developers Journal

		Microsoft MVP

This article has been viewed 10990 times.

Create Groups in a Drop-Down List Box

Page 1 of 2

Written by Gregory Scot Collins

Saturday, 17 June 2006, 5:57 AM

This article has been tested to work with the following products and versions. No guarantee of compatibility, with or without modification, is offered for products or versions other than those listed.

Internet Explorer 7.0 and 6.0 (Microsoft)
FireFox 2.0 and 1.5 (Mozilla)
CSS 2.0 and 1.0 (W3C)
HTML 4.01 (W3C)

IN THIS ARTICLE:

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.

CONTINUED: Use styles to change the look of your option groups

1 | 2 | Next >

		Bookmark this Article
	Stumble It!
	Digg It!
	del.icio.us

		Resources
	W3C HTML 4.01 Specification: OPTGROUP
	MSDN HMLT and DHTML Reference: OPTGROUP

		List of Figures
	Listing 1 - The optgroup element allows you to grouping options.
	Screenshot 1 - Grouped options as rendered in Internet Explorer 6 and Firefox 1.5.
	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.

		Article Tags
	CSS Disabled Drop-Down Lists FireFox HTML Internet Explorer Label OptGroup Option Select Style Sheets

		Great Deals
	TigerDirect Exclusive Deals, Limited Time Offers, Act Now And Save!
	Find all current special offers on Adobe products.

Copyright © 2006-2010 Braintrove. All rights reserved. Braintrove, braintrove.com, and the Braintrove logo are trademarks of Gregory Scot Collins in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Any rights not expressly granted herein are reserved.