jQuery更改背景颜色如果

时间:2013-11-10 23:02:06

标签: jquery

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

<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>

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

2 个答案:

答案 0 :(得分: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');
});

答案 1 :(得分:0)

使用

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

Working example