小程序基礎開發（四）：template模板應用(5)——自定義參數的三級聯動下拉選擇

一，自定義三級聯動

數組

{"sheng": "598", "di": "0", "xian": "0", "name": "安徽", "level":1},{"sheng": "598", "di": "1011", "xian": "0", "name": "安慶", "level":2},{"sheng": "598", "di": "1011", "xian": "14", "name": "懷寧縣", "level":3},{"sheng": "598", "di": "1011", "xian": "15", "name": "潛山縣", "level":3}

js

 data: {
    citysIndex: [0, 0, 0], //給一個初始值索引，因爲有三列，所以3個0
  },
  func_changeCitysChange: function (e) {
    var that = this;
    var cityArray = that.data.cityArray;
    var citykey = that.data.citykey;
    var address = '';
    if (that.data.ssq == undefined) {
      //下面方法中沒有設置ssq，應該給它默認值 ，此時citysIndex相當於[0,0,0]
      var citysIndex = that.data.citysIndex;
      for (let i in citysIndex) {
        address += (cityArray[i][citysIndex[i]] + '-')
      }
    } else {
      address = that.data.ssq;
    }
    address = address.substr(0, address.length - 1);//去掉最後一個字符
    this.setData({
      address: address
    })
    console.log('確認選擇', citykey)
  },
  func_changeCitysChangeColumn: function (e) {
    var that = this;
    var cityArray = that.data.cityArray;
    var arrays = that.data.arrays;
    var list1 = []; //存放第二列數據，即市的列
    var list2 = []; //存放第三列數據，即區的列
    var citysIndex = [];//數組索引
    var sheng;
    var di;
    var xian;
    //注意地址文件中的字段關係，省、市、區關聯的字段有 sheng、di、level。
    //var sheng var di;arrays[i]['sheng'] == sheng,arrays[i]['di'] == di 這些都是爲了首次加載給他賦默認值arr[0][0]
    switch (e.detail.column) {
      case 0:
        //滑動左列
        for (let i = 0, len = arrays.length; i < len; i++) {
          if (arrays[i]['name'] == cityArray[0][e.detail.value]) {
            sheng = arrays[i]['sheng'];
          }
          if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 2) {
            di = arrays[i]['di'];
            list1.push(arrays[i]['name']);
          }
          if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
            xian = arrays[i]['xian'];
            list2.push(arrays[i]['name']);
          }
        }
        citysIndex = [e.detail.value, 0, 0];
        var ssq = cityArray[0][e.detail.value] + '-' + list1[0] + '-' + list2[0] + '';
        that.setData({
          global_sheng: sheng,
          global_di: di
        });
        break;
      case 1:
        //滑動中列
        sheng = that.data.global_sheng == undefined ? arrays[0]['sheng'] : that.data.global_sheng;//首次加載，直接拉中間列，是沒有sheng這個值
        list1 = cityArray[1];
        for (let i = 0, len = arrays.length; i < len; i++) {
          if (arrays[i]['name'] == cityArray[1][e.detail.value]) {
            di = arrays[i]['di'];
          }
        }
        for (let i = 0, len = arrays.length; i < len; i++) {
          if (arrays[i]['sheng'] == sheng && arrays[i]['level'] == 3 && arrays[i]['di'] == di) {
            xian = arrays[i]['xian'];
            list2.push(arrays[i]['name']);
          }
        }
        citysIndex = [that.data.citysIndex[0], e.detail.value, 0];

        var ssq = cityArray[0][that.data.citysIndex[0]] + '-' + list1[e.detail.value] + '-' + list2[0] + '';
        that.setData({
          global_di: di
        });
        break;
      case 2:
        sheng = that.data.global_sheng == undefined ? arrays[0]['sheng'] : that.data.global_sheng;
        di = that.data.global_sheng == undefined ? arrays[1]['di'] : that.data.global_di;
        //滑動右列
        list1 = cityArray[1];
        list2 = cityArray[2];
        for (let i = 0, len = arrays.length; i < len; i++) {
          if (arrays[i]['name'] == cityArray[2][e.detail.value]) {
            xian = arrays[i]['xian'];
          }
        }
        citysIndex = [that.data.citysIndex[0], that.data.citysIndex[1], e.detail.value];

        var ssq = cityArray[0][that.data.citysIndex[0]] + '-' + list1[that.data.citysIndex[1]] + '-' + list2[e.detail.value] + '';
        break;
    }
    var citykey = [sheng, di, xian];
    that.setData({
      "cityArray[1]": list1,//重新賦值中列數組，即聯動了市
      "cityArray[2]": list2,//重新賦值右列數組，即聯動了區
      citysIndex: citysIndex,//更新索引
      ssq: ssq,//獲取選中的省市區
      citykey: citykey
    });
    //console.log('picker發送選擇改變，攜帶值爲', citykey)
  },

wxml

<picker name="comp_work_pcp" mode="multiSelector" bindchange="func_changeCitysChange" bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray}}">
	<view class="picker">
		{{address?address:'請選擇'}}
	</view>
</picker>