		Site Navigation
	Home
	Products
	Tags
	Levels
	Dates
	Authors

		5 MOST RECENT
	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
	Click to view Braintrove article: Perform a Case-Insensitive String Comparison without Using Translate() Written by Gregory Scot Collins Thursday, 20 August 2009, 7:21 PM Products: InfoPath and Office Hidden in undocumented optional parameters of an extended function, there is a way to perform a case-insensitive string comparison without the need for the translate() function. Perform a Case-Insensitive String Comparison without Using Translate()
	Click to view Braintrove article: Force a Field Value to a Boolean Using Rules Written by Gregory Scot Collins Wednesday, 29 July 2009, 9:42 AM Products: InfoPath and Office Custom data validation is not available for fields bound to a secondary data source making it a challenge to validate to a specific data type. Using rules you can force a field value to a Boolean. This is especially useful when standardizing unconventional Boolean values copyied from a secondary data source. Force a Field Value to a Boolean Using Rules
	Click to view Braintrove article: Quickly Crop to a Shadow Written by Gregory Scot Collins Friday, 29 May 2009, 8:55 AM Product: Photoshop Learn how to crop to a shadow perfectly in a few seconds without the need to fuss with zoom and look for slight color variations. Quickly Crop to a Shadow
	Click to view Braintrove article: Sum Repeating Time Values Written by Gregory Scot Collins Tuesday, 14 April 2009, 2:33 PM Products: InfoPath and Office Sum time values in a repeating structure by converting them to seconds, and then display the results as seconds, minutes or hours. Sum Repeating Time Values

		5 MOST POPULAR
	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: 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: 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: Change the Default Action of the Power Button on the Windows Vista Start Menu Written by Gregory Scot Collins Friday, 8 December 2006, 5:30 AM Product: Windows In Windows Vista, you can change the default action for the power button on the Start menu, as well as for other power events, in the advanced power settings. Change the Default Action of the Power Button on the Windows Vista Start Menu

		5 MOST FORGOTTEN
	Click to view Braintrove article: Recover a Dark Picture with a Heavy Color Cast Written by Gregory Scot Collins Wednesday, 30 April 2008, 10:41 PM Product: Photoshop Even a picture that seems hopelessly lost has a chance to be recovered. Here we take a picture that is too dark and has a heavy yellow cast and revive it to an acceptable state. Recover a Dark Picture with a Heavy Color Cast
	Click to view Braintrove article: Hide Deleted Items in the Source Control Explorer Written by Gregory Scot Collins Friday, 21 December 2007, 12:04 PM Products: Team Foundation Server and Visual Studio When deleted items hinder your view of valid source control items, change the visibility option to hide them. This option can also be reversed to show deleted items when needed. Hide Deleted Items in the Source Control Explorer
	Click to view Braintrove article: Prevent Windows Vista from Requesting Your Permission to Continue Written by Gregory Scot Collins Monday, 11 December 2006, 4:15 AM Products: Group Policy Object Editor and Windows Windows Vista touts a new security feature that is frequently complained about. Find out how you can disable the dialog box that says Windows needs your permission to continue. Prevent Windows Vista from Requesting Your Permission to Continue
	Click to view Braintrove article: Create a Variable with a Unique Sorted Node-Set Written by Gregory Scot Collins Tuesday, 2 May 2006, 10:27 AM Products: XML, XPath and XSLT Easily create and use a variable with a unique sorted node-set. Create a Variable with a Unique Sorted Node-Set
	Click to view Braintrove article: Get the Oldest or Newest Date Value of a List Node Written by Gregory Scot Collins Thursday, 24 August 2006, 9:40 AM Products: HTML, XML, XPath and XSLT Use variables and XSLT constructs to get the oldest or newest date values. Get the Oldest or Newest Date Value of a List Node

		Books
	Weaving a Website: Programming in HTML, Java Script, Perl and Java
	How to Do Everything with HTML
	Build Your Own Web Site the Right Way Using HTML & CSS
	HTML and XML for Beginners
	HTML Pocket Reference

		Magazines
	SQL Server Magazine
	Web Site Management And Internet Advertising Trends
	Net Developers Journal
	Inside Visual Basic
	.net

		Microsoft MVP

This article has been viewed 8926 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.