微信小程序picker实现两级联动，带id

一、wxml文件中

   

 

 

二、data中的数据

arraySchool: [

      [],

      []

    ], //多级选择数组

    valueSchool: [0, 0], //多级选择结果index

    sourceSchool: [{

        id: 211,

        text: '兰州双语幼儿园',

        children: [{

          id: 31,

          text: '小班'

        }, {

          id: 245,

          text: '中班'

        }, {

          id: 526,

          text: '大班'

        }]

      },

      {

        id: 2734,

        text: '兰州第一中学',

        children: [{

          id: 34,

          text: '高一级'

        }, {

          id: 234,

          text: '高二级'

        }]

      },

    ], //后台读取的所及数据源

 

    selectSchoolData: [], //用户选择的学校及班级 2022.11.14

 

三、方法

 

  //点击确定选择结果时，保存结果

  bindMultiPickerChange: function (e) {

    var result = e.detail.value;

    console.log('保存结果2', result);

    let classArray = this.data.sourceSchool[result[0]];

    let schoolArray = this.data.sourceSchool[result[0]]['children'][result[1]]

    this.setData({

      selectSchoolData: [classArray, schoolArray]

    })

  },

 

  //选择列变更时，处理下级数组变更

  bindMultiPickerColumnChange: function (e) {

    console.log('选择的是>>>', e.detail)

    var column = e.detail.column;

    var index = e.detail.value;

    var array = this.data.arraySchool;

    if (column == 0) {

      array[1] = array[column][index].children;

      this.setData({

        arraySchool: array

      });

    } else if (column == 1) {

      //最后一列不处理

    }

  },