微信小程序二级联动省市

1.先看一下效果

2.先看下一下布局文件

布局有一个弹框和点击按钮组成，弹框为隐藏，点击可以弹出选择城市

<!--城市选择弹框start-->
<view class="location-select" wx:if="{{pickerInfo.state == true}}">
  <view class="location-picker">
    <view class="location-picker-top flex-center-center">
      {{pickerInfo.title}}
    </view>
    <picker-view class="location-picker-view" value="{{pickerInfo.value}}" indicator-style="height: 50px;" bindchange="updatePicker">
      <picker-view-column>
        <view wx:for="{{pickerInfo.provinces}}" class="picker-province-item">
          {{item.provinceName}}
        </view>
      </picker-view-column>
      <picker-view-column>
        <view wx:for="{{pickerInfo.citys}}" class="picker-city-item">
          {{item.cityName}}
        </view>
      </picker-view-column>
    </picker-view>
    <!--取消和确定-->
    <view class="location-picker-bottom">
      <view class="picker-bottom-left" bindtap="updateLocationInfo" data-title="cancel">
        {{pickerInfo.submits[0]}}
      </view>
      <view class="picker-bottom-right" bindtap="updateLocationInfo" data-title="select">
        {{pickerInfo.submits[1]}}
      </view>
    </view>
  </view>
</view>
<!--城市选择弹框end-->


<button bindtap="updateLocationInfo" data-title="state">点击弹出城市选择弹框:{{defaults.cityName}}</button>

3.JS代码

点击按钮弹出选择框，获取省列表（demo用本地数据代替），根据选择省的ID获取网络的城市列表（demo用本地数据代替），最后在按钮上设置选择结果

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {

    defaults: {
      cityName: '南京',
    },
    // 城市选择弹框
    pickerInfo: {
      'state': false, 'title': '选择城市', 'value': [0, 0],
      'submits': ['取消', '确定'],
    },

    // 省列表
    provinceList: [
      {
        provinceID: 1,
        provinceName: '北京市'
      },

      {
        provinceID: 10,
        provinceName: '江苏省'
      },

      {
        provinceID: 12,
        provinceName: '安徽省'
      },
    ],

    //市列表
    cityList: [
      {
        cityID: 1,
        cityName: '北京市'
      },
      {
        cityID: 63,
        cityName: '南京市'
      },

      {
        cityID: 64,
        cityName: '无锡市'
      },

      {
        cityID: 78,
        cityName: '合肥市'
      }
    ]


  },

  onLoad: function () {

  },

  //点击变更地点信息
  updateLocationInfo: function (event) {
    var that = this
    var title = event.currentTarget.dataset.title
    var pickerInfo = that.data.pickerInfo


    // 判断是否是button
    if (title == 'state') {
      pickerInfo.state = true
      pickerInfo.value = [0, 0]
      pickerInfo.citys = []
      that.setData({
        pickerInfo: pickerInfo
      });

      //此处应该请求网络数据，为了方便我写了一些数据进行测试，获取省列表
      var provinceList = that.data.provinceList;
      pickerInfo.provinces = provinceList;

      that.setData({
        pickerInfo: pickerInfo
      });

    } else if (title == 'cancel') {
      pickerInfo.state = false
      that.setData({
        pickerInfo: pickerInfo
      })
    } else {
      // 设置选择结果
      pickerInfo.state = false;

      var defaults = that.data.defaults

      var cityNum = pickerInfo.value[1]
      var cityInfo = pickerInfo.citys[cityNum]
      defaults.cityName = cityInfo.cityName

      that.setData({
        pickerInfo: pickerInfo,
        defaults: defaults,
      });

      // that.getCountyList();此处可以继续模仿选择区域

    }

  },

  //选择城市，通过bindchange和省ID获取城市列表
  updatePicker: function (event) {
    var that = this;
    var pickerInfo = that.data.pickerInfo;
    var num = event.detail.value[0];
    var cityNum = event.detail.value[1];

    // var requestInfo = {};
    // 此处根据省ID通过网络获取城市列表，这里我用本地数据代替
    // requestInfo.provinceID = pickerInfo.provinces[num].provinceID;
    var cityList = that.data.cityList;
    pickerInfo.citys = cityList;
    pickerInfo.value = [num, cityNum];

    that.setData({
      pickerInfo: pickerInfo
    });

  },
})

4.最后是CSS文件

/*城市选择弹框start*/
.location-select {
  position: absolute;
  width: 750rpx;
  height: 100%;
  background-color: rgba(00, 00, 00, 0.3);
  z-index: 2;
  font-size: 14px;
  font-family: "lucida grande",
                 "lucida sans unicode",
                 lucida,
                 helvetica,
                 "Hiragino Sans GB",
                 "Microsoft YaHei",
                 "WenQuanYi Micro Hei",
                 sans-serif;
}

.location-picker {
  float: left;
  margin-top: 50px;
  margin-left: 25rpx;
  width: 700rpx;
  height: 300px;
  border-radius: 5rpx;
  background-color: white;
}

.location-picker-top {
  float: left;
  width: 700rpx;
  height: 49px;
  border-bottom: solid;
  border-bottom-color: #eee;
  border-bottom-width: 1px;
}

.location-picker-bottom {
  float: left;
  width: 700rpx;
  height: 49px;
  border-top: solid;
  border-top-width: 1px;
  border-top-color: #eee;
}

.picker-bottom-left {
  float: left;
  margin-left: 300rpx;
  line-height: 50px;
  height: 50px;
  width: 200rpx;
  font-size: 16px;
  color: #707070;
  text-align: center;
}

.picker-bottom-right {
  float: left;
  line-height: 50px;
  height: 50px;
  width: 200rpx;
  font-size: 16px;
  color: #06ccb6;
  text-align: center;
}

.picker-top-title {
  font-size: 20px;
  color: #000;
  line-height: 50px;
}

.location-picker-view {
  float: left;
  width: 700rpx;
  height: 200px;
  line-height: 50px;
  background-color: #eee;
}

.location-picker-column {
  background-color: orange;
}

.picker-province-item {
  line-height: 50px;
  height: 50px;
  width: 200rpx;
  margin-left: 10rpx;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.picker-city-item {
  line-height: 50px;
  height: 50px;
  width: 200rpx;
  margin-left: 10rpx;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

.picker-college-item {
  line-height: 50px;
  height: 50px;
  width: 280rpx;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

/*城市选择弹框end*/

项目地址：

CSDN：http://download.csdn.net/download/qq_26014653/9896407

GitHub：https://github.com/scYao/WeChat