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> |
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> |
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> |
