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

这一问题的后续行动：

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

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

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

这很好用

我还希望所选元素与所选选项具有相同的背景颜色，我正试图通过以下方法实现这一点：

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

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

然而，这只是选择蓝色元素的颜色，我认为它是从悬停属性而不是背景中获取颜色。这在Firefox 3.6.8中，就本问题而言，Firefox是唯一相关的浏览器

---

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

用更改替换每个

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

这在Chrome中工作

另见：

支持django admin中的自定义css

我相信正确的css属性是：“背景色”。 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>

为HTML代码添加样式，使用触发器不要忘记将其加载到$document.readyfunction{}

---

另外，在从DB填充选择框后，不要忘记输入此代码。我喜欢@Arnar Yngvason的答案，但我会将其添加到混合中。此解决方案使用CSS类，因此可以轻松更改样式，而无需中断其余代码

Html JavaScript $select.changefunction{ $this.removeClass$this.attr'class' .addClass$：选中此.attr'class'； /*如果您想保留一些类，只需将它们添加回此处即可*/ //可选：$this.addClassClassClassClasses，应始终位于选择菜单上； }; 瑞德先生{ 背景色：ff0000； } 蓝先生{ 背景色：0000ff； } 格林先生{ 背景色：00ff00； } 黄先生{ 背景色：FF00； } 红色 蓝色 绿色 黄的

---

非常感谢-这个答案不仅非常有效，而且非常全面和完整，并附有参考资料。

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

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

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

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

});