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

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 .