小程序城市三级联动

三级联动在项目中是最常见的了，像用户填写收货地址，中奖之后的领奖地址等，都是需要三级联动来写的。然后，我这边的情况是后端没给三级联动的数据。所以需要在网上扒一个三级联动城市的数据来实现。具体见代码：

<input class="input" placeholder="{{province}}{{city}}{{county}}" placeholder-style="color:#454545;font-size:22rpx;" focus="{{focus}}" onFocus="open" />

var tcity = require("/utils/city.js");
data: {
      // 三级联动
      provinces: [],//省数据
      citys: [],//市数据
      countys: [],//县数据
      province: "",//页面渲染省的名称
      city: "",//页面渲染市的名称
      county: '',//页面渲染县的名称
      value: [0, 0, 0],
      values: [0, 0, 0],
      condition: false//控制开关三级联动
},
onLoad(options) {
      var that = this;
      /*三级联动数据 start*/
      tcity.init(that);
      var cityData = that.data.cityData;
      const provinces = [];
      const citys = [];
      const countys = [];
      for(let i=0;i<cityData.length;i++){
        provinces.push(cityData[i].name);
      }
      for (let i = 0 ; i < cityData[0].sub.length; i++) {
        citys.push(cityData[0].sub[i].name)
      }
      for (let i = 0 ; i < cityData[0].sub[0].sub.length; i++) {
        countys.push(cityData[0].sub[0].sub[i].name)
      }
      that.setData({
        'provinces': provinces,
        'citys':citys,
        'countys':countys,
        'province':cityData[0].name,
        'city':cityData[0].sub[0].name,
        'county':cityData[0].sub[0].sub[0].name
      })
      /*三级联动数据 end*/
 },
 // 处理三级联动
    bindChange: function(e) {
        //console.log(e);
        var val = e.detail.value
        var t = this.data.values;
        var cityData = this.data.cityData;
        
        if(val[0] != t[0]){
          const citys = [];
          const countys = [];

          for (let i = 0 ; i < cityData[val[0]].sub.length; i++) {
            citys.push(cityData[val[0]].sub[i].name)
          }
          for (let i = 0 ; i < cityData[val[0]].sub[0].sub.length; i++) {
            countys.push(cityData[val[0]].sub[0].sub[i].name)
          }

          this.setData({
            province: this.data.provinces[val[0]],
            city: cityData[val[0]].sub[0].name,
            citys:citys,
            county: cityData[val[0]].sub[0].sub[0].name,
            countys:countys,
            values: val,
            value:[val[0],0,0]
          })
          
          return;
        }
        if(val[1] != t[1]){
          const countys = [];

          for (let i = 0 ; i < cityData[val[0]].sub[val[1]].sub.length; i++) {
            countys.push(cityData[val[0]].sub[val[1]].sub[i].name)
          }
          
          this.setData({
            city: this.data.citys[val[1]],
            county: cityData[val[0]].sub[val[1]].sub[0].name,
            countys:countys,
            values: val,
            value:[val[0],val[1],0]
          })
          return;
        }
        if(val[2] != t[2]){

          this.setData({
            county: this.data.countys[val[2]],
            values: val
          })
          return;
        }
    },
    open:function(){
      this.setData({
        condition:!this.data.condition
      })
    }

然后这个是一个json文件，里面是网上扒下来的三级联动城市数据

var cityData = [
	//数据网上挺多的，自己扒一下	
	//需要的留言qq，看到会第一时间回复
];
function init(that){
  that.setData( { 
      'cityData': cityData
  });
}

module.exports={
    init:init
}