Ok, vì vậy bạn có thể sử dụng jquery để đọc class
của chọn option
sau đó thiết lập rằng class
như class
của <select>
. Đây là mã, tiếp theo là một fiddle ...
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>
Dưới đây là fiddle: http://jsfiddle.net/DrydenLong/3QUN6/
CẬP NHẬT
Theo yêu cầu, đây là một phân tích về mã của tôi trên:
$("#color_me").change(function(){
Dòng này gọi là chức năng khi các yếu tố với id
của "color_me" được sửa đổi. tức là một tùy chọn từ danh sách lựa chọn được chọn.
var color = $("option:selected", this).attr("class");
này định nghĩa các biến color
như bất cứ class
của dòng chọn option
là. Biến số this
đề cập đến phần tử DOM mà chúng tôi đã tham chiếu trong dòng đầu tiên. Về cơ bản, this
đảm bảo rằng chúng tôi sắp xếp lớp học từ đúng <select>
tức là <select>
chúng tôi vừa nhấp vào.
$("#color_me").attr("class", color);
});
dòng này gán color
biến định nghĩa ở trên là class
của phần tử với id
của #color_me
.
Nguồn
2013-08-06 23:13:32
Tôi nghĩ bạn cần thao tác javscript để thực hiện việc này. – mshsayem
Bạn cũng cần áp dụng 'kiểu nền' cho thẻ'
bản sao có thể có của [chọn nhiều hộp màu nền đã chọn | css] (http://stackoverflow.com/questions/14168650/multi-select-box-selected-background-color-css) – KatieK