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

此问题的后续行动： 在JQuery中设置选择选项的背景颜色

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

 --------- Online Offline Unknown  

这些是在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')); } ); 

但是，这只是将选择元素用蓝色着色（我认为它是从hover属性而不是背景中获取颜色）。 这是在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，你甚至可以这样做：

另一个编辑：

我遇到了这个，看到我可以缩短它，所以我只是为了好玩：

 $('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(){}加载它也不要忘记在从DB填充你的选择框之后输入这段代码

Answer 3

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

HTML

  Red Blue Green Yellow  
 

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

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

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

   Red Blue Green Yellow