Loading ...

HTML Select Control

Who is online?  0 guests and 0 members
home  »  forums   »  asp.net topics   »  web forms / data controls   » HTML Select Control

HTML Select Control

Posts under the topic: HTML Select Control

Posted: 8/30/2011

Lurker 15  points  Lurker
  • Joined on: 7/11/2011
  • Posts: 3

Hi I am using a hTML slect control to display values categorised into
different sections.Below is the code.I am able to save values to the
database.But I am not able to display the retrieved values to the control.Copied the code I  am using to assign values for other controls on the page.There are a few commented out lines where i need to assign the values to
the select control.Please help me on this

<select name="haircolour" id="ddlHaircolour" > 
                <option value="-- Please select --">-- Please select -- </option>                 
                <optgroup label="Blonde"> 
                    <option value="Blonde White">White</option> 
                    <option value="Blonde Strawberry">Strawberry</option> 
                    <option value="Blond Blonde">Blonde</option> 
                </optgroup> 
                <optgroup label="Brunette"> 
                    <option value="Brunette Mouse">Mouse</option> 
                    <option value="Brunette Light">Light</option> 
                    <option value="Brunette Medium">Medium</option> 
                    <option value="Brunette Dark">Dark</option> 
                    <option value="Brunette Black">Black</option> 
                </optgroup> 
                <optgroup label="Grey"> 
                    <option value="Grey Salt/Pepper">Salt/Pepper</option> 
                    <option value="Grey Silver">Silver</option> 
                    <option value="Grey Grey">Grey</option> 
                    <option value="Grey White">White</option> 
                </optgroup> 
                <optgroup label="Red"> 
                    <option value="Red Ginger">Ginger</option> 
                    <option value="Red Red">Red</option> 
                    <option value="Red Auburn">Auburn</option> 
                </optgroup> 
            </select>

public string HairColour 
   { 
      get 
      { 
         return Request.Form["haircolour"]; 
      }       
   }

public CustomerDetails custDetails 
   { 
      get 
      { 
         CustomerDetails details = new CustomerDetails 
                    { 
                       CustomerID = Convert.ToInt32(CustomerId), 
                       MyProfile = true, 
                    }; 
 
         if (!string.IsNullOrEmpty(ddlWorkwear.SelectedValue.Trim())) 
            details.DictionaryAdditionalDetails.Add("WorkWear", ddlWorkwear.SelectedValue.Trim()); 
 
         if (!string.IsNullOrEmpty(ddlHowDidYouHear.SelectedValue.Trim())) 
            details.DictionaryAdditionalDetails.Add("HowHeard", ddlHowDidYouHear.SelectedValue.Trim()); 
 
         if (!string.IsNullOrEmpty(ddlAgeBracket.SelectedValue.Trim())) 
            details.DictionaryAdditionalDetails.Add("AgeBracket", ddlAgeBracket.SelectedValue.Trim()); 
 
         if (!string.IsNullOrEmpty(txtBrand.Text.Trim())) 
            details.DictionaryAdditionalDetails["Brand"] = txtBrand.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtShop.Text.Trim())) 
            details.DictionaryAdditionalDetails["Shop"] = txtShop.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtBudget.Text.Trim())) 
            details.DictionaryAdditionalDetails["Budget"] = txtBudget.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtStyleIcon.Text.Trim())) 
            details.DictionaryAdditionalDetails["StyleIcon"] = txtStyleIcon.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtStyle.Text.Trim())) 
            details.DictionaryAdditionalDetails["Style"] = txtStyle.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtLifeStyle.Text.Trim())) 
            details.DictionaryAdditionalDetails["LifeStyle"] = txtLifeStyle.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtOccupation.Text.Trim())) 
            details.DictionaryAdditionalDetails["Occupation"] = txtOccupation.Text.Trim(); 
 
 
 
         if (!string.IsNullOrEmpty(txtColourLikes.Text.Trim())) 
            details.DictionaryAdditionalDetails["ColourLikes"] = txtColourLikes.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(txtColourDislikes.Text.Trim())) 
            details.DictionaryAdditionalDetails["ColourDislikes"] = txtColourDislikes.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(ddlColourDirection.SelectedValue)) 
            details.DictionaryAdditionalDetails["ColourDirection"] = ddlColourDirection.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlEyecolour.SelectedValue)) 
            details.DictionaryAdditionalDetails["EyeColour"] = ddlEyecolour.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlComplexion.SelectedValue)) 
            details.DictionaryAdditionalDetails["Complexion"] = ddlComplexion.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlFaceshape.SelectedValue)) 
            details.DictionaryAdditionalDetails["FaceShape"] = ddlFaceshape.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlStylepref.SelectedValue)) 
            details.DictionaryAdditionalDetails["StylePreference"] = ddlStylepref.SelectedValue; 
 
         if (!string.IsNullOrEmpty(txtPreferredCosmeticsHouse.Text.Trim())) 
            details.DictionaryAdditionalDetails["FavouredCosmeticHouse"] = txtPreferredCosmeticsHouse.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(ddlBodyshape.SelectedValue)) 
            details.DictionaryAdditionalDetails["BodyShape"] = ddlBodyshape.SelectedValue; 
 
 
         if (!string.IsNullOrEmpty(HairColour.Contains("Brunette") ? HairColour.Replace("Brunette", "").Trim() : "")) 
            details.DictionaryAdditionalDetails["HairBrunette"] = HairColour.Contains("Brunette") ? HairColour.Replace("Brunette", "").Trim() : ""; 
 
         if (!string.IsNullOrEmpty(HairColour.Contains("Red") ? HairColour.Replace("Red", "").Trim() : "")) 
            details.DictionaryAdditionalDetails["HairRed"] = HairColour.Contains("Red") ? HairColour.Replace("Red", "").Trim() : ""; 
 
         if (!string.IsNullOrEmpty(HairColour.Contains("Blonde") ? HairColour.Replace("Blonde", "").Trim() : "")) 
            details.DictionaryAdditionalDetails["HairBlonde"] = HairColour.Contains("Blonde") ? HairColour.Replace("Blonde", "").Trim() : ""; 
 
         if (!string.IsNullOrEmpty(HairColour.Contains("Grey") ? HairColour.Replace("Grey", "").Trim() : "")) 
            details.DictionaryAdditionalDetails["HairGrey"] = HairColour.Contains("Grey") ? HairColour.Replace("Grey", "").Trim() : ""; 
 
          
          if (!string.IsNullOrEmpty(ddlGender.SelectedValue)) 
            details.DictionaryAdditionalDetails["Gender"] = ddlGender.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlBottomsize.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleBottomSize"] = ddlBottomsize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlBracupsize.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleBraCupSize"] = ddlBracupsize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlBrasize.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleBraSize"] = ddlBrasize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlDressSize.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleDressSize"] = ddlDressSize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(txtFigconcerns.Text.Trim())) 
            details.DictionaryAdditionalDetails["FemaleFigureConcerns"] = txtFigconcerns.Text.Trim(); 
 
         if (!string.IsNullOrEmpty(ddlHeightF.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleHeight"] = ddlHeightF.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlShoesizeF.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleShoeSize"] = ddlShoesizeF.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlPrefskirtlen.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleSkirtLength"] = ddlPrefskirtlen.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlTopsize.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleTopSize"] = ddlTopsize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlTrouserLegLen.SelectedValue)) 
            details.DictionaryAdditionalDetails["FemaleTrouserLength"] = ddlTrouserLegLen.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlChestSize.SelectedValue)) 
            details.DictionaryAdditionalDetails["MaleChestSize"] = ddlChestSize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlCollarsize.SelectedValue)) 
            details.DictionaryAdditionalDetails["MaleCollarSize"] = ddlCollarsize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlHeight.SelectedValue)) 
            details.DictionaryAdditionalDetails["MaleHeight"] = ddlHeight.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlInsideleg.SelectedValue)) 
            details.DictionaryAdditionalDetails["MaleInsideLeg"] = ddlInsideleg.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlShoesize.SelectedValue)) 
            details.DictionaryAdditionalDetails["MaleShoeSize"] = ddlShoesize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlWaistsize.SelectedValue)) 
            details.DictionaryAdditionalDetails["MaleWaistSize"] = ddlWaistsize.SelectedValue; 
 
         if (!string.IsNullOrEmpty(ddlAgeBracket.SelectedValue)) 
            details.DictionaryAdditionalDetails["AgeBracket"] = ddlAgeBracket.SelectedValue; 
 
         if (!string.IsNullOrEmpty(txtBrand.Text)) 
            details.DictionaryAdditionalDetails["Brand"] = txtBrand.Text; 
 
         if (!string.IsNullOrEmpty(txtShop.Text)) 
            details.DictionaryAdditionalDetails["Shop"] = txtShop.Text; 
 
         if (!string.IsNullOrEmpty(txtBudget.Text)) 
            details.DictionaryAdditionalDetails["Budget"] = txtBudget.Text; 
 
         if (!string.IsNullOrEmpty(txtStyleIcon.Text)) 
            details.DictionaryAdditionalDetails["StyleIcon"] = txtStyleIcon.Text; 
 
         if (!string.IsNullOrEmpty(txtStyle.Text)) 
            details.DictionaryAdditionalDetails["Style"] = txtStyle.Text; 
 
         if (!string.IsNullOrEmpty(txtLifeStyle.Text)) 
            details.DictionaryAdditionalDetails["LifeStyle"] = txtLifeStyle.Text; 
 
         if (!string.IsNullOrEmpty(txtOccupation.Text)) 
            details.DictionaryAdditionalDetails["Occupation"] = txtOccupation.Text; 
 
         return details; 
      } 
 
      set 
      { 
         CustomerId = value.CustomerID; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("HowHeard")) 
            ddlHowDidYouHear.SelectedValue = value.DictionaryAdditionalDetails["HowHeard"].ToString(); 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("WorkWear")) 
            ddlWorkwear.SelectedValue = value.DictionaryAdditionalDetails["WorkWear"].ToString(); 
 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("AgeBracket")) 
            ddlAgeBracket.SelectedValue = value.DictionaryAdditionalDetails["AgeBracket"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Brand")) 
            txtBrand.Text = value.DictionaryAdditionalDetails["Brand"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Shop")) 
            txtShop.Text = value.DictionaryAdditionalDetails["Shop"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Budget")) 
            txtBudget.Text = value.DictionaryAdditionalDetails["Budget"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("StyleIcon")) 
            txtStyleIcon.Text = value.DictionaryAdditionalDetails["StyleIcon"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Style")) 
            txtStyle.Text = value.DictionaryAdditionalDetails["Style"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("LifeStyle")) 
            txtLifeStyle.Text = value.DictionaryAdditionalDetails["LifeStyle"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Occupation")) 
            txtOccupation.Text = value.DictionaryAdditionalDetails["Occupation"]; 
 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("ColourLikes")) 
            txtColourLikes.Text = value.DictionaryAdditionalDetails["ColourLikes"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("ColourDislikes")) 
            txtColourDislikes.Text = value.DictionaryAdditionalDetails["ColourDislikes"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("ColourDirection")) 
            ddlColourDirection.SelectedValue = value.DictionaryAdditionalDetails["ColourDirection"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("EyeColour")) 
            ddlEyecolour.SelectedValue = value.DictionaryAdditionalDetails["EyeColour"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Complexion")) 
            ddlComplexion.SelectedValue = value.DictionaryAdditionalDetails["Complexion"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FaceShape")) 
            ddlFaceshape.SelectedValue = value.DictionaryAdditionalDetails["FaceShape"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("StylePreference")) 
            ddlStylepref.SelectedValue = value.DictionaryAdditionalDetails["StylePreference"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("BodyShape")) 
            ddlBodyshape.SelectedValue = value.DictionaryAdditionalDetails["BodyShape"]; 
 
         //if (value.DictionaryAdditionalDetails.ContainsKey("HairBrunette")) 
         //    ddlHaircolour   = value.DictionaryAdditionalDetails["HairBrunette"]; 
 
         //if (value.DictionaryAdditionalDetails.ContainsKey("HairRed")) 
         //    HairColour = value.DictionaryAdditionalDetails["HairRed"]; 
 
         //if (value.DictionaryAdditionalDetails.ContainsKey("HairBlonde")) 
         //    HairColour = value.DictionaryAdditionalDetails["HairBlonde"]; 
 
         //if (value.DictionaryAdditionalDetails.ContainsKey("HairGrey")) 
         //    HairColour = value.DictionaryAdditionalDetails["HairGrey"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("Gender")) 
            ddlGender.SelectedValue = value.DictionaryAdditionalDetails["Gender"]; 
 
         if (ddlGender.SelectedValue == "Male") 
         { 
            pnlSizingFemale.Visible = false; 
            pnlSizingMale.Visible = true; 
         } 
         else 
         { 
            pnlSizingFemale.Visible = true; 
            pnlSizingMale.Visible = false; 
         } 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FavouredCosmeticHouse")) 
            txtPreferredCosmeticsHouse.Text = value.DictionaryAdditionalDetails["FavouredCosmeticHouse"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleBottomSize")) 
            ddlBottomsize.SelectedValue = value.DictionaryAdditionalDetails["FemaleBottomSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleBraCupSize")) 
            ddlBracupsize.SelectedValue = value.DictionaryAdditionalDetails["FemaleBraCupSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleBraSize")) 
            ddlBrasize.SelectedValue = value.DictionaryAdditionalDetails["FemaleBraSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleDressSize")) 
            ddlDressSize.SelectedValue = value.DictionaryAdditionalDetails["FemaleDressSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleFigureConcerns")) 
            txtFigconcerns.Text = value.DictionaryAdditionalDetails["FemaleFigureConcerns"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleHeight")) 
            ddlHeightF.SelectedValue = value.DictionaryAdditionalDetails["FemaleHeight"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleShoeSize")) 
            ddlShoesizeF.SelectedValue = value.DictionaryAdditionalDetails["FemaleShoeSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleSkirtLength")) 
            ddlPrefskirtlen.SelectedValue = value.DictionaryAdditionalDetails["FemaleSkirtLength"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleTopSize")) 
            ddlTopsize.SelectedValue = value.DictionaryAdditionalDetails["FemaleTopSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("FemaleTrouserLength")) 
            ddlTrouserLegLen.SelectedValue = value.DictionaryAdditionalDetails["FemaleTrouserLength"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("MaleChestSize")) 
            ddlChestSize.SelectedValue = value.DictionaryAdditionalDetails["MaleChestSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("MaleCollarSize")) 
            ddlCollarsize.SelectedValue = value.DictionaryAdditionalDetails["MaleCollarSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("MaleHeight")) 
            ddlHeight.SelectedValue = value.DictionaryAdditionalDetails["MaleHeight"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("MaleInsideLeg")) 
            ddlInsideleg.SelectedValue = value.DictionaryAdditionalDetails["MaleInsideLeg"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("MaleShoeSize")) 
            ddlShoesize.SelectedValue = value.DictionaryAdditionalDetails["MaleShoeSize"]; 
 
         if (value.DictionaryAdditionalDetails.ContainsKey("MaleWaistSize")) 
            ddlWaistsize.SelectedValue = value.DictionaryAdditionalDetails["MaleWaistSize"]; 
      } 
   }


Posted: 8/30/2011

Guru 16813  points  Guru
  • Joined on: 4/19/2009
  • Posts: 490

Hi,

Is it possible for you to take ASP.NET control instead of HTML one which you are using? Your work can become much easier then.


Posted: 8/31/2011

Lurker 15  points  Lurker
  • Joined on: 7/11/2011
  • Posts: 3

can you please tell me which other asp.net control can i use which represents the data similarly like the select control

Thanks

Latha


Posted: 8/31/2011

Guru 16813  points  Guru
  • Joined on: 4/19/2009
  • Posts: 490

Well you can go with custom control.
Code:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace MyControls
{
    public class MyDropDownListWithOptGroup : DropDownList
    {
        private const string OptionGroupTag = "optgroup";
        private const string OptionTag = "option";

        protected override void RenderContents(System.Web.UI.HtmlTextWriter writer)
        {
            ListItemCollection items = this.Items;
            int count = items.Count;
            if (count > 0)
            {
                bool flag = false;
                string prevOptGroup = null;
                for (int i = 0; i < count; i++)
                {
                    string tag = OptionTag;
                    string optgroupLabel = null;
                    ListItem item = items[i];
                    if (!item.Enabled) continue;
                    if (item.Attributes.Count > 0 && item.Attributes[OptionGroupTag] != null)
                    {
                        optgroupLabel = item.Attributes[OptionGroupTag];

                        if (prevOptGroup != optgroupLabel)
                        {
                            if (prevOptGroup != null)
                            {
                                writer.WriteEndTag(OptionGroupTag);
                            }
                            writer.WriteBeginTag(OptionGroupTag);
                            if (!string.IsNullOrEmpty(optgroupLabel))
                            {
                                writer.WriteAttribute("label", optgroupLabel);
                            }
                            writer.Write(HtmlTextWriter.TagRightChar);
                        }
                        item.Attributes.Remove(OptionGroupTag);
                        prevOptGroup = optgroupLabel;
                    }
                    else
                    {
                        if (prevOptGroup != null)
                        {
                            writer.WriteEndTag(OptionGroupTag);
                        }
                        prevOptGroup = null;
                    }

                    writer.WriteBeginTag(tag);
                    if (item.Selected)
                    {
                        if (flag)
                        {
                            this.VerifyMultiSelect();
                        }
                        flag = true;
                        writer.WriteAttribute("selected", "selected");
                    }
                    writer.WriteAttribute("value", item.Value, true);
                    if (item.Attributes.Count > 0)
                    {
                        item.Attributes.Render(writer);
                    }
                    if (optgroupLabel != null)
                    {
                        item.Attributes.Add(OptionGroupTag, optgroupLabel);
                    }
                    if (this.Page != null)
                    {
                        this.Page.ClientScript.RegisterForEventValidation(this.UniqueID, item.Value);
                    }

                    writer.Write(HtmlTextWriter.TagRightChar);
                    HttpUtility.HtmlEncode(item.Text, writer);
                    writer.WriteEndTag(tag);
                    writer.WriteLine();
                    if (i != count - 1) continue;
                    if (prevOptGroup != null)
                    {
                        writer.WriteEndTag(OptionGroupTag);
                    }
                }
            }
        }

        protected override object SaveViewState()
        {
            var state = new object[this.Items.Count + 1];
            object baseState = base.SaveViewState();
            state[0] = baseState;
            bool itemHasAttributes = false;

            for (int i = 0; i < this.Items.Count; i++)
            {
                if (this.Items[i].Attributes.Count <= 0) continue;
                itemHasAttributes = true;
                var attributes = new object[this.Items[i].Attributes.Count * 2];
                int k = 0;

                foreach (string key in this.Items[i].Attributes.Keys)
                {
                    attributes[k] = key;
                    k++;
                    attributes[k] = this.Items[i].Attributes[key];
                    k++;
                }
                state[i + 1] = attributes;
            }

            if (itemHasAttributes)
                return state;
            return baseState;
        }

        protected override void LoadViewState(object savedState)
        {
            if (savedState == null)
                return;

            Type elementType = savedState.GetType().GetElementType();
            if (elementType != null && ((elementType.Equals(typeof(object)))))
            {
                object[] state = (object[])savedState;
                base.LoadViewState(state[0]);

                for (int i = 1; i < state.Length; i++)
                {
                    if (state[i] != null)
                    {
                        var attributes = (object[])state[i];
                        for (int k = 0; k < attributes.Length; k += 2)
                        {
                            this.Items[i - 1].Attributes.Add
                                (attributes[k].ToString(), attributes[k + 1].ToString());
                        }
                    }
                }
            }
            else
            {
                base.LoadViewState(savedState);
            }
        }
    }
}

Usage:
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="MyControls" Namespace="MyControls" Assembly="WebApplication2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form id="form1" runat="server">
    <MyControls:MyDropDownListWithOptGroup ID="MyDropDownList"  runat="server" >
    </MyControls:MyDropDownListWithOptGroup>
    <asp:Button runat="server" Text="Do Postback" />
    </form>
</body>
</html>

<script runat="server">

  
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            
            ListItem item1 = new ListItem("-- Please select --");
            
            ListItem item2 = new ListItem("Blonde White");
            ListItem item3 = new ListItem("Blonde Strawberry");
            ListItem item4 = new ListItem("Blond Blonde");
            item2.Attributes.Add("optgroup", "Blonde");
            item3.Attributes.Add("optgroup", "Blonde");
            item4.Attributes.Add("optgroup", "Blonde");

            ListItem item5 = new ListItem("Brunette Mouse");
            ListItem item6 = new ListItem("Brunette Light");
            ListItem item7 = new ListItem("Brunette Medium");
            ListItem item8 = new ListItem("Brunette Dark");
            item5.Attributes.Add("optgroup", "Brunette");
            item6.Attributes.Add("optgroup", "Brunette");
            item7.Attributes.Add("optgroup", "Brunette");
            item8.Attributes.Add("optgroup", "Brunette");
                        
            

            MyDropDownList.Items.Add(item1);
            MyDropDownList.Items.Add(item2);
            MyDropDownList.Items.Add(item3);
            MyDropDownList.Items.Add(item4);
            MyDropDownList.Items.Add(item5);
            MyDropDownList.Items.Add(item6);
            MyDropDownList.Items.Add(item7);
            MyDropDownList.Items.Add(item8);
        
        }

    }

</script>

 Output:
 


Page 1 of 1 (4 items)