jQuery：更改内容更改选择背景

Question

我有以下选择：

<select class="state">
    <option value="1">Done</option>
    <option value="2">Closed</option>
    <option value="2">Open</option>
    <option value="2">Working on it</option>
    <option value="2">Waiting</option>
</select>

以下脚本根据其内容更改颜色：

$('.state option:selected').each(function(){
    var state = $(this).text();
    if(state == 'Open') {
        $(this).parent().parent().css('background-color', '#e74c3c');
    } else if(state == 'Working on it') {
        $(this).parent().parent().css('background-color', '#f1c40f');
    } else if(state == 'Closed') {
        $(this).parent().parent().css('background-color', '#c0392b');
    } else if(state == 'Waiting') {
        $(this).parent().parent().css('background-color', '#d35400');
    } else if(state == 'Done') {
        $(this).parent().parent().css('background-color', '#27ae60');
    } else {
        $(this).parent().parent().css('background-color', '#bdc3c7');
    }
});
$('select').change(
    function (){
        var color = $('option:selected',this).css('background-color');
        $(this).css('background-color',color);
    }
).change();

但是这个脚本没有做什么：如果改变select的值，它不会改变颜色。 另外我确信，这段代码可能会短得多。

select有一个类，因为这个select会在一个页面上出现多次。

Answer 1

您没有正确检查状态。你应该：

var state = $('.state option:selected').text()

Answer 2

1. 使用addClass和removeClass
2. 使用data- *设置要添加的类
3. 在课程中设置样式
4. 在添加所选选项的类之前删除所有类
＆＃13;
＆＃13;
$('.state').change(function() {
$(this).parent().parent().removeClass("default done closed open working waiting");
  var state = $("option:selected", this).attr("data-class");
  $(this).parent().parent().addClass(state);

}).change();
＆＃13;
.done {
  background-color: #27ae60;
}

.closed {
  background-color: #c0392b;
}

.open {
  background-color: #e74c3c;
}

.working {
  background-color: #f1c40f;
}

.waiting {
  background-color: #d35400;
}

.default {
  background-color: #bdc3c7;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div>
    <select class="state">
    <option value="1" data-class="done">Done</option>
    <option value="2" data-class="closed">Closed</option>
    <option value="2" data-class="open">Open</option>
    <option value="2" data-class="working">Working on it</option>
    <option value="2" data-class="waiting">Waiting</option>
</select>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;