省市聯(lián)動效果的簡單實現(xiàn)代碼(推薦)

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

下面小編就為大家?guī)硪黄∈新?lián)動效果的簡單實現(xiàn)代碼(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

思路：

1，所謂聯(lián)動效果，是指出發(fā)父級的數(shù)據(jù)變化時，會影響到關聯(lián)性子級數(shù)據(jù)元素的變化。

下面是造的省市的數(shù)據(jù)：

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:[
          "朝陽區(qū)",
          "海淀區(qū)",
          "東城區(qū)",
          "西城區(qū)",
          "房山區(qū)",
          "其他"
        ],
        2:[
          "天津"
        ],
        3:[
          "滄州",
          "石家莊",
          "秦皇島",
          "其他"
        ],
        4:[
          "武漢市",
          "宜昌市",
          "襄樊市",
          "其他"
        ],
        5:[
          "廣州市",
          "深圳市",
          "汕頭市",
          "佛山市",
          "珠海市",
          "其他"
        ],
        6:[
          "其他"
        ]
      }
      };

2，根據(jù)數(shù)據(jù)動態(tài)生成option節(jié)點：

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代表“省級”指向“城市”的標識符，當省級的數(shù)據(jù)變更時，出發(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)動效果</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:[
          "朝陽區(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)動事件*/
        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)動效果的簡單實現(xiàn)代碼(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: