jquery：选择选项和背景颜色

发布于 2024-10-06 00:30:43 字数 550 浏览 2 评论 0原文

问候，有一个这样的选择框：

<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>

在该选择框的初始浏览器渲染以及每次完成选择时，我希望选择框“事件”获取背景颜色所选的选项。

如何通过 jquery 或常规 javascript 实现这一点？

原文

Greetings,
Having a such select box:

<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>

At the initial browser render of this selectbox and each time a selection is done, I want the selectbox "events" to get the background-color of the selected option.

How can this be achieved via jquery or via regular javascript ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眼泪 2024-10-13 00:30:43

//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);
 });
});

//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);
 });
});

回复收藏 0 原文

半﹌身腐败 2024-10-13 00:30:43

已选择

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

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

});

selected

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

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

});

回复收藏 0 原文

一枫情书 2024-10-13 00:30:43

您可以这样做：

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

您可以在此处进行测试。但是，这并不适用于所有浏览器，尤其是在 IE 中，

You can do this:

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

You can test it out here. But, this won't work in all browsers, especially in IE the <select> element is notoriously unstyleable (for lack of a better...or real word). It'll work in the browsers that support it and just have no effect in the ones that don't. You may instead wait to style a parent element to give an indicator in all browsers, something like this.

回复收藏 0 原文