Javascript：设置BackgroundColor <select>项目

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

直接在<option> -elements上设置backgroundColor ：

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

看工作小提琴 - > http://jsfiddle.net/4eqx5/

Answer 3

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

Javascript：设置BackgroundColor <select>项目

问题描述

3 个解决方案

解决方案1
2 2014-02-19 14:18:22

解决方案2
2 2014-02-19 14:18:29

解决方案3
-1 2014-02-19 14:15:26

Javascript：设置BackgroundColor <select>项目

问题描述

3 个解决方案

解决方案1 2 2014-02-19 14:18:22

解决方案2 2 2014-02-19 14:18:29

解决方案3 -1 2014-02-19 14:15:26

解决方案1
2 2014-02-19 14:18:22

解决方案2
2 2014-02-19 14:18:29

解决方案3
-1 2014-02-19 14:15:26