Question

I have a dropdown list in my C# / .NET project that is on a child page (within a Master page).

I am applying the jQuery selectmenu styling via the master page:

$(function () {
   $('select[id*="lstClients"]').selectmenu({ style: 'dropdown', maxHeight: 150 });
});

I need to give certain items in the dropdown a different background colour.

e.g. if ClientX has Y number of projects then set the background colour to red or something like that.

I have all of the data/counters being populated via the code-behind so basically what I am asking is if anyone knows how I can change the background colour of certain items in the dropdown via jQuery?

Pseudo-code:

If ddl.Item.value > 0
 set bgColor = black
Else
 set bgColor = white

Thanks in advance

Answer 1

I think jQuery UI SelectMenu will honour a background-color for an option (it certainly worked when I fiddled with it briefly on here.

So, given that, you could do something like this. I’ve used a List<Pair> as an example datasource as you didn’t mention what your source data was. ddlItems is the ID of the DropDownList.

List<Pair> items = new List<Pair>();
items.Add(new Pair("zero", "0"));
items.Add(new Pair("one", "1"));
items.Add(new Pair("two", "2"));

foreach (Pair item in items)
{
    ListItem li = new ListItem();
    li.Text = item.First.ToString();
    li.Value = item.Second.ToString();
    li.Attributes.CssStyle.Add("background-color", (int)item.Second > 0 ? "black" : "white");
    ddlItems.Items.Add(li);
}

I must admit I haven’t had chance to test this fully, but that should hopefully work for you. You could probably do the same thing using a class, eg: Attributes.Add("class", "greaterThanZero"); which would avoid the inline styles.