可以设置选择元素的样式，以便在下拉“关闭”时显示所选选项的样式？答案

【问题标题】：Possible to style select element so style of selected option is shown when dropdown 'closed'?可以设置选择元素的样式，以便在下拉“关闭”时显示所选选项的样式？
【发布时间】：2012-09-18 01:55:43
【问题描述】：

鉴于这个简单的 html，

<select id="ddl">
    <option style="background:#0f0">a</option>       
    <option style="background:#f00;">b</option>   
    <option>c</option>
</select>

(http://jsfiddle.net/DxK47/) 您可以看到每个选项都有自己的背景颜色。

Unfortunately, when whatever option is selected (causing the dropdownlist to 'close'), the background remains white (or whatever the page default is).

选择后是否可以在下拉列表中显示所选项目的背景（最好不使用javascript）

【问题讨论】：

我在 chrome 中发现了这个问题，在 IE 中没有，刚刚尝试了你的小提琴，它在 IE 中正常工作，你可以试试吗？
你想要没有JS的解决方案吗？

标签： javascript jquery html css

【解决方案1】：

这可以通过一点 JavaScript 轻松完成。我在 JSFiddle 给你做了一个小例子：http://jsfiddle.net/DxK47/84/

我在这里使用了 jQuery，我把它留给你作为练习，用其他 js 框架甚至纯 js 做类似的技巧，如果你想要的话。

$("#ddl").change(function(evt) {
  var select = evt.currentTarget;
  var item = select.item(select.selectedIndex);
  var style = $(item).attr("style");
  if (style) {
    $("#ddl").css({"background-color": style.substring(11)});
  } else {
    $("#ddl").css({"background-color": ""});
  }
});

编辑：我太慢了（而且不是 jQuery 专家），请查看上面的答案以获得基本相同的更简短示例。

【讨论】：

【解决方案2】：

是的，有可能

JS：

$(function(){
    $("#ddl").on("change", function(){
        $("#ddl").css("background", $("#ddl option:selected").attr("style").replace("background:",""));
    });       
});

jsfiddle：http://jsfiddle.net/SnakeEyes/DxK47/3/

并从第二个选项中删除 ;

<option style="background:#f00;">b</option>

到

<option style="background:#f00">b</option>

其他解决方案：http://jsfiddle.net/SnakeEyes/DxK47/13/

【讨论】：

有点不错，缺点是必须指定每个选项的背景颜色，默认为'透明'
@maxp：见其他解决方案
@SnakeEyes：您的“其他解决方案”似乎运作良好，除了页面加载时没有应用样式（即，即使选择了“a”，选择也没有绿色背景）。这很容易通过在on() 事件外部运行解决方案的第三行来解决。
当然，你可以设置。我只为onchange 活动写信。
此版本不再需要使用 jquery 设置每个选项的 bg 颜色。也根据 Cory 的评论进行初始化。 jsfiddle.net/b2PLY

【解决方案3】：

此语法在 XHTML 中有效，在 IE6 中无效，但这是一种非 JavaScript 方式，正如您所要求的：

option[selected] { background: #f00; }

如果您想即时执行此操作，则必须按照其他人建议的方式使用 javascript....

【讨论】：

这不是问题要问的

【解决方案4】：

当 CSS4 引入父选择器时，这可能是可能的，但目前还没有办法根据其子元素来设置父元素的样式。同时，这里有一个简单的 JS 解决方案：

$("#ddl").change(function () {
   $(this).css('background-color', $(this).find(":selected").css('background-color'));
});

注意：这要求<option> 的所有具有指定的背景颜色，即使它是白色。如果你不喜欢，用 JS 也很简单。

【讨论】：

【解决方案5】：

您可以使用Chosen 库来实现

Chosen 是一个 JavaScript 插件，可以制作长而笨重的选择框更加用户友好。它目前在 jQuery 和原型口味。

【讨论】：

抱歉，我不参与对这个库的贡献。