码迷,mamicode.com
首页 > 其他好文 > 详细

省市联动效果

时间:2016-06-06 09:07:22      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

思路:

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!

省市联动效果

标签:

原文地址:http://www.cnblogs.com/White-Quality/p/5562692.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!