javascript - 更改单击选项上的选择框 CSS

Question

我正在尝试根据选择的选项向select元素添加一个类。

HTML

<select class="wordpress">
  <option value="1" class="wordpress">Hello</option>
  <option value="2" class="joomla">2222</option>
  <option value="3" class="wordpress">33333</option>
  <option value="4" class="joomla">44444</option>
</select>

CSS

select{
  margin-top:50px;
  padding:10px;
  font-size:30px;
  border:1px solid #ccc;
}
.wordpress{
  background:url('http://muabanraovat.com/images/imgWordpress32.png') no-repeat center left transparent;
  padding-left:35px;
}
.joomla{
  background:url('https://a6a8g7g5.ssl.hwcdn.net/icons/22/216447/icon.png') no-repeat center left transparent;
  padding-left:35px;
}

JS

$(document).ready(function($){
    $('select').change(function(){
        $(this).removeClass().addClass('wordpress');
    });
});

CSS 甲板:http://cssdeck.com/labs/vmbenx2c

Answer 1

$(this).removeClass().addClass(this.options[this.selectedIndex].className);

https://jsfiddle.net/hL3x1owm/