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

selected

$('#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();

You can test it out here。但是，这在所有浏览器中都不起作用，尤其是在IE中，<select>元素是众所周知的不可渲染的（缺少更好的......或真实的单词）。它将在支持它的浏览器中工作，而对那些不支持它的浏览器没有任何影响。您可以改为等待为父元素设置样式，以便在所有浏览器中提供指示符something like this。

Answer 4

IE友好的方式，这必须应用于option标记。

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

jquery：选择选项和背景颜色

4 个答案: