根據所選選項動態更改背景顏色選擇元素

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。