好了,你可以使用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