微信小程序之二级联动下拉列表

作者: 白衣诗人 | 来源:发表于2018-12-26 16:20 被阅读586次
    <view class="section">
      <view class="section__title">多列选择器</view>
      <picker mode="multiSelector" class='asdas' bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
            <input value='{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}'></input>
      </picker>
    </view>
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
        multiArray: [['小学', '初中', '高中', '大学'], ['语文', '数学']],
        objectMultiArray: [
          [
            {
              id: 0,
              name: '小学'
            },
            {
              id: 1,
              name: '初中'
            },
            {
              id: 2,
              name: '高中'
            },
            {
              id: 3,
              name: '大学'
            }
          ],
          [
            {
              id: 0,
              name: '语文'
            },
            {
              id: 1,
              name: '数学'
            }
          ]
        ],
        multiIndex: [],
      },
      bindMultiPickerChange: function (e) {
        //console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          multiIndex: e.detail.value
        })
      },
      bindMultiPickerColumnChange: function (e) {
        // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
        var data = {
          multiArray: this.data.multiArray,
          multiIndex: this.data.multiIndex
        };
    
       data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
          case 0:
            switch (data.multiIndex[0]) {
              case 0:
                data.multiArray[1] = ['语文', '数学', '其他'];
                break;
              case 1:
                data.multiArray[1] = ['语文', '数学','英语', '其他'];
                break;
              case 2:
                data.multiArray[1] = ['语文', '数学', '英语', '历史', '其他'];
                break;
              case 3:
                data.multiArray[1] = ['高数', '政治', '专业', '选修', '实验', '其他'];
                break;
            }
            break;
        }
        this.setData(data);
      }
    })
    

    相关文章

      网友评论

        本文标题:微信小程序之二级联动下拉列表

        本文链接:https://www.haomeiwen.com/subject/ykohlqtx.html