通过javascript控制option属性的样式问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>brother child demo</title>
<script type="text/javascript">
window.onload = function()
{
var ul = document.getElementById('parent');
/*  hack for gecko */
for(var i = 0; i < ul.childNodes.length; i ++)
{
ul.childNodes[i].onmouseover = function() // 定义当鼠标划过时需要执行的程序
{
if(this.previousSibling) // this指针指向当前对象，这里指ul.childNodes[i]
{
this.previousSibling.style.backgroundColor = '#ff0';
}
if(this.nextSibling)
{
this.nextSibling.style.backgroundColor = '#ff0';
}
this.style.backgroundColor = '#f00';
}
ul.childNodes[i].onmouseout = function() // 定义当鼠标划离时需要执行的程序
{
if(this.previousSibling) // this指针指向当前对象，这里指ul.childNodes[i]
{
this.previousSibling.style.backgroundColor = '#fff';
}
if(this.nextSibling)
{
this.nextSibling.style.backgroundColor = '#fff';
}
this.style.backgroundColor = '#fff';
}
}
}
</script>
</head><body>
<ul id="parent">
     <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
    </ul>
</body>
</html>
为什么能显示效果
而把
<ul id="parent">
     <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
        <li>child node</li>
    </ul>
改成
<select id="parent">
     <option>child node</option>
<option>child node</option>
<option>child node</option>
<option>child node</option>
<option>child node</option>
<option>child node</option>
<option>child node</option>
<option>child node</option>
     </select>
就不能显示相应的效果了

解决方案 »

  1.   

    var ul = document.getElementById('parent');
    LZ,你这定义的ul怎么和<ul id="parent">
    中的ul一样啊?
      

  2.   

    2个问题：
    1.option没有事件，也就是说只能给select添加事件，所以给option添加onmouseover事件是无效的
    2.在遍历select节点时，option中的内容也会算在节点内，也就是说length是16而不是8，所以楼主再取节点时最好滤去文本节点，如：if(ul.childNodes.nodeType != 1)continue;
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var len = $("#parent").find("option").length;
    $("#parent").mousemove(function(event){
     var evt = window.event || event;
         var ySize = evt.pageY || evt.clientY;
         var h = ySize - $(this).offset().top;
         var indx = Math.floor(h / $(this).find("option:first").height());
         $(this).find("option:eq(" + (indx-1) + ")").css("background","red").siblings().css("background","white");
         if(indx != 0 || indx != len - 1){
            $(this).find("option:eq(" + (indx - 2) + ")").css("background","green").end().find("option:eq(" + indx + ")").css("background","green");
         }
     $("#position").html(indx);
    });
    });

    </script>
    </head>
    <body>
    <select id="parent">
    <option>child node</option>
    <option>child node</option>
    <option>child node</option>
    <option>child node</option>
    <option>child node</option>
    <option>child node</option>
    </select>
    </body>
    </html>乱写的一个效果，感觉不好看，楼主可以看看是不是和你的那个效果有点像
      

  4.   

    没考虑兼容性，在FF下可以看，IE下貌似这个方法行不通，这个不是什么好方法，回头我再改改