set Different colors in asp:DropDownList Items

I have an in my form, with 4 different options (items)
What I need to do it’s to set a different color from client side, without PostBack.

Items:

• Select… (white)
• Complete (green)
• Running (yellow)
• Waiting in SEV1 (red)

Could somebody help me with this?

Edit (with Dropdown code)

<asp:DropDownList ID="DropDownList1" runat="server">
                    <asp:ListItem>Select...</asp:ListItem>
                    <asp:ListItem>Complete</asp:ListItem>
                    <asp:ListItem>Running</asp:ListItem>
                    <asp:ListItem>Waiting in SEV 1</asp:ListItem>
                    <asp:ListItem>No Batch</asp:ListItem>
                </asp:DropDownList>

I have only looked for a solution for this, with no success yet. That’s why I haven’t tried anything yet.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This markup applies a different background color to each item, and sets the onchange event handler:

<asp:DropDownList ID="DropDownList1" runat="server" onchange="SetDropDownListColor(this);">
    <asp:ListItem style="background-color: White !important;" >Select...</asp:ListItem>
    <asp:ListItem style="background-color: Green !important;" >Complete</asp:ListItem>
    <asp:ListItem style="background-color: Yellow !important;" >Running</asp:ListItem>
    <asp:ListItem style="background-color: Red !important;" >Waiting in SEV 1</asp:ListItem>
    <asp:ListItem style="background-color: Blue !important;" >No Batch</asp:ListItem>
</asp:DropDownList>

The following Javascript ensures that the color of the selection box matches the color of the selected item:

function SetDropDownListColor(ddl) {
    for (var i = 0; i < ddl.options.length; i++) {
        if (ddl.options[i].selected) {
            switch (i) {
                case 0:
                    ddl.style.backgroundColor = 'White';
                    return;

                case 1:
                    ddl.style.backgroundColor = 'Green';
                    return;

                case 2:
                    ddl.style.backgroundColor = 'Yellow';
                    return;

                case 3:
                    ddl.style.backgroundColor = 'Red';
                    return;

                case 4:
                    ddl.style.backgroundColor = 'Blue';
                    return;
            }
        }
    }
}

The !important modifier is set in the markup of the items in the list, in order to override the background color set to the whole control in the Javascript function.

In order to preserve the color of the DropDownList after a postback, the following line of code can be added to the Javascript block. It defines a handler for the load event of the page, in which the color of the selected item is applied to the selection box:

window.addEventListener('load', function () { SetDropDownListColor(document.getElementById('<%= DropDownList1.ClientID %>')); }, false);

Method 2

This is what worked for me…

ListItem listItem = new ListItem();
listItem.Attributes.Add("style", "background-color: Gold !important;");
listItem.Text = "Apply for funding";

dlPayment.Items.Add(listItem);

Method 3

Try out the following code

In the filename.aspx.cs file…

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        System.Drawing.Color c1 = new System.Drawing.Color();
        Type t = c1.GetType();
        int row;
        foreach (System.Reflection.PropertyInfo p1 in t.GetProperties())
        {
            ColorConverter d = new ColorConverter();
            try
            {

                DropDownList2.Items.Add(p1.Name);
                for (row = 0; row < DropDownList2.Items.Count - 1; row++)
                {
                    DropDownList2.Items<div class="su-row"></div>.Attributes.Add("style",
                          "background-color:" + DropDownList2.Items<div class="su-row"></div>.Value);
                }
            }
            catch
            {
                // Catch exceptions here if needed
            }
        }
     }
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0