Question

我正在尝试根据所选值返回的值更改背景颜色。我有以下代码，但我没有得到任何地方：

<script>
$(document).ready(function() {
    $('#assessments').change(function(){
        if ($(this).val() == "0") {
            $('select').css('background-color', '#FF0000');
        } else if ($(this).val() == "1") {
            $('select').css('background-color', '#00FF00');
        } else if ($(this).val() == "2") {
            $('select').css('background-color', '#0000FF');
        }
    });
});
</script>

<select id='assessments'>
    <option value='0'>NYC</option>
    <option value='1'>C</option>
    <option value='2'>G</option>
</select>

编辑：好的除了DOM就绪处理程序不在那里（我现在添加），选择背景颜色仍然没有改变。我从选择框中取错了值吗？有没有办法输出值，所以我可以检查它确实得到正确的值或任何值。

Answer 1

你需要一个DOM就绪处理程序，因为脚本出现在DOM中的元素之前此外，您必须包含jQuery才能使用jQuery方法。

<script>
$(function() {

    $('#assessments').change(function(){
        if ($(this).val() == "0") {
            $('select').css('background-color', '#FF0000');
        } else if ($(this).val() == "1") {
            $('select').css('background-color', '#00FF00');
        } else if ($(this).val() == "2") {
            $('select').css('background-color', '#0000FF');
        }
    });

});

</script>

<select id='assessments'>
    <option value='0' selected>NYC</option>
    <option value='1'>C</option>
    <option value='2'>G</option>
</select>

另一个选择是将脚本移动到DOM

中的元素下面

更改选择更改值的css

1 个答案: