可能要样式选择元素，所以选择选项的样式，当下拉'关闭'显示？ [英] Possible to style select element so style of selected option is shown when dropdown 'closed'?

问题描述

给定这个简单的html，

Given this simple html,

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

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

(http://jsfiddle.net/DxK47/) You can see that each option has it's own background colour.

不幸的是，当选择了任何选项（使下拉列表关闭），背景保持为白色（或任何默认的页面）。

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

可以使选定项目的背景为

Is it possible to have the background of the selected item be displayed in the dropdownlist after the selection has been made (ideally without using javascript)

推荐答案

是可以的

JS：

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

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

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

并移除; from second option

and remove the ; from second option

< option style =background：＃f00;> b< / option&

到

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

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

这篇关于可能要样式选择元素，所以选择选项的样式，当下拉'关闭'显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！