小程序开发picker组件回显省市二级联动-加速度jsudo

小程序开发picker组件回显省市二级联动

来源：加速度jsudo

作者

访问量 10631

本文摘要

上篇文章介绍了小程序自定义省市二级联动选择器，但是当用户保存省市信息后再次进入页面，需要将选择器回显，这篇文章主要讲述自定义选择器回显。实现思路：通过后台返回的省份编码，获取该省份在省份列表数组的下标值，并根据省份编码拿到该省份下的市级列表，并把市级列表放入picker的range属性对应数组的第二列，然后根据后台返回的市级编码获取该市级在市级列表

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

实现思路：

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

Page({

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

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

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

< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-f369a1323030a21e0389abe6e4e3e7d9.png">

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