小程序三级联动（动态获取数据）

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

做了两个小时才发现。。。不适合文字太多的联动，没办法。只能改成三个选择框的那种。在这里记录一下是如何做的，然后以后有用时再用。

const app = getApp();
Page({
  data: {
    index: null,
    picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
    multiNameArray: [
      ['请选择','无脊柱动物', '脊柱动物'],
      ['请选择','一年级','二年级'],
      ['请选择','1班','2班', '3班']
    ],
    muliArray:[[],[],[]],
    multiIndex: [0, 0, 0]
  },
  onLoad(){
    let that=this;
    var data = { 
      multiNameArray: that.data.multiNameArray,
      muliArray: that.data.muliArray
      }
    wx.request({
      url: app.globalData.root + 'service/WeChatParent.asmx/GetOnLoadSchoolList',
      method: 'post',
      success: function (datas) {
        console.log(datas);
        var resu = JSON.parse(datas.data.d);
        data.multiNameArray[0] = resu.nameList;
        data.muliArray[0]=resu.list;
        data.muliArray[1] = resu.gradelist;
        data.multiNameArray[1] = resu.gradenamelist;
        data.muliArray[2] = resu.classlist;
        data.multiNameArray[2] = resu.classname;
        that.setData(data)
      }
    })
  },
  PickerChange(e) {
    console.log(e);
  


    this.setData({
      index: e.detail.value
    })
  },
  MultiChange (e) {
    this.setData({
      multiIndex: e.detail.value
    })
  },
  MultiColumnChange(e) {
    let that=this;

    let multiIndex = that.data.multiIndex;
    let data = {
      multiNameArray: that.data.multiNameArray,
      muliArray: that.data.muliArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    console.log(e.detail);
   
   
    var sid = that.data.muliArray[0][multiIndex[0]].Id;
    var gid = that.data.muliArray[1][multiIndex[1]].Id;
    console.log(sid+"|"+gid);

    wx.request({
      url: app.globalData.root + 'service/WeChatParent.asmx/GetSchoolInfoList',
        method: 'post',
      data: {
        colId: e.detail.column,
        schoolId: sid,
        greadeId: gid
        },
        success: function (datas) {
          console.log(datas);
          var resu = JSON.parse(datas.data.d);
          switch (e.detail.column) {
            case 0:
              that.setData({ 'multiIndex[1]': 0 })
              that.setData({
                'multiNameArray[1]': resu.namelist,
                'muliArray[1]': resu.list
               })
              break;
            case 1:
              that.setData({
                'multiNameArray[2]': resu.namelist,
                'muliArray[2]': resu.list
              })
              break;
            // case 2:
            //   that.setData({
            //     'multiNameArray[2]': resu.namelist,
            //     'muliArray[2]': resu.list
            //   })
            //   break;
          }
        }
      })
  
    // switch (e.detail.column) {
    //   case 0:
    //     that.setData({ 'multiIndex[0]': e.detail.value })
    //     break;
    //   case 1:
    //     that.setData({ 'multiIndex[1]': e.detail.value })
    //     break;
    //   case 2:
    //     that.setData({ 'multiIndex[2]': e.detail.value })
    //     break;
    // }
    // this.setData(data);
  },
  TimeChange(e) {
    this.setData({
      time: e.detail.value
    })
  },
  DateChange (e) {
    this.setData({
      date: e.detail.value
    })
  },
  RegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
  },
})

wxml

<form>

  <view class="cu-form-group ">
    <view class='title'>邮件</view>
    <input placeholder="两字短标题" class='radius' name='input'></input>
  </view>
  <view class="cu-form-group">
    <view class='title'>输入框</view>
    <input placeholder="三字标题" class='radius' name='input'></input>
  </view>
  <view class="cu-form-group">
    <view class='title'>收货地址</view>
    <input placeholder="统一标题的宽度" class='radius' name='input'></input>
  </view>
  <view class="cu-form-group">
    <view class='title'>收货地址</view>
    <input placeholder="输入框带个图标" class='radius' name='input'></input>
    <text class='icon-locationfill text-orange'></text>
  </view>
  <view class="cu-form-group">
    <view class='title'>验证码</view>
    <input placeholder="输入框带个按钮" class='radius' name='input'></input>
    <button class='cu-btn bg-green shadow'>验证码</button>
  </view>
  <view class="cu-form-group">
    <view class='title'>手机号码</view>
    <input placeholder="输入框带标签" class='radius' name='input'></input>
    <view class="cu-capsule radius">
      <view class='cu-tag bg-blue '>
        +86
      </view>
      <view class="cu-tag line-blue">
        河北沧州
      </view>
    </view>
  </view>


  <view class="cu-form-group margin-top">
    <view class='title'>普通选择</view>
    <picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
      <view class="picker">
        {{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
      </view>
    </picker>
  </view>
  <view class="cu-form-group">
    <view class='title'>多列选择</view>
    <picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiNameArray}}">
      <view class="picker">
        {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
      </view>
    </picker>
  </view>
<view class="padding flex flex-direction">
  <button class='cu-btn bg-green margin-tb-sm lg'>提交</button>
</view>

<!-- 
  <view class="cu-form-group margin-top">
    <view class='title'>多级联动</view>
    <picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
      <view class="picker">
        {{region[0]}}，{{region[1]}}，{{region[2]}}
      </view>
    </picker>
  </view> -->
</form>

    [WebMethod(Description = "获取学校列表")]
        public string GetOnLoadSchoolList()
        {
            var list = new List<SchoolModel>();
            var gradeList= new List<SchoolModel>();
            var classList= new List<SchoolModel>();

            var schooLlist = ta_School.GetModelList("IsDelete", false);
            var nameList=new List<string>();
            var gradeNameList = new List<string>();
            var classNameList = new List<string>();
            foreach (var item in schooLlist)
            {
                list.Add(new SchoolModel{Id=item.ID,Name=item.Name});
                nameList.Add(item.Name);
            }

            var schoolId = schooLlist.First().ID;
            var gradeLists = PublicQuery.GetGradeListBySchoolId(schoolId);
            foreach (var item in gradeLists)
            {
                gradeList.Add(new SchoolModel { Id = item.ID, Name = item.Name });
                gradeNameList.Add(item.Name);
            }

            var gradeId = gradeLists.First().ID;
            var classs = PublicQuery.GetClassByGreadeId(schoolId,gradeId);
            foreach (var item in classs)
            {
                classList.Add(new SchoolModel { Id = item.ID, Name = item.Name });
                classNameList.Add(item.Name);
            }

            return new { list = list, nameList = nameList,gradelist=gradeList,gradenamelist=gradeNameList,classlist=classs,classname=classNameList }.ToJson();
        }

        [WebMethod(Description = "获取学校列表")]
        public string GetSchoolInfoList(int colId,int schoolId,int greadeId)
        {
            var list = new List<SchoolModel>();
            var nameList = new List<string>();
            switch (colId)
            {
                case 0:
                    var gradelist=PublicQuery.GetGradeListBySchoolId(schoolId);
                    list.Add(new SchoolModel{Id=0,Name="请选择"});
                    nameList.Add("请选择");
                    foreach (var item in gradelist)
                    {
                    list.Add(new SchoolModel{Id= item.ID, Name= item .Name});
                    nameList.Add(item.Name);
                    }
                    break;
                case 1:
                    var classs = PublicQuery.GetClassByGreadeId(schoolId, greadeId);
                    list.Add(new SchoolModel { Id = 0, Name = "请选择" });
                    nameList.Add("请选择");
                    foreach (var item in classs)
                    {
                        list.Add(new SchoolModel { Id = item.ID, Name = item.Name });
                        nameList.Add(item.Name);
                    }
                    break;
                case 2:

                    break;
            }

            return new { list = list, namelist = nameList }.ToJson();
        }

        public class SchoolModel
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }