Question

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.

Answer 1

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'});
            }
        }
);

})