jquery - 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").on('change', function() {
    $("body").css("background", this.value);
});

小提琴

编辑：

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

$("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. */ });

工作示例