Question

以下代码在FF和Chrome中运行良好，但该设置在IE8中不起作用： - （

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
  function changeColor(id)
  {
    var selectName = "select" + id;
    var selectElement = document.getElementById(selectName);
    var selectValue = selectElement.value;
    var backColor = '#FFFFFF';
    if(selectValue == 'No')
    {
      backColor = 'lightcoral';
    }
    else
    {
      backColor = 'lightgreen';
    }
    selectElement.style.backgroundColor = backColor;
  }
</script>
</head>
...
<form name="update" action="update.php" method="post">
<select name="select1" id="select1" onchange="changeColor(1);" >
  <option>No</option>
  <option selected="selected">Yes</option>
</select>
...

在IE8中，下拉列表不会改变它的背景颜色。但是这个函数本身就被调用了。

如果我这样做

alert(selectElement.style);

我在IE8中获得了一个有效的对象：[object CSSStyleDeclaration]

Answer 1

保罗是完全正确的。

我正要写的是我注意到错误完全在于

而不是使用

var selectValue = selectElement.value;

我现在用

var selectValue = selectElement.options[selectElement.selectedIndex].value;

它有效！

谢谢保罗！

Answer 2

直接在backgroundColor - 元素

上设置<option>

for (var i=0;i<selectElement.children.length;i++) {
  selectElement.children[i].style.backgroundColor = backColor;
}

参见工作小提琴 - ＆gt;的 http://jsfiddle.net/4eqx5/

Answer 3

有很多特定于浏览器的CSS属性。使用Jquery没有这些问题。

Javascript：设置<selected> item </select>的背景颜色

3 个答案: