微信小程序中实现3级省市区地址联动

761 阅读1分钟

1、.wxml文件里代码如下:

<view class="wxPicker">
 <view>地址:</view>
  <picker  mode="region" bindchange="bindRegionChange" 
      value="{{detailed}}" custom-item="{{customItem}}" name="detailed">
      <view class="wxAddress">{{detailed}}</view> 
 </picker>
</view>

2、.js文件里代码如下:

data: {   
    customItem: [],
    detailed: '点击选择地址',
}

/**   * 生命周期函数--监听页面加载   */  
onLoad: function (options) { 
 },
//省市联动
  bindRegionChange: function (e) {
    var that = this   
    //下拉框所选择的值
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      //拼的字符串传后台
      detailed: e.detail.value[0] + " " + e.detail.value[1] + " " + e.detail.value[2],
      //下拉框选中的值
      region: e.detail.value
   })
    this.setData({
     "AddSite.area": e.detail.value[0] + " " + e.detail.value[1] + " " + e.detail.value[2]
   })
      console.log(this.data.AddSite)
  },