javascript - 可以设置选择元素的样式，以便在下拉列表 'closed' 时显示所选选项的样式？

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/ )您可以看到每个选项都有自己的背景颜色。

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

是否可以在选择完成后在下拉列表中显示所选元素的背景(最好不使用 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/