jQuery更改背景颜色如果

Question

我想知道如何用选择器改变背景颜色。这是我的代码：

<div id="example">
    <select id="worked">
        <option id="green">Green</option>
        <option id="orange">orange</option>
    </select>
</div>
<script>
$(document).ready(function(){ 

    var n = $("select option:selected")

    if (n == "green") {
        $("body").css("background", "green");
    } 
    else {
        $("body").css("background", "orange");
    }

});
</script>

所以如果我选择绿色，它不会显示也不会显示橙色。有什么想法吗？

Answer 1

这：

var n = $("select option:selected")

返回一个元素，而不是值：

var n = $("select option:selected").val();

也可以这样做：

var n = $("select").val();

因为选择值与所选选项相同，
但你可能想要勾选select的change事件，如下所示：

$("select").on('change', function() {
    $("body").css("background", this.value);
});

FIDDLE

修改

条件将背景设置为橙色，而不是绿色：

$("select").on('change', function() {
    if (this.value == 'green') {
        $("body").css("background", 'green');
    }else{
        $("body").css("background", 'orange');
    }
});

或：

$("select").on('change', function() {
    $("body").css("background", this.value == 'green'?'green':'orange');
});

Answer 2

使用

$('#worked').change(function() { /* triggered when select box changed. */ });

Working example