jquery：選擇選項和背景顏色

Question

問候，有這樣的選擇框：

<select id="events">
    <option value="1" style="background-color:green;">Event 1</option>
    <option value="2" style="background-color:yellow;">Event 2</option>
    <option value="3" style="background-color:blue;">Event 3</option>
    <option value="4" style="background-color:red;">Event 4</option>
</select>

在此選擇框的初始瀏覽器渲染中， 每次完成選擇時 ，我希望selectbox“events”獲取所選選項的背景顏色。

如何通過jquery或通過常規JavaScript實現？

Answer 1

//Alert color on initial page load
var bkg = $("#events option:selected").css("background-color");
    alert(bkg);

//Handle change event and alert color when selection is done
$(function(){
 $("#events").change(function() {
    var bkg = $("#events option:selected").css("background-color");
    alert(bkg);
 });
});

Answer 2

選

$('#events').bind('change', function() {

   var bgc = $(this).find('option:selected').css('background-color');

});

Answer 3

你可以這樣做：

$("#events").change(function() {
    $(this).css("backgroundColor",
      $(this).find(":selected").css("backgroundColor")
    );
}).change();

你可以在這里測試一下 。 但是 ，這在所有瀏覽器中都不起作用，尤其是在IE中， <select>元素是眾所周知的不可設計的（缺少更好的...或真實的單詞）。 它將在支持它的瀏覽器中工作，而對那些不支持它的瀏覽器沒有任何影響。 您可以改為等待樣式父元素在所有瀏覽器中給出指示符， 如下所示 。

Answer 4

IE友好的方式，這必須應用於option標簽。

$(this).html($(this).html());