好了,你可以使用jQuery读取所选option
的class
然后设置class
作为<select>
的class
。下面是代码,随后小提琴...
CSS
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.pink {
background-color: pink;
}
jQuery的
$("#color_me").change(function(){
var color = $("option:selected", this).attr("class");
$("#color_me").attr("class", color);
});
HTML
<select id="color_me" class="">
<option class="green">successful</option>
<option class="orange">process failure</option>
<option class="pink">abandoned</option>
</select>
这里的小提琴:http://jsfiddle.net/DrydenLong/3QUN6/
UPDATE
每要求,这里是我上面的代码中的崩溃:当“color_me”的id
的元素被改变
$("#color_me").change(function(){
此行调用功能。即选择来自选择列表的选项。
var color = $("option:selected", this).attr("class");
此定义为任何当前的class
选择option
是变量color
。 this
变量指的是我们在第一行中引用的DOM元素。基本上this
确保我们从正确的<select>
即我们刚才点击的<select>
获得课程。
$("#color_me").attr("class", color);
});
这条线以上分配定义为具有的#color_me
的id
元件的class
的color
变量。
我想你需要javscript操作来做到这一点。 – mshsayem
您还需要将'background-style'应用于'
可能重复的[多选框中选择的背景颜色| css](http://stackoverflow.com/questions/14168650/multi-select-box-selected-background-color-css) – KatieK