I had a job recently where the customer wanted the items in a select list to be colour coded. My initial thought was just to use jquery and have it set the background of the selected item using the $(‘#myselect’).changed() function. The plan was that in the change event I would check the background colour of the newly selected item and then change the background colour of the select control. I wasn’t able to get the item colour though, even though the items were displaying with the various background colours – when I queried the CSS background-color attribute with jquery it would always return the same colour which was a shade of blue. I suspect it was the default colour that you see when you mouse over an item in the drop down list.

My solution was to use ajax to get the colour code for the item and then set the background colour for the list. A side effect of this was that it would set all items in the list which didn’t already have a specific background colour (some didn’t have a colour code), so I had to set each of those to #ffffff.

Here is the code and an example:

The First Item 1 The Second Item The Third Item The Fourth Item

HTML Code:

In the project I was working on, we have a table that has a list of the items and the corresponding background colour. We query the table and set the background-color style attribute dynamically. For the purpose of the example I’ve simply added these manually.

<select name="selectlist" id="selectlist">
<option value="1" style="background-color:#ff0000;">The First Item 1</option>
<option value="2" style="background-color:#00ff00;">The Second Item</option>
<option value="3" style="background-color:#ffffff;">The Third Item</option>
<option value="4" style="background-color:#0000ff;">The Fourth Item</option>
</select>

Javascript Code:

We start by initialising the select list to display the correct colour for the default selected item and then we hook the .changed() event.

$(document).ready(function() {

	// Initialise the select list
	selitem=$('#selectlist :selected').val();
	$.get('/examples/ajax-functions.php?item='+selitem, function(data) {
		if(data != '')
		{
			$('#selectlist').css('background-color', data);
		}
		else
		{
			$('#selectlist').css('background-color', '#fff');
		}
	});

	// Colour code select list
	$('#selectlist').change(function(){
		selitem=$('#selectlist :selected').val();
		$.get('/examples/ajax-functions.php?item='+selitem, function(data) {
			if(data != '')
			{
				$('#selectlist').css('background-color', data);
			}
			else
			{
				$('#selectlist').css('background-color', '#fff');
			}
		});
	});
});

PHP Code:

I use a simple switch statement to get the correct background color – in the project
I queried a MySQL database and used the result from the database table.

<?
 if(isset($_GET["item"]) && is_numeric($_GET["item"]))
 {
 get_select_bg($_GET["item"]);
 }

 function get_select_bg($itemid)
 {
 switch($itemid)
 {
 case 1:
 $selbg='#ff0000';
 break;
 case 2:
 $selbg='#00ff00';
 break;
 case 3:
 $selbg='#ffffff';
 break;
 case 4:
 $selbg='#0000ff';
 break;
 default:
 break;
 }

 echo $selbg;
 }
?>

That’s about all there is to it!

Enjoy this Post?

Remember to subscribe to our RSS Feed and if you would like, please share this post.