Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Tips And Tricks How To Group Related Options In A Drop Down List

How To Group Related Options In A Drop Down List

Grouping related options in a drop down list is a easiest way to display a group of parent categories and child categories in a drop down list. And all parent categories (group headers) will be Bold.

Below are 2 examples that demonstrate how to display group of related options. The first shows list of groups and options. The second show list of groups and options but some of them are un-select-able (disabled). And selected value will be displayed when you select a particular option.

1. Display Group Of Related Options In A Drop Down List

<select id="ddlProjects" onchange="selectProject(this)">
	<option value="">Select a project ...</option>
 
	<optgroup label="Company A">
		<option value="project_a1">Project A1</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company B">
		<option value="project_a1">Project B1</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company C">
		<option value="project_c1">Project C1</option>
		<option value="project_c2">Project C2</option>
		<option value="project_c3">Project C3</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company E">
		<option value="project_e1">Project E1</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company F">
		<option value="project_f1">Project F1</option>
		<option value="project_f2">Project F2</option>
		<option value="project_f3">Project F3</option>
		<option value="project_f4">Project F4</option>
	</optgroup>
</select>

<select id="ddlProjects" onchange="selectProject(this)"> <option value="">Select a project ...</option> <optgroup label="Company A"> <option value="project_a1">Project A1</option> </optgroup> <option value=""></option> <optgroup label="Company B"> <option value="project_a1">Project B1</option> </optgroup> <option value=""></option> <optgroup label="Company C"> <option value="project_c1">Project C1</option> <option value="project_c2">Project C2</option> <option value="project_c3">Project C3</option> </optgroup> <option value=""></option> <optgroup label="Company E"> <option value="project_e1">Project E1</option> </optgroup> <option value=""></option> <optgroup label="Company F"> <option value="project_f1">Project F1</option> <option value="project_f2">Project F2</option> <option value="project_f3">Project F3</option> <option value="project_f4">Project F4</option> </optgroup> </select>

Display Group Of Related Options In A Drop Down List

Display Group Of Related Options In A Drop Down List

2. Display Group Of Related Options With Unselectable Groups/Options

In order to mark groups/options are disable (Unselectable), simply set its disabled attribute to “true”

<select id="ddlProjects" onchange="selectProject(this)">
	<option value="">Select a project ...</option>
 
	<optgroup label="Company A">
		<option value="project_a1">Project A1</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company B">
		<option value="project_a1">Project B1</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company C">
		<option value="project_c1" disabled="true">Project C1</option>
		<option value="project_c2">Project C2</option>
		<option value="project_c3" disabled="true">Project C3</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company E">
		<option value="project_e1">Project E1</option>
	</optgroup>
	<option value=""></option>
	<optgroup label="Company F" disabled="true">
		<option value="project_f1">Project F1</option>
		<option value="project_f2">Project F2</option>
		<option value="project_f3">Project F3</option>
		<option value="project_f4">Project F4</option>
	</optgroup>
</select>

<select id="ddlProjects" onchange="selectProject(this)"> <option value="">Select a project ...</option> <optgroup label="Company A"> <option value="project_a1">Project A1</option> </optgroup> <option value=""></option> <optgroup label="Company B"> <option value="project_a1">Project B1</option> </optgroup> <option value=""></option> <optgroup label="Company C"> <option value="project_c1" disabled="true">Project C1</option> <option value="project_c2">Project C2</option> <option value="project_c3" disabled="true">Project C3</option> </optgroup> <option value=""></option> <optgroup label="Company E"> <option value="project_e1">Project E1</option> </optgroup> <option value=""></option> <optgroup label="Company F" disabled="true"> <option value="project_f1">Project F1</option> <option value="project_f2">Project F2</option> <option value="project_f3">Project F3</option> <option value="project_f4">Project F4</option> </optgroup> </select>

Display Group Of Related Options With Unselectable Groups Options

Display Group Of Related Options With Unselectable Groups Options

3. Display Selected Value

<script language="javascript">
	function selectProject(obj)
	{
		if(obj.value != "")
			alert("You have selected project: " + obj.value);
		else
			alert("Please select a project!");
	}
</script>

<script language="javascript"> function selectProject(obj) { if(obj.value != "") alert("You have selected project: " + obj.value); else alert("Please select a project!"); } </script>

May 16, 2012Hoan Huynh

Source Code Demo page

Free, Simple And Easiest Copy SoftwareYouTube Thumbnail URLs And Examples
You Might Also Like:
  • Generate And Display Related Content On WordPress
  • View Download List In Google Chrome And Firefox
  • JavaScript Get Radio Button Value
  • PHP Load And Save Facebook Friend List
  • SQL Server Get list of dates between start date and end date
  • C# Get List of databases in SQL Server
  • View Word Wrap and Line Numbers in Microsoft Visual Web Developer 2010 Express
  • How To Track Website With Multiple Google Analytisc Accounts
  • How To Test Your Website With Various Web Browsers And Mobile Devices
  • Remove/Delete your saved passwords in IE, Firefox, Google Chrome
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

10 years ago Tips And TricksHTML, onchange, optgroup, option236
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,550 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,886 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,740 views
JQuery Allow only numeric characters or only alphabet characters in textbox
15,063 views
C# Read Json From URL And Parse/Deserialize Json
11,795 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development