jQuery: неправильное значение фона

Question

Я написал простой скрипт с jQuery, но абсолютно не понимаю, почему он работает неправильно.

$('#color').change(function() { 
    selected = $('#color option[value=' + $(this).val() + ']'); 
    alert($(selected).css('background-color')); 
}); 

HTML:

<form> 
    <select id="color"> 
    <option value="4" style="background-color:#ff887c;">4</option> 
    <option value="6" style="background-color:#ffb878;">6</option> 
    <option value="7" style="background-color:#46d6db;">7</option> 
    </select> 
</form> 

Код на jsfiddle

Вне зависимости от варианта, который был выбран, я получить тот же результат: rgb(51, 153, 255)

UPD: к сожалению, кажется ошибкой Firefox

Answer 1

Так что это не работает в Firefox (Chrome в порядке), похоже, что в jQuery с ошибкой есть ошибка (вероятно, проблема кэширования). Переключение на родные работы, хотя!

$(function() { 
    $('#color').change(function() { 
     selected = $(this).find(':selected'); 
     alert(selected.get(0).style.backgroundColor); 
    }); 
}); 

https://jsfiddle.net/pfe2utmq/7/

Answer 2

Если вы не прочь получить шестигранный цвет обратно вместо значения RGB здесь есть некоторый код, который работает как в Chrome и Firefox. По сути, я тяну весь атрибут стиля, обрезая полуточку в конце и вручную удаляя часть «background-color:» встроенного стиля. Не самый идеальный, я согласен, но в крайнем случае это принесет вам то значение, которое вы хотите.

Кроме того, если вам нужно иметь более одного встроенного стиля в будущем, вы можете получить индекс «#» и взять следующие шесть символов после этого, чтобы получить полный гексаговый цвет, независимо от того, сколько других стилей находится в том же атрибуте стиля.

$(function() { 
    $('#color').change(function() { 
     selected = $('#color option[value=' + $(this).val() + ']'); 
     value = $(selected).attr('style'); 
     alert(value.substring(0, value.length - 1).replace('background-color:', '')); 
    }); 
});