将select的背景色设置为JQuery中的选定选项

Question

我有一个带有多个选择框的页面，如下所示：

<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>

这些是在Django中自动生成的，因此无法将CSS类，ID或属性直接应用于选项。选择元素的ID为’item-0-status’，’item-1-status’，’item-2-status’等。

我通过以下JQuery代码为选项分配颜色：

$('select[id$=-status][id^=id_item-]').children().each(
        function (){
            if($(this).val() == 0){
                $(this).css('backgroundColor','white');
            }
            if($(this).val() == 1){
                $(this).css('backgroundColor','green');
            }
            if($(this).val() == 2){
                $(this).css('backgroundColor','red');
            }
            if($(this).val() == 3){
                $(this).css('backgroundColor','orange');
            }
        }
    );

哪个工作正常。

我还希望select元素具有与selected选项相同的背景色，我正在尝试使用以下html" target="_blank">方法实现该目的：

$('select[id$=-status][id^=id_item-]').each(
        function (){
            $(this).css('backgroundColor',$('option:selected',this).css('backgroundColor'));
        }
    );

但是，这只是将选择元素着色为蓝色（我认为它是从悬停属性而不是背景获取颜色）。这是Firefox 3.6.8中的版本，就此问题而言，它是唯一涉及的浏览器。

任何想法如何解决这个问题？

Answer 1

将“每个”替换为“更改”

$('select[id$=-status][id^=id_item-]').change(
    function (){
        var color = $('option:selected',this).css('background-color');
        $(this).css('background-color',color);
    }
).change();

这适用于Chrome。

另请参阅：http :
//docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-media-
definitions

支持django admin中的自定义CSS。

而且我认为正确的CSS属性是：'background-color'。 backgroundColor是javascript，应按以下方式使用：
$(this).css({backgroundColor:color});但是它似乎仍然可以正常工作，所以没什么大不了的。

编辑：

如果要在页面加载时初始化脚本，则只需在后面添加.change（）即可。参见代码。

我也在firefox中进行了测试，并且也看到了这种奇怪的行为（蓝色，蓝色？）。

另一个编辑：

好的，所以这是Firefox的快速修复：

$('select[id$=-status][id^=id_item-]').children().each(function (){
    if($(this).val() == 0){
        $(this).attr('style', 'background-color:white;');
    }
    if($(this).val() == 1){
        $(this).attr('style', 'background-color:green;');
    }
    if($(this).val() == 2){
        $(this).attr('style', 'background-color:red;');
    }
    if($(this).val() == 3){
        $(this).attr('style', 'background-color:orange;');
    }
});

$('select[id$=-status][id^=id_item-]').change(function (){
    var style = $(this).find('option:selected').attr('style');
    $(this).attr('style', style);
}).change();

最后编辑：

如果使用CSS，甚至可以做到这一点：

<style>
    select option,
    select {
        background-color:white;
    }

    select option[value="1"],
    select.o1
    {
        background-color:green;
    }

    select option[value="2"],
    select.o2
    {
        background-color:red;
    }

    select option[value="3"],
    select.o3
    {
        background-color:orange;
    }
</style>

<script>    
    $('select[id$=-status][id^=id_item-]').change(function (){
        var color = $(this).find('option:selected').val();

        $(this).removeClass('o1 o2 o3').addClass('o' + $(this).find('option:selected').val());
    }).change();
</script>

另一个编辑：

我碰到了这一点，发现可以将其缩短，所以我只是为了好玩而已：

$('select[id$=-status][id^=id_item-]').children().each(function() {    
    var colors = ['white', 'green', 'red', 'orange'];
    $(this).attr('style', 'background-color:' + colors[$(this).val()] + ';');
});
$('select[id$=-status][id^=id_item-]').change(function() {
    $(this).attr('style', $(this).find('option:selected').attr('style'));
}).change();