在JQuery中将选择的背景颜色设置为选定选项 [英] Set background colour of select to selected option in JQuery

问题描述

此问题的后续处理：设置选择的背景颜色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>

这些是在django中自动生成的，因此不可能应用css类，id或属性直接到选项。 select元素具有'item-0-status'，'item-1-status'，'item-2-status'等id。

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.

通过以下JQuery代码到选项：

I am allocating colours to the options via the following JQuery code:

$('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元素具有与所选择的选项相同的背景颜色，我想使用以下实现：

I also want the select elements to have the same background colour as the selected option, which I am trying to achieve using the following:

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

但是，这只是将选择元素的颜色蓝色（我认为它是从悬停颜色属性而不是背景）。这是在Firefox 3.6.8，这个问题的目的是唯一的浏览器。

However, this just colours the select element in blue (I think it is taking the colour from the hover property rather than the background). This is in Firefox 3.6.8, which for the purposes of this question is the only browser concerned.

有什么想法如何解决这个问题？

Any idea how to fix this?

推荐答案

将each替换为change

Replace the "each" with "change"

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

这适用于Chrome。

This works in Chrome.

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

支持django管理员的自定义css。

Custom css in django admin is supported.

我相信正确的css属性是：'background-color'。
backgroundColor 是javascript，应该像这样使用：
$（this）.css（{backgroundColor：color}） ;

And I believe that the correct css attribute is: 'background-color'. backgroundColor is javascript and should be used like this: $(this).css({backgroundColor:color}); But it seems to work anyway so no biggie.

如果你想在页面加载时初始化脚本，你可以只添加.change（）。
查看代码。

If you want to init the script on page load you can just add .change() behind. See code.

我也在firefox中测试过这个，我也看到这个奇怪的行为（蓝色，wth蓝色？）。

I also tested this in firefox and I also see this strange behavior (blue, wth blue?).

好，这里是firefox的快速修复：

Ok, so here is a quick fix for 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：

Last

You could even to this if you're using 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>

还有一个编辑：

看到我可以缩短，所以我只是为了乐趣：

Yet another edit:

I came across this and saw that I could make it shorter so I did just for fun:

$('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();

这篇关于在JQuery中将选择的背景颜色设置为选定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！