省市联动效果

Posted 择哥灬仰望星空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了省市联动效果相关的知识,希望对你有一定的参考价值。

下拉框二级联动效果在日常应用场景中经常会碰到,尤其是涉及地区、品种等有多级选项时。例如:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变。

思路:

1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化。

下面是造的省市的数据:

var linkDatas = {
            provinces:[
                {
                    "code":"0",
                    "name":"请选择"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"广东"
                },
                {
                    "code":"6",
                    "name":"其他"
                }
            ],
            citys:{
                0:[
                    "请选择"
                ],
                1:[
                    "朝阳区",
                    "海淀区",
                    "东城区",
                    "西城区",
                    "房山区",
                    "其他"
                ],
                2:[
                    "天津"
                ],
                3:[
                    "沧州",
                    "石家庄",
                    "秦皇岛",
                    "其他"
                ],
                4:[
                    "武汉市",
                    "宜昌市",
                    "襄樊市",
                    "其他"
                ],
                5:[
                    "广州市",
                    "深圳市",
                    "汕头市",
                    "佛山市",
                    "珠海市",
                    "其他"
                ],
                6:[
                    "其他"
                ]
            }
            };
View Code

2,根据数据动态生成option节点:

function addOptions(target,options){
                var optionEle = null,
                        target = target,
                        option = options,
                        optionLen = options.length;
                for(var i = 0;i < optionLen;i++){
                    optionEle = document.createElement(\'option\');
                    optionEle.value = option[i].value;
                    optionEle.text = option[i].text;
                    target.options.add(optionEle);
                }
            }

3,根据上述省市数据,其中code代表“省级”指向“城市”的标识符,当省级的数据变更时,出发change事件:

pro.onchange = function(){
                    console.log(this);
                    var ct = city[this.value],
                            ctLen = ct.length,
                            ctBox = [];

                    c.innerhtml = "";    
                    /*添加城市*/    
                    for(var j = 0;j < ctLen;j++){
                        ctBox.push({
                            "text" : ct[j],
                            "value": ct[j]
                        });
                    }
                    addOptions(c,ctBox);
                }

HTML代码:

<div class="content">
            <h3>下拉框联动效果</h3>
            <p>省份:
                <select name="provinces" id="provinces">
                    
                </select>
            </p>
            <p>
                市:
                <select name="citys" id="citys">
                    
                </select>
            </p>
        </div>

全部javascript代码:

var linkDatas = {
            provinces:[
                {
                    "code":"0",
                    "name":"请选择"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"广东"
                },
                {
                    "code":"6",
                    "name":"其他"
                }
            ],
            citys:{
                0:[
                    "请选择"
                ],
                1:[
                    "朝阳区",
                    "海淀区",
                    "东城区",
                    "西城区",
                    "房山区",
                    "其他"
                ],
                2:[
                    "天津"
                ],
                3:[
                    "沧州",
                    "石家庄",
                    "秦皇岛",
                    "其他"
                ],
                4:[
                    "武汉市",
                    "宜昌市",
                    "襄樊市",
                    "其他"
                ],
                5:[
                    "广州市",
                    "深圳市",
                    "汕头市",
                    "佛山市",
                    "珠海市",
                    "其他"
                ],
                6:[
                    "其他"
                ]
            }
            };
            function addOptions(target,options){
                var optionEle = null,
                        target = target,
                        option = options,
                        optionLen = options.length;
                for(var i = 0;i < optionLen;i++){
                    optionEle = document.createElement(\'option\');
                    optionEle.value = option[i].value;
                    optionEle.text = option[i].text;
                    target.options.add(optionEle);
                }
            }
            function provincesCitysLink(pro,c){
                var LD                 = linkDatas,
                        provinces = LD.provinces,
                        city             = LD.citys,
                        initCity    = city[0],
                        proBox        = [];

                /*添加省份*/
                for(var i = 0;i < provinces.length;i++){
                    proBox.push({
                        "text" : provinces[i].name,
                        "value": provinces[i].code
                    })
                }        
                addOptions(pro,proBox);

                /*初始化城市*/
                addOptions(c,[{
                    "text" : initCity,
                    "value": initCity
                }]);

                /*添加联动事件*/
                pro.onchange = function(){
                    console.log(this);
                    var ct = city[this.value],
                            ctLen = ct.length,
                            ctBox = [];

                    c.innerHTML = "";    
                    /*添加城市*/    
                    for(var j = 0;j < ctLen;j++){
                        ctBox.push({
                            "text" : ct[j],
                            "value": ct[j]
                        });
                    }
                    addOptions(c,ctBox);
                }
            }
            var provinces = document.getElementById(\'provinces\'),
                    citys         = document.getElementById(\'citys\');
            provincesCitysLink(provinces,citys);

 

 

 

 

 

 

DEMO演示:CLICK ME!

以上是关于省市联动效果的主要内容,如果未能解决你的问题,请参考以下文章

29_用js实现一个省市级联效果

省市区县街道四级联动下拉菜单

使用JavaScript完成省市联动效果

省市二级联动

ajax省市区三级联动

jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果