联动下拉列表--省市级联的操作 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript">
        function selectCity() {
            var collCities = [ ['选择城市'],[ '海淀区','朝阳区','西城区', '东城区' ], 
                    [ '济南', '青岛', '烟台', '日照' ],
                    [ '石家庄', '保定', '邯郸', '廊坊' ],             
                    [ '沈阳', '大连', '铁岭', '抚顺' ] ];
            //获取两个下拉菜单对象
            var oSelNode=document.getElementById("selid");        
            var oSubSelNode=document.getElementById("subselid");
            
            //获取到底选的是哪个省
            var index=oSelNode.selectedIndex;
            //通过角标到容器去获取对应的城市数组
            var arrCities=collCities[index];
            
            //将城市列表的子菜单中的内容清空一下
                        //将for循环中的x++去掉了，原因是removeChild的删除
                       //的方式是，指针指向第一个删除的元素删除成功后指针会向前移动，
                       //同时数组内的元素会因为删除出现的空位整体向前移动，这用就会
                       //漏删，去掉x++就会是指针保持在0角标的位置，删除一个数组元素，
                       //出现空位后，后面的元素会移动将空位补全，这样就可以完全删除
            for(var x=0;x<oSubSelNode.options.length;x++){
                oSubSelNode.removeChild(oSubSelNode.options[x]);
            }

                              //清除动作，也可以完成上面同样的方法
                //oSubSelNode.length = 0;
            
            //遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单    中        
                       
            for(var x=0;x<arrCities.length;x++){
                var oOptNode=document.createElement("option");
                oOptNode.innerHTML=arrCities[x];
                oSubSelNode.appendChild(oOptNode);
            }
                    
        }
    </script>
    <select id="selid" onchange="selectCity()">
        <option>选择省市</option>
        <option value="beijing">北京</option>
        <option>山东</option>
        <option>河北</option>
        <option>辽宁</option>
    </select>
    <select id="subselid">
        <option>请选择城市</option>
    </select>
</body>
</html>

 

posted @ 2016-11-25 12:15  wuyongwork  阅读(1725)  评论(0)    收藏  举报