谁能帮我看看这段JS代码，怎么就实现不了背景替换

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script type ="text/javascript" >
    function optionColor()
    { 
       var oSel=document .getElementById("muchColor");
       var oOp=oSel .getElementsByTagName ("option");
       for (var i=0;i<oOp .length ;i++)
       {
          oOp[i].onmouseover=function (){this.className+='backColor';}
          oOp[i].onmouseout=function (){this.className=this.className.replace("backColor","");}
       }
    }
    </script>
     <style type ="text/css" >
       .backColor{ background-color :Red ; color:Yellow;}
    </style>
</head>
<body onload ="optionColor()"> 
    <form id="form1" runat="server">
    <div>
    
        <select id="muchColor" name="id1">
            <option value="red">红</option>
            <option value="blue">蓝</option>
            <option value="green">绿</option>
            <option value="purple">紫</option>
            <option value="black">黑</option>
        </select></div>
    </form>
</body>
</html>

解决方案 »

  1.   

    var oSel=document .getElementById("muchColor");
      var oOp=oSel .getElementsByTagName ("option");对象和方法用逗号连接，咋有空格？
      

  2.   

     oOp[i].onmouseover=function (){this.className+='backColor';}
    也不对吧？
      

  3.   

    for (var i=0;i<oOp .length ;i++)
      {
    (function(i){
      oOp[i].onmouseover=function (){this.className+=' backColor';}
      oOp[i].onmouseout=function (){this.className=this.className.replace(" backColor","");}
    })(i);
      }
      

  4.   

    经过下拉选项？你是说select还是option
    背景色是option的背景色还是整个背景色
      

  5.   

    这样试一下。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>无标题页</title>
      <script type ="text/javascript" >
      function optionColor()
      {
      var oSel=document.getElementById("muchColor");
      var oOp=oSel.getElementsByTagName ("option");
      oSel.onmouseover=function (){document.getElementById("aaa").style.backgroundColor=oOp[oSel.selectedIndex].value;};
      oSel.onmouseout=function (){document.getElementById("aaa").style.backgroundColor="white";};
      }
      </script>
      <style type ="text/css" >
      .backColor{ background-color:Red ; color:Yellow;}
      </style>
    </head>
    <body>  
      <form id="form1">
      <div id="aaa" style=" width:100px;height:100px;background:black;margin:10px;">
        
      <select id="muchColor" name="id1" OnChange="optionColor()">
      <option value="red">红</option>
      <option value="blue">蓝</option>
      <option value="green">绿</option>
      <option value="purple">紫</option>
      <option value="black">黑</option>
      </select></div>
      </form>
    <br>这里是内容。
    </body>
    </html>
      

  6.   

    你不用想了
    你的hover到的时候 会有蓝色的背景对吧
    即使你加上了背景 也会被这个蓝色覆盖的~~没有效果的~
      

  7.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>无标题页</title>
      <style type ="text/css" >
      .backColor{ background-color :Red ; color:Yellow;}
      </style>
    </head>
    <body onload ="optionColor()">  
      <form id="form1" runat="server">
      <div>
      <select id="muchColor" name="id1"  onchange="document.body.style.backgroundColor=document.getElementById('muchColor').value">
      <option value="red">红</option>
      <option value="blue">蓝</option>
      <option value="green">绿</option>
      <option value="purple">紫</option>
      <option value="black">黑</option>
      </select></div>
      </form>
    </body>
    </html>我想你应该是想要这种效果吧！
      

  8.   

    你这个是通过选择下拉颜色要改变文档的背景色吧，我要的是鼠标经过OPTION时，OPTION背景色是红色
      

  9.   

    鼠标经过下拉选项（option）时，选项(option)背景色就变成红色,系统默认的是蓝色
      

  10.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>无标题页</title>
      <style type ="text/css" >
      .backColor{ background-color :Red ; color:Yellow;}
      </style>
    </head>
    <body onload ="optionColor()">  
      <form id="form1" runat="server">
      <div>
      <select id="muchColor" name="id1"  onmouseover="this.className+='backColor'"  onfocus="this.className=this.className.replace('backColor',' ')" onblur="this.className='none'">
      <option value="red">红</option>
      <option value="blue">蓝</option>
      <option value="green">绿</option>
      <option value="purple">紫</option>
      <option value="black">黑</option>
      </select></div>
      </form>
    </body>
    </html>
      

  11.   

    <body onload ="optionColor()"> 
    上面这个onload事件忘了去掉了！！！
      

  12.   

    上面有点问题，再发一个！<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title>无标题页</title>
      <style type ="text/css" >
      .backColor{ background-color :Red ; color:Yellow;}
      </style>
    </head>
    <body>  
      <form id="form1" runat="server">
      <div>
      <select id="muchColor" name="id1"  onmouseover="this.className='backColor'"  onfocus="this.className='backColor'"  onblur="this.className=this.className.replace('backColor',' ')">
      <option value="red">红</option>
      <option value="blue">蓝</option>
      <option value="green">绿</option>
      <option value="purple">紫</option>
      <option value="black">黑</option>
      </select></div>
      </form>
    </body>
    </html>
      

  13.   

    不是这种效果，你这是所有的OPTION都是红色，我是要鼠标经过哪一项，哪一项就是红色
      

  14.   

    楼主这个代码，好像是针对FF的。IE里不行。
      

  15.   

    在IE里要有效果，就得用DIV模拟SELECT了。
      

  16.   

    http://www.aa25.cn/css_example/541.shtml