根据 selected 选项动态更改背景颜色 select 元素

Question

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

我已经成功地使用两种浏览器实现了这个结果。（我只针对 chrome 和 firefox）。

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

虽然我可以获得 selected 选项的颜色值，然后使用 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，我基本上尝试根据其内联颜色样式取回 selected 选项的颜色值。

为了让它在 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.

根据 selected 选项动态更改背景颜色 select 元素

Change background color select element based on the selected option dynamically

firefox

jquery

select

onchange

colors