How can I add option groups in ASP.NET drop down list?

Question

I have a requirement of grouping the drop down list options in ASP.NET drop down server control. Do you have any idea to how to approach the issue? I am new to ASP.NET.

Answer 1

Check out this article, I too had need for Group DropDown list . . .

ASP.NET DropDownList with OptionGroup support

Usage :

protected void Page_Load(object sender, EventArgs e)  {                ListItem item1 = new ListItem("Camel", "1");               item1.Attributes["OptionGroup"] = "Mammals";                ListItem item2 = new ListItem("Lion", "2");               item2.Attributes["OptionGroup"] = "Mammals";                ListItem item3 = new ListItem("Whale", "3");               item3.Attributes["OptionGroup"] = "Mammals";                ListItem item4 = new ListItem("Walrus", "4");               item4.Attributes["OptionGroup"] = "Mammals";                ListItem item5 = new ListItem("Velociraptor", "5");               item5.Attributes["OptionGroup"] = "Dinosaurs";                ListItem item6 = new ListItem("Allosaurus", "6");               item6.Attributes["OptionGroup"] = "Dinosaurs";                ListItem item7 = new ListItem("Triceratops", "7");               item7.Attributes["OptionGroup"] = "Dinosaurs";                ListItem item8 = new ListItem("Stegosaurus", "8");               item8.Attributes["OptionGroup"] = "Dinosaurs";                ListItem item9 = new ListItem("Tyrannosaurus", "9");               item9.Attributes["OptionGroup"] = "Dinosaurs";                 ddlItems.Items.Add(item1);               ddlItems.Items.Add(item2);               ddlItems.Items.Add(item3);               ddlItems.Items.Add(item4);               ddlItems.Items.Add(item5);               ddlItems.Items.Add(item6);               ddlItems.Items.Add(item7);               ddlItems.Items.Add(item8);               ddlItems.Items.Add(item9);            } 

Answer 2

I really like this client-side solution (doesn't need a custom DropDownList, but uses jQuery):

backend

private void _addSelectItem(DropDownList list, string title, string value, string group = null) {    ListItem item = new ListItem(title, value);    if (!String.IsNullOrEmpty(group))    {        item.Attributes["data-category"] = group;    }    list.Items.Add(item); }  ... _addSelectItem(dropDown, "Option 1", "1"); _addSelectItem(dropDown, "Option 2", "2", "Category"); _addSelectItem(dropDown, "Option 3", "3", "Category"); ... 

client

var groups = {}; $("select option[data-category]").each(function () {      groups[$.trim($(this).attr("data-category"))] = true; }); $.each(groups, function (c) {      $("select option[data-category='"+c+"']").wrapAll('<optgroup label="' + c + '">'); });