微信小程序之省市区三级联动

address.wxml ===>

      请选择省：
      
      
              {{pro[0][pro[1]]}}
      




      当前城市：
      
      
           {{city[0][city[1]]}}
      




      当前地区：
      
      
            {{county[0][county[1]]}}
      

 

address.js ====>

const hostUrl = require('../../config').hostUrl;

Page({

    data: {

    },

    // 三级联动对应的变化函数
    bindPickerChange: function (e) {
        var data = this.data.dataCity;
        var ev = e.detail.value;
        var bindval = e.currentTarget.dataset.bindval;

        // 连动为省时执行
        if (bindval == "p") {
            var pro = data.sheng;
            var objcv = ("a_" + ev);
            var city = data.shi[objcv];
            var objctv = objcv + "_0";
            var county = data.xian[objctv];
            this.setData({
                pro: [pro, ev],
                city: [city, 0],
                county: [county, 0],
            })

        // 连动为市时执行
        } else if (bindval == "c") {
            var pro = this.data.pro;
            var s = pro[1];
            var objcv = ("a_" + s);
            var city = this.data.city;
            var objctv = objcv + "_" + ev;
            var county = data.xian[objctv];
            city[1] = ev;
            console.log()
            this.setData({
                city: city,
                county: [county, 0],
            })

        // 连动为区时执行
        } else {
            var county = this.data.county;
            county[1] = ev;
            var nowCounty = county[0];
            this.setData({
                county: county,
            })
        }
    },

    onLoad: function (options) {

        // 页面初始化 options为页面跳转所带来的参数
        var data = require("../../utils/city.js").areaData;
        if (options.pro) {
            var pro = options.pro;
            var city = options.city;
            var county = options.county;
            var prov, cit, cnty;

            // 获取相应的省份位置
            for (var i = 0; i < data.sheng.length; i++) {
                if (data.sheng[i] == pro) prov = i;
            }

            // 获取相应的市值
            var shiv = data.shi["a_" + prov];

            // 获取相应的市值位置
            for (var i = 0; i < shiv.length; i++) {
                if (city == data.shiv[i]) cit = i;
            }

            // 获取相应的区值
            var xianv = data.xian["a_" + prov + "_" + cit];

            // 获取相应的区值位置
           for (var i = 0; i < xianv.length; i++) {
               if (county == xianv[i]) cnty = i;
           }
           console.log(name + ":::" + adrs + ":::" + num);

           this.setData({

             // 设置默认省份
             pro: [data.sheng, prov],

             // 设置默认市
             city: [shiv, cit],

            // 设置默认县
            county: [xianv, cnty],

            // 设置联动所有数据
            dataCity: data,
            dataID: uid,

            // 关闭加载动画画
            loadingHidden: true

          })

        } else {

            // 设置默认省份
            var pro = data.sheng;
            // 设置默认市
            var city = data.shi;

            // 设置默认县
            var county = data.xian;

            this.setData({

            // 设置默认省份
            pro: [pro, 0],

            // 设置默认市
            city: [city.a_0, 0],

            // 设置默认县
            county: [county.a_0_0, 0],

            // 设置联动所有数据
            dataCity: data,

            // 关闭加载动画画
            loadingHidden: true
      })
    }
  },

})

效果图如下：

有需要的同学可以私我拿city.js的json数据！