省市聯動效果

下拉框二級聯動效果在平常應用場景中常常會碰到，尤爲是涉及地區、品種等有多級選項時。例如：常見的省市聯動下拉框，在選擇省份時，城市列表也會更隨改變。

思路：

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！