小程序省市区三级联动

小程序从数据库中读取省市区用多列选择器显示

wxml代码

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{areaIndex}}" range="{{areaList}}" range-key="name" class="search-picker">
          <block wx:if="{{!regionChoose}}">
          <view class="picker">
            <text>请选择公司地址</text>
          </view>
          </block>
          <block wx:else>
          <view class="picker">
            {{areaList[0][areaIndex[0]].name}},{{areaList[1][areaIndex[1]].name}},{{areaList[2][areaIndex[2]].name}}
          </view>
          </block>
 </picker>

js代码

data: {
    areaList: [],
    areaIndex: [0, 0, 0],
    regionChoose:false,//判断地区是否选择
    },
/**
     * 获取省
     */
  getProvince: function () {
    var that = this;
    wx.request({
      url: util.baseurl + 'Company/getProvince',
      data: {},
      method: 'post',
      dataType: 'json',
      success: function (res) {
        console.log(res.data);
        that.setData({
          areaList: [res.data, [], []]
        }, function () {
          var provinceid = that.data.areaList[0];
          that.getCity(provinceid[0].id);
        })
      }
    })
  },
  /**
   * 获取市
   */
  getCity: function (id) {
    var that = this;
    wx.request({
      url: util.baseurl + 'Company/getProvince',
      data: { id: id },
      method: 'post',
      dataType: 'json',
      success: function (res) {
        that.setData({
          areaList: [that.data.areaList[0], res.data, []]
        }, function (res) {
          var cityid = that.data.areaList[1];
          that.getArea(cityid[0].id);
        })
      }
    })
  },
  /**
   * 获取区县
   */
  getArea: function (id) {
    var that = this;
    wx.request({
      url: util.baseurl + 'Company/getProvince',
      data: { id: id },
      method: 'post',
      success: function (res) {
        that.setData({
          areaList: [that.data.areaList[0], that.data.areaList[1], res.data]
        })
      }
    })
  },
  //值改变
  bindMultiPickerChange: function (e) {
    this.setData({
      areaIndex: e.detail.value,
      regionChoose:true,
    })
  },

  //获取列的改变
  bindMultiPickerColumnChange: function (e) {
    console.log('列改变--', e);
    switch (e.detail.column) {
      case 0:
        var provinceid = this.data.areaList[0][e.detail.value].id;
        console.log(provinceid);
        this.getCity(provinceid);
        break;
      case 1:
        var cityid = this.data.areaList[1][e.detail.value].id;
        this.getArea(cityid);
        break;
    }
  },