Micro letter applet provinces linkage, custom dictionaries region

　　

 

　　Recently doing a project when it came to such a question, it is the linkage provinces, municipalities, we need to set up a custom dictionary, then the program comes with a small micro letter urban Select province can not be used, through catalytic triad of cigarette finally written out. The following code example presented.

　　The first is in the utils folder into arealist.js file, reads:

const areaList = [ 
  { 
    name: ' Henan ' , 
    ID: . 1 , 
    the parentId: 0 
  }, { 
    name: ' Zhejiang ' , 
    ID: 2 , 
    the parentId: 0 
  }, { 
    name: ' Zhengzhou ' , 
    ID: . 3 , 
    the parentId: . 1 
  }, { 
    name: ' Xinxiang ' , 
    ID: . 4 , 
    the parentId: . 1 
  }, { 
    name:' Luoyang ' , 
    ID: . 5 , 
    the parentId: . 1 
  }, { 
    name: ' Erqi ' , 
    ID: . 6 , 
    the parentId: . 3 
  }, { 
    name: ' Jinshui ' , 
    ID: . 7 , 
    the parentId: . 3 
  }, { 
    name : ' New District ' , 
    ID: . 8 , 
    the parentId: . 3 
  }, { 
    name: " Central area " , 
    ID: . 9, 
    The parentId: . 3 
  }, { 
    name: ' Fengqiu County ' , 
    ID: 10 , 
    the parentId: . 4 
  }, { 
    name: ' Yuanyang ' , 
    ID: . 11 , 
    the parentId: . 4 
  }, { 
    name: " Yanjin County " , 
    ID: 12 is , 
    the parentId: . 4 
  }, { 
    name: ' Walker County ' , 
    ID: 13 is , 
    the parentId: . 4  
  }, {
    name: 'Mengjin ' , 
    ID: 14 , 
    the parentId: . 5 
  }, { 
    name: ' New County ' , 
    ID: 15 , 
    the parentId: . 5 
  }, { 
    name: ' Hangzhou ' , 
    ID: 16 , 
    the parentId: 2 
  }, { 
    name: ' Taizhou ' , 
    ID: . 17 , 
    the parentId: 2 
  }, { 
    name: " Lake District "  ,
    ID: 18 is ,
    the parentId: 16 
  }, { 
    name: ' Riverside area ' , 
    ID: . 19 , 
    the parentId: 16 
  }, { 
    name: ' Yuhang ' , 
    ID: 20 is , 
    the parentId: 16 
  }, { 
    name: ' Jiaojiang ' , 
    ID: 21 is , 
    the parentId: . 17 
  }, { 
    name: ' Huangyan ' , 
    ID: 22 is , 
    the parentId: . 17 
  } 
];
module.exports = areaList;

View Code

　　Then introduced in the pages you need areas dictionary, and the dictionary when parsing onLoad, walk out of the primary data, to stay after use.

const areaList the require = ( ' ../../utils/arealist.js ' ); 
Page ({ 
  Data: { 
    MultiArray: [], 
    multiIndex: [ 0 , 0 , 0 ], 
    Province: [] 
  }, 
  bindMultiPickerChange: function (E) { 
    the console.log ( ' Picker change transmission selected, carrying a value ' , e.detail.value)
     the this .setData ({ 
      multiIndex: e.detail.value 
    }) 
  }, 
  bindMultiPickerColumnChange: function (E) { 
    Console. log ( ' modified as ' , e.detail.column, '，值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    const provinceName=data.multiArray[0][data.multiIndex[0]];
    let provinceId="";
    let province = this.data.province;
    let quyuList = [], cityList = [], provinceList=[],city=[],area=[];
    try {
      province.forEach(item => {
        if (item.name === provinceName) {
          provinceId = item.id;
          throw (new Error('find item'))
        }
      })
    } catch (err) {
    }
    city = areaList.filter(item => {
      return item.parentId == provinceId;
    })
    if (e.detail.column==0){
      data.multiIndex=[e.detail.value,0,0];
      try{
        area = areaList.filter(item => {
          return item.parentId == city[data.multiIndex[1]].id;
        })
      }catch(err){}
    } else if (e.detail.column == 1){
      data.multiIndex[2]=0;
      area = areaList.filter(item => {
        return item.parentId == city[e.detail.value].id;
      })
    }else{
      const cityName = data.multiArray[1][data.multiIndex[1]];
      let cityId='';
      try{
        areaList.forEach(item=>{
          if(item.name===cityName){
            cityId=item.id;
            throw(new Error('find item'));
          }
        })
      }catch(err){}
      area=areaList.filter(item=>{
        return item.parentId==cityId;
      })
    }
    provinceList = province.map(item => {
      return item.name
    })
    cityList = city.map(item => {
      return item.name;
    })
    quyuList = area.map(item => {
      return item.name;
    })
    data.multiArray= [provinceList, cityList, quyuList],
    this.setData(data);
  },
  onLoad(){
    var province = [], city = [], area = [];
    province=areaList.filter(item => {
      return item.parentId == 0;
    })
    city = areaList.filter(item => {
      return item.parentId == province[0].id;
    })
    area = areaList.filter(item => {
      return item.parentId == city[0].id;
    })
    var provinceList = province.map(item => {
      return item.name
    })
    var cityList = city.map(item => {
      return item.name;
    })
    var quyuList = area.map(item => {
      return item.name;
    })
    this.setData({
      multiArray: [provinceList, cityList, quyuList],
      province
    })
  }
})

　　Here is wxml page, you want to look at the results can be directly attached to go to the next

<view class="section">
  <view class="section__title">多列选择器</view>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">0
      Current selection: {{MultiArray [][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>

 　　Tip: In the micro-channel developer tools will be an option to change the directory level 2 directory option is not set to the index back to the problem of zero, but did not notice this problem when the real machine debugging. Yet find explanation