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

github连接：https://github.com/UFO0001/wechat-three-level

//index.js
//获取应用实例
var tcity = require("../../utils/citys.js");
var app = getApp()
Page({
  data: {
    provinces: [],
    province: "",
    citys: [],
    city: "",
    countys: [],
    county: '',
    value: [0, 0, 0],
    values: [0, 0, 0],
    condition: false
  },
  bindChange: function(e) {
    var val = e.detail.value
    var t = this.data.values;
    var cityData = this.data.cityData;
    
    if(val[0] != t[0]){
      console.log('province');
      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]){
      console.log('city');
      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]){
      console.log('county');
      this.setData({
        county: this.data.countys[val[2]],
        values: val
      })
      return;
    }
  },
  open:function(){
    this.setData({
      condition:!this.data.condition
    })
  },
  onLoad: function () {
    console.log("onLoad");
    var that = this;
    
    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);
    }
    console.log('省份完成');
    for (let i = 0 ; i < cityData[0].sub.length; i++) {
      citys.push(cityData[0].sub[i].name)
    }
    console.log('城市完成');
    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
    })
    console.log('初始化完成');
  }
})

<!--index.wxml-->

<view class="container">
  <view class="input">
    <input placeholder="选择地址" value="{{province}}-{{city}}-{{county}}" focus="{{focus}}" bindfocus="open" />
  </view>
</view>
<view wx:if="{{condition}}" class="citypicker">
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange" class="citybody">
    <view class="cityheader">
      <view bindtap="open" class="city-cancel">取消</view>
      <view bindtap="open" class="city-true">确定</view>
    </view>
    <picker-view-column>
      <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>
    </picker-view-column>
  </picker-view>
</view>

.input {
  padding-top: 450rpx;
  width: 100%;
}

.input input {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px #d9d9d9 solid;
  border-top: 1px #d9d9d9 solid;
  padding: 20rpx 50rpx;
}


.citypickers{
  position: fixed;
  height: 100%;
  width: 100%;
  min-height: 100%;
  background-color: #ff0;
}


.citybody {
  position: fixed;
  bottom: 0px;
}

.cityheader {
  position: absolute;
  top:0px;
  width: 100%;
  z-index: 5;
}

.city-cancel {
  float: left;
  margin: 20rpx;
  color: #828282;
}

.city-true {
  float: right;
  margin: 20rpx;
  color: #10FF10;
}

.section .picker {
  background-color: #fff;
  border-bottom: 2px #cccccc solid;
  border-top: 2px #d9d9d9 solid;
  padding: 20rpx;
}