小程序 后台动态数据 省市二级联动

<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)　　　　　　 // 如果存在调用获取对应的省级数据
        }
      }
    })
  }
})

 

转载于:https://www.cnblogs.com/wangshishuai/p/10497369.html