快捷導(dǎo)航

省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)

更新時(shí)間：2016年06月06日 11:05:18 投稿：jingxian

下面小編就為大家?guī)?lái)一篇省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

下拉框二級(jí)聯(lián)動(dòng)效果在日常應(yīng)用場(chǎng)景中經(jīng)常會(huì)碰到，尤其是涉及地區(qū)、品種等有多級(jí)選項(xiàng)時(shí)。例如：常見(jiàn)的省市聯(lián)動(dòng)下拉框，在選擇省份時(shí)，城市列表也會(huì)更隨改變。

思路：

1，所謂聯(lián)動(dòng)效果，是指出發(fā)父級(jí)的數(shù)據(jù)變化時(shí)，會(huì)影響到關(guān)聯(lián)性子級(jí)數(shù)據(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:[
          "朝陽(yáng)區(qū)",
          "海淀區(qū)",
          "東城區(qū)",
          "西城區(qū)",
          "房山區(qū)",
          "其他"
        ],
        2:[
          "天津"
        ],
        3:[
          "滄州",
          "石家莊",
          "秦皇島",
          "其他"
        ],
        4:[
          "武漢市",
          "宜昌市",
          "襄樊市",
          "其他"
        ],
        5:[
          "廣州市",
          "深圳市",
          "汕頭市",
          "佛山市",
          "珠海市",
          "其他"
        ],
        6:[
          "其他"
        ]
      }
      };

2，根據(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);
        }
      }

3，根據(jù)上述省市數(shù)據(jù)，其中code代表“省級(jí)”指向“城市”的標(biāo)識(shí)符，當(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">
      <h3>下拉框聯(lián)動(dòng)效果</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":"請(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:[
          "朝陽(yáng)區(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);

以上這篇省市聯(lián)動(dòng)效果的簡(jiǎn)單實(shí)現(xiàn)代碼(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: