校园小程序三级联动（学院/专业/班级）源码

在开发校园类微信小程序时，总是不可避免地需要用到“学院”“专业”“班级”三级联动，让用户尽可能少地输入文字而是选择，以提升用户体验。

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
</picker>

// pages/bm/bm.js
Page({/*** 页面的初始数据*/data: {college: '',//存放地区major: '',//存放维修站class:'',// 存放维修人员multiArray: [[], [], []],multiIndex: [0, 0, 0]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getclasslist();},getclasslist:function(){let that=thisthat.setData({college: ['化生院', '土环院','马院','人文院','外院','美院','电信院','传媒院','体院','理学院','经管院','旅文院','音舞院','国学院'],major: { '化生院': ['化学(师范)', '生物工程', '食品质量与安全', '生物技术', '生物技术(师范)','制药工程','材料化学'], '土环院': ['工程管理', '土木工程', '测绘工程','建筑学'], '马院': ['思想政治教育（师范）'],'人文院': ['汉语言文学（师范）', '秘书学', '法学','预科'],'外院':['英语（师范）', '商务英语', '日语'],'美院':['美术学', '视觉传达设计', '环境设计','产品设计'],'电信院':['电子信息工程', '电子科学与技术', '计算机科学与技术','通信工程','软件工程','数据科学与大数据技术','机械设计制造及自动化','教育技术'],'传媒院':['广告学', '广播电视学', '广播电视编导','数字媒体技术'],'体院':['体育教育（师范）'],'理学院':['数学与应用数学（师范）', '信息与计算科学', '物理学（师范）'],'经管院':['国际经济与贸易', '市场营销', '金融工程','财务管理'],'旅文院':['旅游管理', '文化产业管理', '航空服务艺术与管理'],'音舞院':['音乐学', '舞蹈学'],'国学院':['汉语言文学（国学）']},class:{'化学(师范)':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'生物工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'食品质量与安全':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '生物技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '生物技术(师范)':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'制药工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'材料化学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '工程管理':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '土木工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '测绘工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'建筑学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '思想政治教育（师范）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'汉语言文学（师范）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '秘书学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'], '法学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'预科':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'英语（师范）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'商务英语':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'日语':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'美术学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'视觉传达设计':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'环境设计':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'产品设计':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'电子信息工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'电子科学与技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'计算机科学与技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'通信工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'软件工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'数据科学与大数据技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'机械设计制造及自动化':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'教育技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'广告学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'广播电视学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'广播电视编导':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'数字媒体技术':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'体育教育（师范）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'数学与应用数学（师范）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'信息与计算科学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'物理学（师范）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'国际经济与贸易':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'市场营销':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'金融工程':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'财务管理':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'旅游管理':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'文化产业管理':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'航空服务艺术与管理':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'音乐学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'舞蹈学':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704'],'汉语言文学（国学）':['2001','2002','2003','2004','1901','1902','1903','1904','1801','1802','1803','1804','1701','1702','1703','1704']}})that.data.multiArray[0] = that.data.collegethat.data.multiArray[1] = this.getArr(that.data.college[0], that.data.major);that.data.multiArray[2] = this.getArr(that.data.multiArray[1][0], that.data.class);that.setData({multiArray: that.data.multiArray})},bindMultiPickerColumnChange: function (e) {let that=thisvar data = {multiArray: this.data.multiArray,multiIndex: this.data.multiIndex};data.multiIndex[e.detail.column] = e.detail.value;switch (e.detail.column) {case 0://当第一列改变  修改置第二列数据let arr = that.getArr(that.data.college[e.detail.value], that.data.major)data.multiArray[1]=arrthat.setData({multiArray: data.multiArray})//从第二列中拿出第一项，设置第三列的数据let arrColumn2 = that.getArr(arr[0], that.data.class)data.multiArray[2] = arrColumn2that.setData({multiArray: data.multiArray})break;case 1://当第二列改变 改变第三列数据let arr2 = that.getArr(data.multiArray[1][e.detail.value], that.data.class)data.multiArray[2] = arr2that.setData({multiArray: data.multiArray})break;}},getArr:function(value,arr){for (let i in arr) {if (value == i) {return arr[i]}}},bindMultiPickerChange: function (e) {this.setData({multiIndex: e.detail.value})//console.log(multiIndex)},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

校园小程序三级联动（学院/专业/班级）源码相关推荐

校园跑腿微信小程序跑腿同学带直播新版源码
校园跑腿微信小程序跑腿同学带直播新版源码适用类型微信小程序测试环境:系统环境:CentOS Linux 7.6.1810 (Core).运行环境:宝塔 Linux v7.0.3(专业版).网站环 ...
微信小程序支付功能-服务器端实现(附源码)
实现了小程序最新的V3版本支付功能, 包括:支付.支付通知.退款.退款通知. 服务器端使用java开发,springboot框架源码链接在评论中微信小程序支付功能-服务器端实现(附源码)_哔哩哔哩 ...
微信小程序多项选择器_微信小程序三级联动之多列选择器
有些时候,三级联动业务场景并不只是全国地区选择,可能还涉及到自定义分类的三级联动,这时就需要使用微信的多列选择器. 如果只是一列字段,或者每次拖动一次都去服务端取,会比较容易. 如果想一次定义好jso ...
校园二手交易商城系统小程序-JAVA【数据库设计、源码、开题报告】
第一章绪论 1.1选题背景互联网是人类的基本需求,特别是在现代社会,个人压力增大,社会运作节奏高,随着互联网的快速发展,用户的需求也越来越高,用户也将越来越多依靠互联网而不是自己获取信息,使得各 ...
springboot基于微信小程序的选课系统毕业设计-附源码060000
目录摘要 1 1 绪论 1 1.1研究背景 1 1.2开发意义 1 1.3系统开发技术的特色 1 1.4论文结构与章节安排 1 2选课系统小程序系统分析 3 2.1 可行性分析 3 2.2 系统流 ...
springboot+mysql+微信小程序知识店铺平台-计算机毕业设计源码17094
摘要科技进步的飞速发展引起人们日常生活的巨大变化,电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用.信息时代的到来已成为不可阻挡的时尚潮流,人类发展的历史正进入一个新时代. ...
springboot+mysql+微信小程序社区共享书屋-计算机毕业设计源码03656
目录摘要 1 绪论 1.1 研究背景及意义 1.2国内外研究现状 1.3系统开发的内容 1.4论文结构与章节安排 1.5小程序框架以及目录结构介绍 2社区共享书屋小程序系统分析 2.1 可行性分 ...
基于微信小程序的加油服务系统毕业设计源码
目录一.程序介绍: 三.文档目录: 四.运行截图: 五.数据库表: 六.代码展示: 七.更多学习目录: 八.互动留言一.程序介绍: 文档:开发技术文档.参考LW.答辩PPT,部分项目另有其他文档 ...
基于微信小程序+springboot的在线商城系统毕业设计源码
目录一.可按需求定制:是二.资源介绍: 三.文档目录: 四.项目截图: 五.数据库表截图: 六.代码展示: 七.更多项目: 八.资源获取:添加作者微信一.可按需求定制:是二.资源介绍: 项目学 ...

校园小程序三级联动（学院/专业/班级）源码

校园小程序三级联动（学院/专业/班级）源码相关推荐

最新文章

热门文章