Динамический выбор цвета фона на основе выбранной опции

Question

для личного проекта, я хочу динамически менять цвет своего тега select, в соответствии с выбранной опцией.

Мне удалось достичь этого результата с обоими браузерами (для этого я нацелен только на хром и firefox).

Однако я заметил что-то странное с firefox. Позвольте мне объяснить, с некоторым кодом.

В то время как я могу получить значение цвета выбранного варианта & затем применить этот для выбора тега с этим фрагментом кода под хром:

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