小程序 后台動態數據 省市二級聯動

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"  value="{{multiIndex}}" range="{{multiArray}}">
　　<view class="picker">
      當前選擇：{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
    </view>
</picker>

Page({
  data: {
    multiIndex: []
  },
//市級
  searchClassInfo(xiaoqu_id) {
    var that = this;
    if (xiaoqu_id) {
      this.setData({
        pid: xiaoqu_id
      }, () => {
        wx.request({
          url: 'http://192.168.3.137:81/api/v2/getCityListByProvinceId',
          https: '',
          method: "POST",
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
          data: {
            "province_id": that.data.pid
          },
          success: function(res) {
            console.log(res);
            var classList = res.data;
            var classArr = classList.map(item => {
              console.log(item.name)
              return item.name;
            })
            var xiaoquArr = that.data.xiaoquArr;
            that.setData({
              multiArray: [xiaoquArr, classArr],
              classArr,
              classList
            })
          }
        })
      })
    }
  },

  bindMultiPickerColumnChange: function(e) {
    //e.detail.column 改變的數組下標列, e.detail.value 改變對應列的值
    console.log(e);
    console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };

    data.multiIndex[e.detail.column] = e.detail.value;
    var pid_session = this.data.pid;　　　　 // 保持之前的省id 與新選擇的id 做對比，如果改變則重新請求數據
    switch (e.detail.column) {
      case 0:
      var xiaoquList = this.data.xiaoquList;
        var pid = xiaoquList[e.detail.value]['id'];
        if (pid_session != pid) {　　　　 // 與之前保持的省id做對比，如果不一致則重新請求並賦新值
          this.searchClassInfo(pid);
        }
        data.multiIndex[1] = 0;
        break;
    }
    this.setData(data);
  },

  bindMultiPickerChange: function(e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    var class_key = 0;
    var classList = this.data.classList;
    var select_key = e.detail.value[1];
    var real_key = select_key - 1;
    if (real_key < class_key) {
      this.setData({
        cid: 0
      })
    } else {
      this.setData({
        cid: classList[real_key]['cid']　　　　　　 // class_id 代表着選擇的市級對應的 班級id
      })
    }
    this.setData({
      multiIndex: e.detail.value
    })
  },
//省級
  onLoad: function() {
    var that = this;
    wx.request({
      url: 'http://192.168.3.137:81/api/v2/getCityListByProvinceId',
      data: {
        province_id:1
      },
      method: "POST",
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: function(res) {
        console.log(res);
        var xiaoquList = res.data;
        console.log(xiaoquList)
        var xiaoquArr = xiaoquList.map(item => {　　　　 // 此方法將省名稱區分到一個新數組中
          console.log(item.name)
          return item.name;
        });
        console.log(xiaoquArr)
        that.setData({
          multiArray: [xiaoquArr, []],
          xiaoquList,
          xiaoquArr
        })
        var default_xiaoqu_id = xiaoquList[0]['id'];　　　　 //獲取默認的省對應的id
        if (default_xiaoqu_id) {
          that.searchClassInfo(default_xiaoqu_id)　　　　　　 // 如果存在調用獲取對應的省級數據
        }
      }
    })
  }
})