		Site Navigation
	Home
	Products
	Tags
	Levels
	Dates
	Authors

		5 MOST RECENT
	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
	Click to view Braintrove article: Preview and Open Forms after Upgrading to Internet Explorer 8 Written by Gregory Scot Collins Friday, 10 April 2009, 12:29 PM Products: InfoPath, Internet Explorer, Office, Visual Studio, Visual Studio Tools for Applications, Visual Studio Tools for Office and Windows After upgrading to Internet Explorer 8 you might find that you can no longer preview or open your managed code forms. There is an easy solution to this. Preview and Open Forms after Upgrading to Internet Explorer 8

		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: 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: Convert Between Time and Decimal Written by Gregory Scot Collins Friday, 31 October 2008, 7:36 AM Products: Excel and Office While not readily apparent, conversion between time and decimal in Excel is really quite simple. Convert Between Time and Decimal
	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: Stop Outlook Sending Mail to Unintended Recipients Written by Gregory Scot Collins Monday, 30 June 2008, 5:42 PM Products: Ghost, Office, Outlook and Outlook Connector When Outlook starts sending email to recipients other than those you specified, chances are good that its nickname database has become corrupted. The database should be regenerating to prevent embarrassment and leaks of confidential information. Stop Outlook Sending Mail to Unintended Recipients
	Click to view Braintrove article: Add a Custom Icon to Your Web Site Written by Gregory Scot Collins Monday, 26 February 2007, 5:34 PM Products: FireFox, HTML, Internet Explorer and Opera Learn how to display your own custom icon in the Web browser of your site visitors and what to do when you host multiple web sites from the same root folder. Add a Custom Icon to Your Web Site

		Books
	HTML Utopia : Designing Without Tables Using CSS
	Oracle HTML DB Handbook
	HTML and XHTML Step by Step
	Sams Teach Yourself HTML & XHTML in 24 Hours
	Creating Cool HTML 4 Web Pages

		Magazines
	SQL Server Magazine
	Practical Web Design
	Web Site Management And Internet Advertising Trends
	Soa Web Services Journal
	Asp.netpro

		Microsoft MVP

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