微信小程序的2列选择器

代码直接拷贝至小程序编辑器中即可：

wxml:

    2列选择器：城市选择

    

        mode="multiSelector" 

        bindchange="proCityChange"

        bindcolumnchange="proCityColumnChange" 

        value="{{proCityIndex}}" 

        range="{{proCityArr}}">

        

            当前选择：

            {{proCityArr[0][proCityIndex[0]]}}-{{proCityArr[1][proCityIndex[1]]}}

        

    

js:

Page({

  data: {

    proCityArr: [], //2列选择器当前要显示的数据

    proObjArr: [{id: 1, name: '浙江省'}, {id: 2, name: '江苏省'}, {id: 3, name: '安徽省'}], //接口获取的数据

    cityObjArr: [ //接口获取的数据

      {parentId: 1, id: 1, name: '杭州市'},

      {parentId: 1, id: 2, name: '宁波市'},

      {parentId: 1, id: 3, name: '温州市'},

      {parentId: 1, id: 4, name: '嘉兴市'},

      {parentId: 1, id: 5, name: '湖州市'},

      {parentId: 1, id: 6, name: '绍兴市'},

      {parentId: 2, id: 7, name: '南京市'},

      {parentId: 2, id: 8, name: '无锡市'},

      {parentId: 2, id: 9, name: '徐州市'},

      {parentId: 2, id: 10, name: '常州市'},

      {parentId: 2, id: 11, name: '苏州市'},

      {parentId: 2, id: 12, name: '南通市'},

      {parentId: 3, id: 13, name: '合肥市'},

      {parentId: 3, id: 14, name: '芜湖市'},

      {parentId: 3, id: 15, name: '蚌埠市'},

      {parentId: 3, id: 16, name: '淮南市'},

      {parentId: 3, id: 17, name: '马鞍山市'},

      {parentId: 3, id: 18, name: '淮北市'},

    ],

    proCityIndex: [0, 0], //2列选择器当前显示数据的索引

  },

  // 城市选择后确定--触发

  proCityChange: function(e){

    let proCityIndex = e.detail.value

    this.setData({

      proCityIndex: proCityIndex

    })

    console.log(this.data.proCityArr[0][proCityIndex[0]],

                this.data.proCityArr[1][proCityIndex[1]],);

  },

  // 城市选择时--触发

  proCityColumnChange: function(e){

    let column = e.detail.column;//第几列被触发

    let index = e.detail.value;//变成第几个

    let proCityIndex = this.data.proCityIndex;

    if(column===0){//第一列选中项数据被滑动修改了...

      proCityIndex[0] = index;

      proCityIndex[1] = 0;//第一列修改了，第二列始终显示第一个

      let currentParentId = this.data.proObjArr[index].id;

      let cityArr = [];

      for(var i=0; i

        if(this.data.cityObjArr[i].parentId == currentParentId){

          cityArr.push(this.data.cityObjArr[i].name)

        }

      }

      this.setData({

        [`proCityArr[1]`]: cityArr, //当前显示数据的重新赋值

        [`proCityIndex`]: proCityIndex //当前显示数据的索引的重新赋值

      })

    }else{//第二列选中项数据被滑动修改了...

      proCityIndex[1] = index;

      this.setData({

        [`proCityIndex`]: proCityIndex //当前显示数据的索引的重新赋值

      })

    }

    // console.log(this.data.proCityIndex, "第", column, '列, 第', index, '个');

  },

  /**

  * 生命周期函数--监听页面加载

  */

  onLoad: function (options) {

    let proArr = [];

    let cityArr = [];

    for(var i=0; i

      proArr.push(this.data.proObjArr[i].name)

    }

    for(var i=0; i

      if(this.data.cityObjArr[i].parentId == 1){

        cityArr.push(this.data.cityObjArr[i].name)

      }

    }

    this.setData({ //根据接口的数据，给当前显示的默认数据

      [`proCityArr[0]`]: proArr,

      [`proCityArr[1]`]: cityArr,

    })  

  },

})