二级联动浏览器兼容问题！！！


<!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>jQuery 二级联动</title> 
    <script type="text/javascript">
        var group = new Object();        group["无"] = new Array("无");
        group["铜管类"] = new Array("无", "小号", "长号", "圆号", "大号", "次中音号");
        group["木管类"] = new Array("无", "长笛", "单簧管(降B)", "双簧管", "巴松", "萨克斯(低音)");
        group["弦乐类"] = new Array("无", "小提琴", "中提琴", "大提琴", "低音提琴", "竖琴");
        group["打击乐类"] = new Array("无", "西洋打击乐", "民族打击乐");
        group["民乐类"] = new Array("无", "二胡", "中胡", "高胡", "琵琶", "柳琴", "中阮", "大阮", "三弦", "唢呐", "竹笛", "笙", "扬琴");
        group["声乐类"] = new Array("无", "民族唱法", "美声唱法");
        group["舞蹈类"] = new Array("无", "古典舞", "民间舞", "芭蕾舞", "现代舞");
        group["戏剧类"] = new Array("无", "话剧", "戏曲");
        group["主持类"] = new Array("无", "主持");
        group["曲艺类"] = new Array("无", "相声", "评书", "大鼓", "快板");        function onselect(id1, id2) {
            var drop1 = document.getElementById(id1);
            var drop2 = document.getElementById(id2);            while (drop2.options.length != 0) {
                drop2.options[0] = null;
            }
            var i = 0;            for (i = 0; i < group[drop1.value].length; i++) {
                var op = document.createElement("OPTION");
                op.value = group[drop1.value][i];
                op.text = group[drop1.value][i];
                drop2.options.add(op);
            }
        }        function firstload(id1, id2, value1, value2) {
            var drop1 = document.getElementById(id1);
            var drop2 = document.getElementById(id2);            for (var i = 0; i < drop1.options.length; i++) {
                if (drop1.options[i].value == value1)
                    drop1.options[i].selected = true;
            }            onselect(id1, id2);            for (var i = 0; i < drop2.options.length; i++) {
                if (drop2.options[i].value == value2)
                    drop2.options[i].selected = true;
            }
        }
</script>
  </head>
    <body>  
        <div align="center">  
             <select name="drop_zl" id="drop_zl" onchange="onselect('drop_zl','drop_zx')" style="background-color: LemonChiffon;
                width: 116px;">
                <option selected="selected" value="无">无</option>
                <option value="铜管类">铜管类</option>
                <option value="木管类">木管类</option>
                <option value="弦乐类">弦乐类</option>
                <option value="打击乐类">打击乐类</option>
                <option value="民乐类">民乐类</option>
                <option value="声乐类">声乐类</option>
                <option value="舞蹈类">舞蹈类</option>
                <option value="戏剧类">戏剧类</option>
                <option value="主持类">主持类</option>
                <option value="曲艺类">曲艺类</option>            
            </select>
            <select name="drop_zx" id="drop_zx" style="background-color: LemonChiffon; width: 116px;">
            </select>
  
        </div>  
    </body>  
</html>  
我自己做了一个js的二级联动，可是只能在ie下用，在chrome和搜狗高速下用，第二级菜单刷新不出来，求大神指导！！万分感谢！！！

解决方案 »

  1.   

    换个函数名，onselect是chrome的保留事件吧，导致出错了
            function OnSelect(id1, id2) {
                var drop1 = document.getElementById(id1);
                var drop2 = document.getElementById(id2);
     
                while (drop2.options.length != 0) {
                    drop2.options[0] = null;
                }
                var i = 0;
     
                for (i = 0; i < group[drop1.value].length; i++) {
                    var op = document.createElement("OPTION");
                    op.value = group[drop1.value][i];
                    op.text = group[drop1.value][i];
                    drop2.options.add(op);
                }
            }
     <select name="drop_zl" id="drop_zl" onchange="OnSelect('drop_zl','drop_zx')" style="background-color: LemonChiffon;
                    width: 116px;">