省市聯(lián)動(dòng)效果 源碼下載

對(duì)于省市聯(lián)動(dòng)的效果，在大部分的項(xiàng)目我們都會(huì)涉及的，開始剛工作的時(shí)候真心害怕這個(gè)東西。不知道如何下手去寫。后來在我們技術(shù)老大的帶領(lǐng)下用angular寫的省市聯(lián)動(dòng)效果，真心不錯(cuò)。但是有些項(xiàng)目我們不需要加載angular。今天我們就單獨(dú)拿出來用JS 看看如何實(shí)現(xiàn)省市聯(lián)動(dòng)的效果吧。

第一步： 分析一下思路

常見的省市聯(lián)動(dòng)下拉框，在選擇省份時(shí)，城市列表也會(huì)更隨改變。所謂聯(lián)動(dòng)效果，是指出發(fā)父級(jí)的數(shù)據(jù)變化時(shí)，會(huì)影響到關(guān)聯(lián)性子級(jí)數(shù)據(jù)元素的變化。

我們用簡單的案例來一起看看：

 var linkDatas = {
     provinces:[
         {
             "code":"0",
             "name":"請(qǐng)選擇"
         },
         {
             "code":"1",
             "name":"北京"
         },
         {
             "code":"2",
             "name":"天津"
         },
         {
             "code":"3",
             "name":"河北"
         },
         {
             "code":"4",
             "name":"湖北"
         },
         {
             "code":"5",
             "name":"廣東"
         },
         {
             "code":"6",
             "name":"其他"
         }
     ],
 citys:{
      0:[
          "請(qǐng)選擇"
        ],
     1:[
          "朝陽區(qū)",
          "海淀區(qū)",
          "東城區(qū)",
          "西城區(qū)",
          "房山區(qū)",
          "其他"
       ],
     2:[
          "天津"
       ],
    3:[
         "滄州",
         "石家莊",
         "秦皇島",
         "其他"
       ],
     4:[
         "武漢市",
         "宜昌市",
         "襄樊市",
         "其他"
       ],
    5:[
         "廣州市",
         "深圳市",
         "汕頭市",
         "佛山市",
         "珠海市",
         "其他"
      ],
    6:[
         "其他"
      ]
    }
 };

第二步，根據(jù)數(shù)據(jù)動(dòng)態(tài)生成option節(jié)點(diǎn)：

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);
     }
 }

第三步，當(dāng)省級(jí)的數(shù)據(jù)變更時(shí)，出發(fā)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">
    <h4>下拉框聯(lián)動(dòng)效果</h4>
    <p>省份：
        <select name="provinces" id="provinces"> </select>
    </p>
    <p>
        市：
        <select name="citys" id="citys"> </select>
    </p>
 </div>

JS 部分

var linkDatas = {
            provinces:[
                {
                    "code":"0",
                    "name":"請(qǐng)選擇"
                },
                {
                    "code":"1",
                    "name":"北京"
                },
                {
                    "code":"2",
                    "name":"天津"
                },
                {
                    "code":"3",
                    "name":"河北"
                },
                {
                    "code":"4",
                    "name":"湖北"
                },
                {
                    "code":"5",
                    "name":"廣東"
                },
                {
                    "code":"6",
                    "name":"其他"
                }
            ],
            citys:{
                0:[
                    "請(qǐng)選擇"
                ],
                1:[
                    "朝陽區(qū)",
                    "海淀區(qū)",
                    "東城區(qū)",
                    "西城區(qū)",
                    "房山區(qū)",
                    "其他"
                ],
                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
                }]);

                /*添加聯(lián)動(dòng)事件*/
                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);

今天就分享到這里，昨晚沒我們家倆個(gè)寶貝折騰的困的不行了。祝大家學(xué)習(xí)愉快了！ 喜歡就動(dòng)手分享去大家把！