javascript省市二级联动效果

来源：互联网发布：node v6.10.2 x64.msi 编辑：程序博客网时间：2024/05/17 06:28
<!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>
1 0