微信小程序：多列选择器——选择城市

js代码：

data: {

    multiIndex: [0, 0],

    multiArray: [[],[]],

  },

/**

* 多列选择器：点击确认按钮后要出现的效果

*/

  bindMultiPickerChange: function (e) {

    console.log('picker发送选择改变，携带值为', e.detail.value);

    this.setData({

      multiIndex: e.detail.value

    })

    console.log('1为：', this.data.multiArray[0][e.detail.value[0]])

    console.log('2为：', this.data.multiArray[1][e.detail.value[1]])

  },

/**

* 多列选择器：变换行列时出现的效果

*/

  bindMultiPickerColumnChange: function (e) {

    var that = this;

    var data = {

      multiArray: this.data.multiArray,

      multiIndex: this.data.multiIndex

    };

    wx.request({

      method: 'get',

      url: 'http://',

      complete: function (res) {

        if (res.data.code == 0) {

          console.log(res.data);

          console.log('修改的列为', e.detail.column, '，值为', e.detail.value);

          data.multiIndex[e.detail.column] = e.detail.value;

          switch (e.detail.column) {

            case 0:

              console.log(e.detail.value);

              console.log(res.data.data[e.detail.value].citys)

              // 给that.data.multiArray[1]赋空值，因为我之前都是直接push进去，所以要清空才能放新的

              that.setData({

                ['multiArray[' + 1 + ']']: []

              })

              for (var i = 0; i < res.data.data[e.detail.value].citys.length;i++){

                that.data.multiArray[1].push(res.data.data[e.detail.value].citys[i].name);

              }

              that.setData({

                ['multiArray[' + 1 + ']']: that.data.multiArray[1]

              })

              break;

            case 1:

              console.log("点击第二列");

              break;

          }

        }

      }

    })

  },

wxml代码：

<view class='city'>城市

  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">

    <input type='text' name='city' placeholder='天津'  value="{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}" />

    <image style='width:35rpx;height:35rpx; position:absolute;right:20rpx;top:105px;' src='../../assets/icons/箭头 右.png'></image>

  </picker>

</view>

实现效果：

选择城市

积累一点一滴~