在选择>选项更改时更改颜色

Question

我正在尝试一些非常基础的东西，但是我无法解决……

非常简单，但我要绕圈说：当选中带有RESET文本的OPTION时，我希望页面中BODY的背景变为橙色。

如果是数字（1、2或3），则背景变为白色。

这是我的代码： http : //jsfiddle.net/PQW88/2/

$( document ).ready(function() {

    var reset = $('option:selected').text();

    if (reset === 'reset') {
        $('body').css('background-color', 'orange');
    }
    else {
        $('body').css('background-color', 'white');
    }

});

由于它始终为橙色，因此似乎没有正确定位的目标，没有任何错误...

提前致谢！！！

Answer 1

您尚未使用此功能：

$('select').change(function () {
  var reset = $('option:selected').text();
  if (reset === 'reset') {
    $('body').css('background-color', 'orange');
  } else {
    $('body').css('background-color', 'white');
  }
}

您只需要select及其change事件。 然后功能将继续。

Answer 2

您需要使用change（）事件来检测您选择的值是否已更改：

$( document ).ready(function() {

    $('select').on('change',function() {
        var reset = $('option:selected').text();
        if (reset === 'reset') {
            $('body').css('background-color', 'orange');
        }
        else {
            $('body').css('background-color', 'white');
        }
    });

});

更新的演示