小程序实现省市选择

小程序里面自带省市县选择，但是一般情况下，我们不需要具体到县。只选省市就可以了。

wxml代码：

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range-key="name" range="{{provinces}}">    
    <span class="padl0">
         当前选择：{{province}}-{{city}}                
    </span>  
</picker>

rane-key代表显示省份或城市名称。

js代码：

onLoad: function (options) {
    var that = this;
      wx.request({
        url: app.globalData.url +'index/ajax/province',
        data: { current:0,from:'xcx'},
        method: 'post',
        header: { 'Content-Type': 'application/json' },
        success:function(res2){
          that.setData({
            region: res2.data
          });
          const provinces = [[],[]];
          const citys = [[],[]];
          const countys = [];
          
          for (let i = 0; i < that.data.region.length; i++) {
            var obj = new Object;
            obj.itemid = that.data.region[i].itemid;
            obj.name = that.data.region[i].name
            provinces[0].push(obj);
          }
          //console.log("初始化省份");
          for (let i = 0; i < that.data.region[0].city.length; i++) {
            var obj = new Object;
            obj.itemid = that.data.region[0].city[i].itemid;
            obj.name = that.data.region[0].city[i].name;
            obj.pid = that.data.region[0].city[i].pid;
            //citys.push(that.data.region[0].city[i].name)
            provinces[1].push(obj);
          }
          //console.log('初始化城市');
          that.setData({
            'provinces': provinces,
            'citys': citys,
            'province': that.data.region[0].name,
            'city': that.data.region[0].city[0].name
          })
        }
      });
    
  },

页面加载的时候读取省份和城市数据库，服务端代码，请加V信咨询。

bindMultiPickerChange:function(e){
    console.log(this.data.provinceid);//获取了省份编号
    console.log(this.data.cityid);//获取了城市编号
  },
  bindMultiPickerColumnChange: function (e) { 
    var that = this;
    switch (e.detail.column) { 
      case 0: 
           //当选择了省份的时候
        that.setData({
          "provinces[1]": that.data.region[e.detail.value].city,
          "province": that.data.region[e.detail.value].name,
          "provinceid": that.data.region[e.detail.value].itemid,
          "city": that.data.region[e.detail.value].city[0].name
        });
        break; 
      case 1:
        //当选择了城市以后
        that.setData({
          "city": that.data.provinces[1][e.detail.value].name,
          "cityid": that.data.provinces[1][e.detail.value].itemid
        });      
    } 
  },