多选CSS条件格式

Question

我一直在寻找一种根据所选选项设置选择框样式的方法。数据来自Django，因此加载时会出现填充字段。

我一直在使用这个javascript / jQuery解决方案取得了一些成功。

Style <select> element based on selected <option>

基本思路是将所选的选项值移动到选择框中的一个类，以便您可以设置该类的样式。

我在这里所做的是将代码复制到两个部分。一旦在负载上运行而另一个在变化时运行。

$('select').attr('class', '').addClass($('select').children(':selected').val());

$('select').on('change', function(ev) {
  $(this).attr('class', '').addClass($(this).children(':selected').val());
});

这似乎不适用于加载时的多个选择框。

当加载代码找到第一个选择框然后将该类添加到页面上的所有选择框时会发生什么，所以基本上它不会遍历所有选择框并逐个运行。

根据更改选择值，第二位运行正常。

这是一个小提琴http://jsfiddle.net/9sx6fos7/

正如你所看到的那样，两个方框都会加载第一个类。

谢谢！