js多级联动

最新推荐文章于 2023-09-23 13:15:52 发布

weixin_30659829

最新推荐文章于 2023-09-23 13:15:52 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/family-spring/p/5428016.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0px;padding:0px;}
        #box{height:30px;width:100%;margin:20px auto;text-align: center;}
        #box select{border:1px solid #CCC;margin:0px 5px;}
    </style>
    <script type="text/javascript">
        var data = {
            "0":[
                {"cityid":"1","cityname":"北京","pid":"0"},
                {"cityid":"15","cityname":"上海","pid":"0"},
                {"cityid":"16","cityname":"重庆","pid":"0"},
                {"cityid":"70","cityname":"四川省","pid":"0"}
            ],
            "1":[
                {"cityid":"2","cityname":"朝阳区","pid":"1"},
                {"cityid":"10","cityname":"丰台区","pid":"1"},
                {"cityid":"18","cityname":"海淀区","pid":"1"},
                {"cityid":"20","cityname":"东城区","pid":"1"},
                {"cityid":"21","cityname":"石景山区","pid":"1"},
                {"cityid":"22","cityname":"通州区","pid":"1"},
                {"cityid":"23","cityname":"大兴区","pid":"1"},
                {"cityid":"24","cityname":"昌平区","pid":"1"}
            ],
            "2":[
                {"cityid":"3","cityname":"大望路","pid":"2"},
                {"cityid":"4","cityname":"三里屯 ","pid":"2"},
                {"cityid":"5","cityname":"国贸 ","pid":"2"}],
            "10":[
                {"cityid":"11","cityname":"青塔","pid":"10"},
                {"cityid":"12","cityname":"北大地","pid":"10"}
            ],
            "18":[
                {"cityid":"35","cityname":"双榆树","pid":"18"}
            ],
            "35":[
                {"cityid":"60","cityname":"双安商场 ","pid":"35"}
            ],
            "15":[
                {"cityid":"65","cityname":"黄浦区","pid":"15"},
                {"cityid":"66","cityname":"卢湾区","pid":"15"},
                {"cityid":"67","cityname":"徐汇区 ","pid":"15"}
            ],
            "16":[
                {"cityid":"68","cityname":"渝中区","pid":"16"},
                {"cityid":"69","cityname":"大渡口区","pid":"16"}
            ],
            "70":[
                {"cityid":"72","cityname":"成都市","pid":"70"},
                {"cityid":"73","cityname":"高新区","pid":"70"},
                {"cityid":"74","cityname":"武侯区 ","pid":"70"}
            ]
        }
        window.οnlοad=function(){
            var oBox=document.getElementById('box');
            creatSelect(0);
            function creatSelect(pid){
                if(data[pid]==undefined) return;
                var oSelect=document.createElement('select');
                oBox.appendChild(oSelect);
                for(var i=0;i<data[pid].length;i++){
                    var oOption=document.createElement('option');
                    oOption.innerHTML=data[pid][i].cityname;
                    oOption.value=data[pid][i].cityid;
                    oSelect.appendChild(oOption);
                    if(i==0){
                        creatSelect(data[pid][i].cityid);
                    }
                }
            }

            var aSelect=document.getElementsByTagName('select');
            for(var i=0;i<aSelect.length;i++){
                aSelect[i].index=i;
                aSelect[i].οnchange=function(){
                    var pid=this.value;
                    var len=aSelect.length;
                    for(var j=this.index+1;j<len;j++){
                        oBox.removeChild(aSelect[this.index+1])
                    }
                    creatSelect(pid);
                }
            }
        }
    </script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

转载于:https://www.cnblogs.com/family-spring/p/5428016.html

weixin_30659829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js多级联动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0px;padding:0px;} #box{height:30px;w...
复制链接

扫一扫

js多级联动

“相关推荐”对你有帮助么？