Question

对于个人项目，我想根据所选的选项动态更改我的选择标签的颜色。

我已经成功地用这两种浏览器实现了这个结果。（我的目标只是chrome和firefox）。

但是，我注意到firefox有点奇怪。让我用一些代码解释一下。

虽然我可以获得所选选项的颜色值＆amp;然后在chrome：

下使用这段代码将这一个应用于select标签

$('select.label').change(
    function(){
    var sl_col_label = $(this).find('option:selected').css('background-color');
        $(this).css('background',sl_col_label);
      }
  ).change();
}

这不适用于Firefox，我基本上会尝试根据其内嵌颜色样式取回所选选项颜色的值。

为了使它在firefox下运行，我必须通过一个属性（如值）获取颜色值。

 $('select.label').change(
    function(){
    var sl_col_label = $(this).find('option:selected').attr('value');
        $(this).css('background',sl_col_label);
      }
  ).change();
}

这是HTML：

<select name="label" id="" class="label">

    <option  style="background-color:blue;" value="blue">blue</option>
    <option style="background-color:red;" value="red">red</option>
    <option style="background-color:green;" selected value="green">green</option>
    <option style="background-color:yellow;"value="yellow">yellow</option>
</select>

直接玩它：检查this fiddle

Answer 1

问题是：您将change放在另一个函数中。你应该把它放在$(document).ready()函数里面。这可以是你的js代码：

$(document).ready(function(){
    setColor();
    $('select.label').change(function(){
         setColor();       
    });
 });

function setColor()
{
   var color =  $('select.label').find('option:selected').attr('value');
   $('select.label').css('background', color); 
}

这是working fiddle。

根据所选选项动态更改背景颜色选择元素

1 个答案: