在選擇>選項更改時更改顏色

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');
        }
    });

});

更新的演示