我正在尝试根据所选值返回的值更改背景颜色。我有以下代码,但我没有得到任何地方:
<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就绪处理程序不在那里(我现在添加),选择背景颜色仍然没有改变。我从选择框中取错了值吗?有没有办法输出值,所以我可以检查它确实得到正确的值或任何值。
答案 0 :(得分:5)
你需要一个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
中的元素下面