Dynamically coloring the background of a select box

JavaScript
1

I’m almost out of hair on this. I have a select list which has a couple of colour coded items on it. The color is added via a style attribute as this is read from a database table that contains the agency details and ‘color code’. Here’s how that looks:

<select name="agency" id="agency">
<option value="" selected="selected">Select Agency</option>
<option style="background-color: rgb(179, 253, 196);" id="agency4" value="4">Agency 4</option>
<option id="agency6" value="6">Agency 6</option>
<option style="background-color: rgb(255, 102, 106);" id="agency1" value="1">Agency 1</option>
<option id="agency2" value="2">Agency 2</option>
<option id="agency5" value="5">Agency 5</option>
<option id="agency3" value="3">Agency 3</option>
</select>

So agency 4 and agency 1 have a background color and the others don’t. That works fine - when you drop the list down you see the colors. My problem is getting the color into the background of the select list control after the option is selected. If the background on the option is green, then it should retain its green background when it becomes the selected item.

If I try something like this:

	
$('#agency').change(function(){
  agencybg=$('#agency :selected').css('background-color');
  alert(agencybg);
  $('#agency').css('background-color', agencybg);
});

… it always tells me that the background-color is rgb(51,153,255). I believe that may be the blue color that a selected item has by default.

So, my main problem is that no matter what I try here (and I’ve been trying for the past couple of hours) I can’t get the background color from the style attributes on those two select items that have the different background-color.

2

The browser version wasn’t really an issue as it was at a client who has a strict policy and all PCs currently run IE7.

I ended up using an ajax call to get and set the correct colour. I have detailed my solution at http://garysmith.co/10/dynamically-colouring-the-active-select-list-item/

3

That didn’t make any difference for me. It’s still not displaying the correct background color when the option is selected.

4

Without looking into it too deeply, the only way I can do it atm is to click away from the <select> or to set focus to another element after I select one of the coloured options. This way the the options bg colour is retained after it is selected.

As a workaround I put an onchange in the <select> to set focus to another input element, which you hopefully have on the same page, in order to retain options’ 1 and 4 bg colour when they are selected.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
 
<select name="agency" id="agency" onchange="document.getElementById('txtInp').focus();">
<option value="" selected="selected">Select Agency</option>
<option style="background-color: rgb(179, 253, 196);" id="agency4" value="4">Agency 4</option>
<option id="agency6" value="6">Agency 6</option>
<option style="background-color: rgb(255, 102, 106);" id="agency1" value="1">Agency 1</option>
<option id="agency2" value="2">Agency 2</option>
<option id="agency5" value="5">Agency 5</option>
<option id="agency3" value="3">Agency 3</option>
</select>
 
<input type="text" id="txtInp" name="txtInp" />
 
</body>
</html>
5

Not all browsers are going to support making the background different colours in the first place. For example IE6 uses the select list functionality directly out of the operating system and so it ignores all attempts to style it at all and can’t have anything else in front of it.

6

it works in my IE8 and Opera 10

maybe not all browsers support what I did. I didn’t check.