Realize the WeChat applet picker, provincial and municipal custom data to support three-level linkage

When using the WeChat applet again 

It is found that when mode="region", the data of the provinces and municipalities selected in the data does not support the data returned in the background

The following implements the background return data operation

Set up HTML first

The name field name should be replaced

    <view class=" h-100 b-b l-h-100">
        <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range-key="name" value="{
   
   {multiIndex}}" range="{
   
   {multiArray}}">
          <view class="picker flex-r">
            <view class="bold"><text class="c-f00">*</text>地区</view> <text> {
   
   {multiArray[0][multiIndex[0]].name}}{
   
   {multiArray[1][multiIndex[1]].name}}{
   
   {multiArray[2][multiIndex[2]].name}} </text>
          </view>
        </picker>
      </view>

In data

data:{

      multiArray: [],//地区
      multiIndex: [0, 0, 0],
      type:0,
}

Come in for the first time to query provincial and urban data

// POST 开发完成 
  // 获取省市区
   首次调用 type传0
  code 为查询下级的id  code 为空时则查询省
    
  getcitycode(type，code){
    var self=this
    var {multiArray,multiIndex,code,street}=this.data
    app.ajax({
      code,
      url: '/shenshiqu',
    }, function (result) {
      multiArray[type]=result.data.data
      if(type<2)self.getcitycode(type+1,result.data.data[index].taobaoid)
    })
   
  },

Update and move when rolling provinces or cities

// 选择省市区
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({multiIndex: e.detail.value})
  },

  
  // 选择省市区
  bindMultiPickerColumnChange: function (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;
    switch (e.detail.column) {
      case 0:
        console.log(data.multiArray[e.detail.column][e.detail.value].taobaoid)
        this.getcitycode(1,data.multiArray[e.detail.column][e.detail.value].taobaoid)
        break;
      case 1:
          console.log(data.multiArray[e.detail.column][e.detail.value].taobaoid)
          this.getcitycode(2,data.multiArray[e.detail.column][e.detail.value].taobaoid)
          break;
    }
    this.setData(data);
  },

If you like, you can add the front-end interview question bank to facilitate the use of WeChat to search for "MST question bank"

Or scan the code to view or scan the code to contact