4

enter image description here

This is a ASP .NET application with C# in the code behind. I am able to add background color to dropdown list items but when I make a selection, the color doesn't persist in Chrome or IE 11. Works fine in IE 9.

What have I done so far (taking hints from another question on SO):

Added onchange="SelectedItemCLR(this);" to my DropDownList. But not sure what to do now to persist the color.

The SelectedItemCLR function (from another question in SO) looks like this: 

/* Persist the color of the selected item */
function SelectedItemCLR(source) 
{
    if (source.options[source.selectedIndex].value == "Yellow") {
        // ??? 
    }
    else if (source.options[source.selectedIndex].value == "Red") {
    }
    else if (source.options[source.selectedIndex].value == "Green") {
    }
}

Is this more of a browser issue that I have to live with? :(

Edit: In the server side C# code, I have this code to color the items. 

foreach (ListItem item in ddlOverallStatus.Items)
{
    if (item.Value == "Red")
    {
        item.Attributes.Add("style", "padding:2px;background-color:#B22222;color:#fff");
    }
    else if (item.Value == "Yellow")
    {
        item.Attributes.Add("style", "padding:2px;background-color:yellow;color:#000");
    }
    else if (item.Value == "Green")
    {
        item.Attributes.Add("style", "padding:2px;background-color:green;color:#fff");
    }
}

Works fine in IE 9

enter image description here

Edit - Got it working with Chrome.

  1. Add onchange="SelectedItemCLR(this); to your asp:DropDownList.

  2. Function SelectedItemCLR looks like:

function SelectedItemCLR(source) 
{
 if (source.options[source.selectedIndex].value == "Yellow") {
  $('#<%=  ddlOverallStatus.ClientID %>').addClass("YellowDropdownListItem");
 }
 else if (source.options[source.selectedIndex].value == "Red") {
 }
 else if (source.options[source.selectedIndex].value == "Green") {
 }
 else {
 }
}
KalC
  • 1,530
  • 3
  • 22
  • 33
  • What are you trying to have it persist between? Browser restarts? Page changes? Simply past it being clicked? – Harris Nov 09 '15 at 19:41
  • Are you asking what to write in javascript to change the background of the combobox' to the selected color? If so, I would expect you'd need to modify `source`'s style (background-color). – Zastai Nov 09 '15 at 19:44
  • Sorry I should have been clear. Just when the user makes a selection, the background color is lost. – KalC Nov 09 '15 at 19:45
  • 1
    I would suggest making a css class for your drop down list and do the coloring there. Take a look at http://stackoverflow.com/questions/12836227/change-select-box-option-background-color to get you started. – John Paul Nov 09 '15 at 19:45
  • What are you doing to make it lose/modify the color? From what you've posted, nothing should be changing it yet. – Harris Nov 09 '15 at 19:47
  • @HarrisWeinstein All I am doing here is making a selection once the page loads and the background color is lost. – KalC Nov 09 '15 at 19:49
  • @JohnPaul Please see my edit. Albeit, not very neat, but I am effectively applying CSS to color the list items. When the user selects one (without any post back), for some reason, the background-color is lost. – KalC Nov 09 '15 at 19:52
  • 1
    What I'm saying is that you shouldn't be applying the css through code. You should implement it in a stylesheet and then have the drop down list inherit that class. That's what stylesheets are for. – John Paul Nov 09 '15 at 20:20
  • a) I am using inside the for which you cannot add CSSClass attribute, b) You cannot add a CSS class using item.Attributes.Add ... the example in the link above shows a html select-option tag. Won't work in this case. – KalC Nov 09 '15 at 21:13
  • I'm pretty sure you can. See this http://stackoverflow.com/questions/1030844/programmatically-add-css-class-to-listitem. Also just add the attribute class="yourClassName" – John Paul Nov 10 '15 at 14:58
  • Hi John ... I had this code following your last comment: if (item.Value == "Red") { item.Attributes.Add("class", "RedDropdownListItem"); } ... didn't work. – KalC Nov 10 '15 at 15:06
  • @JohnPaul .. thanks for your help though. I think it's one of those ASP inconsistencies. – KalC Nov 10 '15 at 15:08
  • @JohnPaul You were right though. You can just add a class attribute to the .... but the problem still remains. When I select, the background color disappears. I tried this ... – KalC Nov 10 '15 at 15:15
  • Hmm...Are you able to change the background color in chrome using the developer tools? I did some research and I think it has something to do with Chrome and webkit not sure exactly what the issue is though. – John Paul Nov 10 '15 at 15:16
  • I can change the background-color of the dropdown list using developer tools (inspect element). So I am going to try to write some JavaScript to do this on the selection changed event. Will post my update soon. – KalC Nov 10 '15 at 15:22
  • Ok I'm trying tod o the same in jsfidddle. I'll post an answer if I can figure it out. – John Paul Nov 10 '15 at 15:27
  • Got it to work please take a look at my answer. – John Paul Nov 10 '15 at 15:37

2 Answers2

1

You will need to style the DropDownList itself, not just each Item .

You can do this with the OnSelectedIndexChanged event like this:

<asp:DropDownList ID="ddlOverallStatus" AutoPostBack="true" OnSelectedIndexChanged="ddlOverallStatus_SelectedIndexChanged" runat="server"></asp:DropDownList>

Then in code behind:

protected void ddlOverallStatus_SelectedIndexChanged(object sender, EventArgs e)
    {

        if (ddlOverallStatus.SelectedValue == "Red")
        {
            ddlOverallStatus.Attributes.Add("style", "background-color:#B22222;color:#fff");
        }
        else if (ddlOverallStatus.SelectedValue == "Yellow")
        {
            ddlOverallStatus.Attributes.Add("style", "background-color:yellow;color:#000");
        }
        else if (ddlOverallStatus.SelectedValue == "Green")
        {
            ddlOverallStatus.Attributes.Add("style", "background-color:green;color:#fff");
        }
    }

Another option would be to do it Client side with Javascript.

Darren S
  • 920
  • 5
  • 15
  • This is going to send a HTTP request every time the user changes a drop-down selection :( – KalC Nov 10 '15 at 14:35
1

Ok got it to work. Check out my working jsfiddle. https://jsfiddle.net/fbou1srd/.

HTML

<select id="dropDown" onchange="changeColor();">
    <option val="Red">Red</option>
    <option val="Yellow">Yellow</option>
    <option val="Green">Green</option>
</select>

CSS 

select option[val="Red"] {
    background-color: red;
}

select option[val="Yellow"] {
    background-color: yellow;
}

select option[val="Green"] {
    background-color: green;
}

JS

function changeColor() {
    var select = $("#dropDown");
    if(select.val() === "Red") {
        select.css("background-color", "Red");
    }
    else if(select.val() === "Yellow") {
        select.css("background-color", "Yellow");
    }
    else if(select.val() === "Green") {
        select.css("background-color", "Green");
    }
}
John Paul
  • 827
  • 2
  • 6
  • 16