Setting background-color of select options in JQuery

I have 开发者_开发问答a page with multiple select boxes, as per the following:

<select name="item-0-status" id="id_item-0-status">
<option value="">---------</option>
<option value="1">Online</option>
<option value="2">Offline</option>
<option value="3">Unknown</option>
</select>

These are being auto-generated in django, so it is not possible to apply css classes, ids or attributes directly to the options. The select elements have ids of 'item-0-status','item-1-status','item-2-status' etc.

How can I add css colours to the options using the id of the select element?

I have tried to follow the code here: How do you select a particular option in a SELECT element in jQuery?

This has lead me to do, e.g. the following for setting 'offline' options to red:

$('select[id$=-status][id^=id_item-]').children().find('option[value="2"]').css('background-color','#FF0000');

but this has no effect.

How can I make this work? I realise support for this varies between browsers, but this is not an issue. For the purposes of this question working in Firefox 3.6 is enough.

Something like should work though note that I am not so sure.

$(function(){   

$('#id_item-0-status').children().each(
        function (){
            if($(this).val() == 2){
                $(this).css({'background':'red'});
            }
        }
);

})  

You have a typo.

It should be background-color. You have missed 'r'