省市聯動效果 源碼下載

對於省市聯動的效果,在大部分的項目我們都會涉及的,開始剛工作的時候真心害怕這個東西。不知道如何下手去寫。後來在我們技術老大的帶領下用angular寫的省市聯動效果,真心不錯。但是有些項目我們不需要加載angular。今天我們就單獨拿出來用JS 看看如何實現省市聯動的效果吧。

shengshi

第一步: 分析一下思路

常見的省市聯動下拉框,在選擇省份時,城市列表也會更隨改變。所謂聯動效果,是指出發父級的數據變化時,會影響到關聯性子級數據元素的變化。

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

 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:[
         "其他"
      ]
    }
 };

第二步,根據數據動態生成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);
     }
 }

第三步,當省級的數據變更時,出發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>

JS 部分

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

今天就分享到這裏,昨晚沒我們家倆個寶貝折騰的困的不行了。祝大家學習愉快了! 喜歡就動手分享去大家把!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章