微信小程序省市区三级联动优化版

优化版的省市区选择器，更简化的Js数据，方便输出以及读取显示。js地址：城市数据js。

页面组件：

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" 
value="{{citiesIndex}}" range="{{cityArray}}" range-key="name">
  </picker>

js优化后无需放服务器请求，放本地即可。

1.加载城市数据

var array = require('../../../utils/cityData.js').cityData;

2.选择器数据初始化

初始化选择器数据，默认都选中第一项。

let cityArray = [
    [],
    [],
    []
];

for (let x in array["86"]) { //存入省
    cityArray[0].push({
    name: array["86"][x],
    code: x
    });
}

for (let y in array[cityArray[0][0].code]) { //存入市，默认关联第一个省
    cityArray[1].push({
        name: array[cityArray[0][0].code][y],
        code: y
    });
}

for (let z in array[cityArray[1][0].code]) { //存入区，默认关联第一个省的第一个市
    cityArray[2].push({
        name: array[cityArray[1][0].code][z],
        code: z
    });
}

this.setData({
    cityArray: cityArray
});

3.列滚动事件

滚动选择器的列时相应的数据变化，这是最重要的点。

//列滚动事件
  bindMultiPickerColumnChange(e) {
    let selectedIndex = e.detail.value;

    let cityArray = this.data.cityArray;
    let list1 = []; //存放第二列数据，即市的列
    let list2 = []; //存放第三列数据，即区的列

    let citiesIndex = [];

    let pcode = '', scode = '';


    let provinceIndex = this.data.citiesIndex[0]; //选中的省索引
    let cityIndex = this.data.citiesIndex[1]; //选中的市索引 
    let areaIndex = this.data.citiesIndex[2]; //选中的区索引

    switch (e.detail.column) {
      case 0: //滚动第一列
        pcode = cityArray[0][selectedIndex].code;
        for(let x in array[pcode]){
          list1.push({
            name: array[pcode][x],
            code: x
          });
        }
        
        scode = list1[0].code;
        for(let y in array[scode]){
          list2.push({
            name: array[scode][y],
            code: y
          });
        }

        citiesIndex = [selectedIndex, 0, 0, 0];
        break;
      case 1: //滚动第二列
        list1 = cityArray[1];

        scode = list1[selectedIndex].code;
        for(let x in array[scode]){
          list2.push({
            name: array[scode][x],
            code: x
          });
        }

        citiesIndex = [provinceIndex, selectedIndex, 0, 0];
        break;
      case 2: //滚动第三列
        list1 = cityArray[1];
        list2 = cityArray[2];

        citiesIndex = [provinceIndex, cityIndex, selectedIndex, 0];
        break;
    }
    this.setData({
      [`cityArray[1]`]: list1, //重新赋值第二列数组，即联动了市
      [`cityArray[2]`]: list2, //重新赋值第三列数组，即联动了区
      citiesIndex: citiesIndex, //更新索引
    });

4.选择器变更事件

//选择器选择事件
  bindMultiPickerChange(e) {
    let cityIndex = e.detail.value; 
    let cityArray = this.data.cityArray;

    let province = cityArray[0][cityIndex[0]].name;
    let city = cityArray[1][cityIndex[1]].name;
    let district = cityArray[2][cityIndex[2]].name;
    //选择的地址编码
    let areaCode = cityArray[2][cityIndex[2]].code;
    //选择的地址文本
    let selectedAddress = "";
   
    selectedAddress = province + city + district;

    this.setData({
      region: selectedAddress,
      areaCode: areaCode,
      provinceCode: cityArray[0][cityIndex[0]].code,
      cityCode: cityArray[1][cityIndex[1]].code
    });
  },

5.根据传过来的值显示省市区

修改初始化选择器方法，判断当修改地址时读取显示已选择的省市区。

for (let x in array["86"]) { //存入省
    cityArray[0].push({
    name: array["86"][x],
    code: x
    });
}

if(this.data.address_id != ""){ //编辑地址，根据传过来的地址文本和编码调整选择器
    for (let y in array[provinceCode]) {
        cityArray[1].push({
            name: array[provinceCode][y],
            code: y
        });
    }

    for (let z in array[cityCode]) {
        cityArray[2].push({
            name: array[cityCode][z],
            code: z
        });
    }

    for(let i = 0,len = cityArray[0].length;i<len;i++){
        if (cityArray[0][i].code == provinceCode) {
            provinceIndex = i;
        }
    }
    for (let j = 0, len = cityArray[1].length; j < len; j++) {
        if (cityArray[1][j].code == cityCode) {
            cityIndex = j;
        }
    }
    for (let k = 0, len = cityArray[2].length; k < len; k++) {
        if (cityArray[2][k].code == areaCode) {
            districtIndex = k;
        }
    }


} else { //添加地址

---

效果：