My webpage includes multiple select boxes with different options:
<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>
Since these select boxes are auto-generated in Django, I cannot directly apply CSS classes, IDs or attributes to the options. Instead, each select element has its own ID like 'item-0-status', 'item-1-status', 'item-2-status', and so on.
How can I style the options with CSS colors using the ID of the select element?
I've attempted to use the code from How do you select a particular option in a SELECT element in jQuery? to set the 'offline' options to red:
$('select[id$=-status][id^=id_item-]').children().find('option[value="2"]').css('background-color','#FF0000');
Unfortunately, this code doesn't seem to have any effect. How can I get this to work properly? While I understand that browser support may vary, I am specifically focusing on making it work in Firefox 3.6 for this question.