js二级联动*本地

最新推荐文章于 2024-03-19 04:01:02 发布

AIBottle

最新推荐文章于 2024-03-19 04:01:02 发布

阅读量508

点赞数

分类专栏：下拉列表的联动

本文链接：https://blog.csdn.net/AIBottle/article/details/50948157

版权

下拉列表的联动专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        select{
            margin-left: 10px;
        }
    </style>
    <script>
        /*Created by Administrator on 2016/3/21.*/
        var seles=[
            {"id":10,"name":'北京',"children":[
                {"id":101,"name":'北京市',"children":[
                    {"id":1010,"name":'东城区'},
                    {"id":1011,"name":'西城区'},
                    {"id":1012,"name":'朝阳区'},
                    {"id":1013,"name":'丰台区'},
                    {"id":1014,"name":'石景山区'},
                    {"id":1015,"name":'海淀区'},
                    {"id":1016,"name":'门头沟区'},
                    {"id":1017,"name":'房山区'},
                    {"id":1018,"name":'通州区'},
                    {"id":1019,"name":'顺义区'},
                    {"id":1020,"name":'昌平区'},
                    {"id":1021,"name":'大兴区'},
                    {"id":1022,"name":'怀柔区'},
                    {"id":1023,"name":'平谷区'},
                    {"id":1024,"name":'密云县'},
                    {"id":1025,"name":'延庆县'},
                    {"id":1026,"name":'其他'}
                ]},
            ]},
            {"id":20,"name":'天津',"children":[
                {"id":201,"name":'天津市',"children":[
                    {"id":2010,"name":'和平区'},
                    {"id":2011,"name":'河东区'},
                    {"id":2012,"name":'河西区'},
                    {"id":2013,"name":'南开区'},
                    {"id":2014,"name":'河北区'},
                    {"id":2015,"name":'红桥区'},
                    {"id":2016,"name":'塘沽区'},
                    {"id":2017,"name":'东丽区'},
                    {"id":2018,"name":'西青区'},
                    {"id":2019,"name":'津南区'},
                    {"id":2020,"name":'北辰区'},
                    {"id":2021,"name":'武清区'},
                    {"id":2022,"name":'宝坻区'},
                    {"id":2023,"name":'宁河县'},
                    {"id":2024,"name":'静海县'},
                    {"id":2025,"name":'蓟县'}
                ]}
            ]}
        ];
        function createSelect(arr){
            var sel=document.createElement("select");
            sel.add(new Option("-请选择-"));
            for(var i=0;i<arr.length;i++){
                sel.add(new Option(arr[i].name,arr[i].id));
            }
            sel.onchange=function(){
                while(this.nextSibling!=null){
                    this.nextSibling.parentNode.removeChild(this.nextSibling);
                }
                var i=this.selectedIndex-1;
                if(i!=-1){
                    if(arr[i].children){
                        createSelect(arr[i].children)
                    }
                }
            }
            document.getElementById("sele").appendChild(sel)
        }
        window.onload=function(){
            createSelect(seles);
        }
    </script>
</head>
<body>
    <div id="sele"></div>
</body>
</html>

AIBottle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js二级联动*本地

html>html>head lang="en"> meta charset="UTF-8"> title>title> style> select{ margin-left: 10px; } style> script> /*Created by Administrator on
复制链接

扫一扫

专栏目录