Question

鉴于这个简单的HTML，

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

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

不幸的是，当选择了任何选项（导致下拉列表“关闭”）时，背景保持白色（或者无论页面默认是什么）。

选择完成后是否可以在下拉列表中显示所选项目的背景（理想情况下不使用javascript）

Answer 1

是的，是可能的

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/

Answer 2

您可以使用Chosen库

来完成此操作

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

Answer 3

当CSS4引入父选择器时，它可能是可能的，但是现在没有办法根据子节点设置父节点的样式。与此同时，这是一个简单的JS解决方案：

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

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

Answer 4

这可以通过一些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专家），看看上面的答案，找到基本相同的更简单的例子。

Answer 5

此语法在XHTML中有效，但在IE6中不起作用，但这是一种非JavaScript方式，如您所要求的那样：

option[selected] { background: #f00; }

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

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

5 个答案: