javascript省市二级联动效果

下拉框二级联动实现

最新推荐文章于 2020-12-20 20:07:16 发布

啊哈前端

最新推荐文章于 2020-12-20 20:07:16 发布

阅读量623

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的下拉框二级联动效果。通过预定义的地区数据字典，当用户选择省份时，相应的城市选项会自动更新。此方法适用于网页表单中需要显示地理位置层级的应用场景。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框二级联动</title>
</head>
<body>
<p>省级：<select id="provinces"></select></p>
<p>市级：<select id="citys"></select></p>
<script type="text/javascript">
    window.onload=function(){
         /* 联动效果，地区数据字典
         * code代表被绑定的二级菜单标示符
         * */
        var linkDatas={
            provinces: [
                {
                    "code":"0",
                    "name":"请选择"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"广东"
                }
            ],
            citys: {
                0:[
                        "请选择"
                ],
                1:[
                        "朝阳区",
                        "海淀区",
                        "东城区",
                        "西城区",
                        "房山区",
                        "其他"
                ],
                2:[
                        "天津"
                ],
                3:[
                        "沧州",
                        "石家庄",
                        "秦皇岛",
                        "其他"
                ],
                4:[
                        "武汉市",
                        "宜昌市",
                        "襄樊市",
                        "其他"
                ],
                5:[
                        "广州市",
                        "深圳市",
                        "汕头市",
                        "佛山市",
                        "海珠市",
                        "其他"
                ],
                6:[
                        "其他"
                ]
            }
        };
        function linkage(parents,childs){ // parents:省级  childs:市级
            var _linkDatas=linkDatas,  //数据字典
                    _parents=_linkDatas.provinces,//省级数据
                    _childs=_linkDatas.citys,  //市级数据
                    _initCity=_childs[0];   //市级 数组第一个
                    _p=[];               //存储每次变化后的数据数组
            /*初始化数据*/
            for(var i in _parents){ //循环读取省级的数据
                _p.push({              //将省的数据放入数组
                    "text": _parents[i].name, //省的name属性
                    "value": _parents[i].code  //省的code属性
                });
            }
            addOptions(parents,_p);//给省级的select添加option元素
            addOptions(childs,[{"value": _initCity,"text": _initCity}]);//给市级的select添加option元素(第一次运行添加一个默认的值)
            parents.onchange=function(){ //联动事件绑定及具体业务处理
                    var __childs=_childs[this.value],//寻找与省关联的市级数据
                        _childsLen=__childs.length,
                                l=0,
                                _p=[]; //更换省级的时候清空保存市级数据的数组
                                childs.innerHTML=""; //更换省级的时候清空市级select的内容
                                for(;l<_childsLen;l++){
                                    _p.push({
                                        "value": __childs[l],
                                        "text": __childs[l]
                                    });
                                }
                                addOptions(childs,_p);
            }
        }
        function addOptions(target,optons){ //动态添加option到下拉框
            var _option=null,               //target：select元素
                    ol=optons.length,       //optons：要追加的options元素
                    i= 0,
                    _v="",
                    _t="";
            for(;i<ol;i++){
                _v=optons[i].value;
                _t=optons[i].text;
                _option=document.createElement("option");
                        _option.value=_v;
                        _option.text=_t;
                        target.options.add(_option); //add()：给select添加option的html dom方法
            }
        }
        linkage(
                document.getElementById("provinces"),
                document.getElementById("citys")
        );
    }
</script>
</body>
</html>