jquery - 使用jquery从下拉菜单中更改html标签的背景颜色

Question

所以我有这个选择标签

<select id="patient_color_id" name="patient[color_id]">
 <option selected="selected" value="1">blue</option>
 <option value="2">yellow</option>
 <option value="3">green</option>
 <option value="4">red</option>
</select>

值 0...4 来自数据库，因此我无法将它们更改为十六进制颜色值。无论如何，在我的 jquery 文件中我有

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#00FFFF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#F0FFFF");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#0FFFFF");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#FFFFFF");
}
});

因此，当我从下拉菜单中选择颜色时，一般信息 div 的背景颜色应该发生变化，但没有任何反应，我无法弄清楚出了什么问题。

ps。我正在使用 Rails，但我不认为这有什么关系。我使用的所有其他脚本都工作正常。

Answer 1

我将您的代码复制到 jsFiddle 中并添加到 GeneralInfo div 中，您的代码似乎工作正常。我要做的唯一观察是，您的某些颜色值显示为白色，可能是无效的颜色十六进制值，因此可能会误导您。如果有帮助，您可以在此处查看 jsFiddle。我建议包裹在但这并不重要，因为您必然会发生更改事件。

这是 jsFiddle http://jsfiddle.net/danieljordan13/G7v9r/

我唯一改变的是颜色值到我知道有效的随机值。

$("#patient_color_id").change(function(){
if($(this).val() == "1"){
    $(".general-info").css('background-color', "#ddbbFF");
}
if($(this).val() == "2"){
    $(".general-info").css('background-color', "#aaddFF");
}
if($(this).val() == "3"){
    $(".general-info").css('background-color', "#cceeFF");
}
if($(this).val() == "4"){
    $(".general-info").css('background-color', "#bbbbFF");
}
});