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

Question

此问题的后续行动：Setting background-color of select options in JQuery

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

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

我通过以下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元素与所选选项具有相同的背景颜色，我试图通过以下方式实现：

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

然而，这只是将选择元素用蓝色着色（我认为它是从悬停属性而不是背景中获取颜色）。这是在Firefox 3.6.8中，出于此问题的目的，它是唯一关注的浏览器。

知道如何解决这个问题吗？

Answer 1

将“each”替换为“change”

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

Answer 2

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

为您添加样式HTML代码，使用触发器不要忘记在$(document).ready(function(){}中加载 另外，请不要忘记在填充“数据库”中的“选择”框后输入此代码

Answer 3

我喜欢@Arnar Yngvason的答案，但我会将其添加到组合中。此解决方案使用CSS类，因此可以轻松更改样式，而不会破坏其余代码。

HTML

<select>
    <option class="Red">Red</option>
    <option class="Blue">Blue</option>
    <option class="Green">Green</option>
    <option class="Yellow">Yellow</option>
</select>
<div id="output"></div>

CSS

.Red{background-color:#ff0000;}
.Blue{background-color:#0000ff;}
.Green{background-color:#00ff00;}
.Yellow{background-color:#ffff00;}

的JavaScript

$("select").change(function(){
    $(this).removeClass($(this).attr('class'))
           .addClass($(":selected",this).attr('class')); 
    /*If you want to keep some classes just add them back here*/
    //Optional: $(this).addClass("Classes that should always be on the select");

});

＆＃13;

＆＃13;

 $("select").change(function() {
   $(this).removeClass($(this).attr('class'))
     .addClass($(":selected", this).attr('class'));
   /*If you want to keep some classes just add them back here*/
   //Optional: $(this).addClass("Classes that should always be on the select");

 });

＆＃13;

    .Red {
      background-color: #ff0000;
    }
    .Blue {
      background-color: #0000ff;
    }
    .Green {
      background-color: #00ff00;
    }
    .Yellow {
      background-color: #ffff00;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option class="Red">Red</option>
  <option class="Blue">Blue</option>
  <option class="Green">Green</option>
  <option class="Yellow">Yellow</option>
</select>
<div id="output"></div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle

我在FireFox 31，IE 11和Chrome 37上测试了这个