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

Question

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

我已经成功实现了这两个浏览器的结果（我仅针对chrome和firefox）。

但是，我注意到Firefox的一些奇怪之处。让我用一些代码来解释。

虽然我可以选择的选项&的颜色值，那么这一个适用于选择标记与这段代码在Chrome浏览器：

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

这并不与Firefox浏览器，我基本上尝试根据内联颜色样式获取所选选项的颜色值。

为了使它在firefox下工作，我必须通过一个属性（例如value）来获取颜色值。

$('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。