小程序开发笔记《四》picker回显之省市二级联动

上篇文章介绍了小程序自定义省市二级联动选择器，但是当用户保存省市信息后再次进入页面，需要将选择器回显，这篇文章主要讲述自定义选择器回显。

实现思路：
通过后台返回的省份编码，获取该省份在省份列表数组的下标值，并根据省份编码拿到该省份下的市级列表，并把市级列表放入picker的range属性对应数组的第二列，然后根据后台返回的市级编码获取该市级在市级列表数组的下标值，拿到这两个下标值存入数组中然后赋值给picker的value属性，就实现啦~
js代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    province_code:"",
    city_code:"",
    provinceCityArray: [provinceCity.getProvinceList, provinceCity.getCityListByProvince("110000")],
    multiIndex: [0, 0],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    /**根据服务器请求返回值赋值给data,这里方便演示默认写死 */
    this.setData({
      province_code:"420000",
      city_code:"421000"
    })
    var data = {
      provinceCityArray: this.data.provinceCityArray   
    };
    var multiIndexArray = [];
    //获取当前省在所有省数组中的下标
    for (var i = 0; i < data.provinceCityArray[0].length; i++) {
      if (this.data.province_code == data.provinceCityArray[0][i].area_code) {
        multiIndexArray[0] = i;
        break;
      }
    }
    var cityArray = provinceCity.getCityListByProvince(this.data.province_code);
 
   //获取当前市在当前省所有市cityArray数组中的下标
    for (var i = 0; i < cityArray.length; i++) {
      if (this.data.city_code == cityArray[i].area_code) {
        //根据当前市编码去匹配
        multiIndexArray[1] = i;
        break;
      }
    }
    data.provinceCityArray[1] = cityArray;
    this.setData({
      multiIndex: multiIndexArray,
      provinceCityArray: data.provinceCityArray
    })

  }
})

其他部分的实现可参考上一篇文章：小程序开发笔记《三》自定义省市二级联动

 

 

原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe