微信小程序通过后台接口实现地址三级联动

页面代码

<view class="citys">
  <picker class="select" mode="multiSelector" range="{{provincearr}}" bindcolumnchange="getcity">
    <text class="select-text">{{province}},{{city}},{{area}}</text>
  </picker>
</view>

css代码

.citys{
  height:120rpx;
  line-height: 120rpx;
}
.select{
  border:1rpx solid #E7EBF1;
  border-radius: 10rpx;
  height: 80rpx;
  margin: 0 50rpx 0 50rpx;
  line-height: 80rpx;
}
.select-text{
  font-size: 28rpx;
  padding-left: 30rpx;
}

php代码(tp5框架)

use app\common\util\Apiclass;
use app\api\model\AliAddress;
class Good extends Apiclass{
	public function getprovince()
	{
	    $id = input('id');
	    if(!$id) {
	        $id = 1;
	    }
	    $data = AliAddress::where('parent_id',$id)->field('id,name')->select();
	    $arr = [];
	    $arr[] = '请选择';
	    foreach($data as $v)
	    {
	        $arr[] = $v['name'];
	    }
	    array_unshift($data,['id'=>0,'name'=>'请选择']); //给数据的最前面添加一个空值，与arr的值索引对应
	    return $this->msg(true,'获取成功',[$arr,$data]);
	}
}

js代码

Page({
  data: {
    provincearr:[], //三个元素的数组，表示下拉框为三列，第一个元素的数据是自动加载省名称的一位数组
    provincedata:[], //自动加载省数据
    citydata:[], //选择省后加载的市数据
    areadata:[], //选择市后加载的区县数据
    province:"请选择", //选中省的字符串
    city:"请选择", //选中市的字符串
    area:"请选择", //选中区县的字符串
    province_id:0, //选中省的id
    city_id:0, //选中市的id
    area_id:0 //选中区县的id
  },
  onLoad: function () {
    this.getprovince() //加载省数据
  },
  getprovince:function(){
    let that = this
    wx.request({
      url: app.globalData.url+'api/good/getprovince',
      success:function(res){
        that.setData({
          provincearr:[res.data.data[0],['请选择'],['请选择']],
          provincedata:res.data.data[1]
        })
      }
    })
  },
  getcity:function(e){
    let that = this
    let value = e.detail.value //选中数据的索引
    let lay = e.detail.column //选择的列
    let str = that.data.provincearr[lay][value] //选中的字符串
    let id = 0
    let key = ''
    if(lay == 0){ //如果是选择省
      key = 'provincearr[1]'
      id = that.data.provincedata[value].id //选中数据的id
      let key2 = 'provincearr[2]' //选择省时，重新渲染区县数据的键
          that.setData({
            [key2]:['请选择'],
            province:str
          })
    }else if(lay == 1){ //如果选择市
      id = that.data.citydata[value].id
      key = 'provincearr[2]'
      that.setData({
        city:str
      })
    }else{ //如果选择区县
      id = that.data.areadata[value].id
      id = 0
      that.setData({
        area:str
      })
    }
    if(id != 0){ //选择省或市请求下一级的数据
      wx.request({
        url: app.globalData.url+'api/good/getprovince',
        data:{id:id},
        success:function(res){
          if(key != ''){
            that.setData({
              [key]:res.data.data[0]
            })
            if(lay == 1){
              that.setData({
                areadata:res.data.data[1]
              })
            }else{
              that.setData({
                citydata:res.data.data[1]
              })
            }
          }
        } 
      })
    }
  }
})