DIV CSS 佈局教程網

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

思路：

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

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

以上這篇省市聯動效果的簡單實現代碼(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。