微信小程序中課程選擇器如何實(shí)現(xiàn)？先看看實(shí)現(xiàn)效果：

　　代碼如下

　　wxml

　　<view class="urg_input">
　　<picker class="gradePicker" mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
　　<input type="idcard" placeholder="請(qǐng)選擇您的所授學(xué)科" value="{{teachPlaceholder}}" disabled></input>
　　</picker>
　　</view>

　　js

　　import { primarySchool, juniorSchool, highSchool, bigSchool} from './AllDataConfig.js'
　　Page({
　　data: {
　　multiArray: [
　　['小學(xué)', '初中', '高中', '大學(xué)'],
　　['一年級(jí)', '二年級(jí)', '三年級(jí)', '四年級(jí)', '五年級(jí)', '六年級(jí)'],
　　primarySchool[0]
　　],
　　multiIndex: [0, 0, 0],
　　teachPlaceholder: '',
　　},
　　/**
　　* 學(xué)科選擇
　　*/
　　bindMultiPickerChange: function (e) {
　　// 確定之后獲取選中的課程
　　// console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
　　// 返回所選的三個(gè)參數(shù)
　　this.setData({
　　multiIndex: e.detail.value
　　})
　　let jiBie = this.data.multiArray[0][this.data.multiIndex[0]];
　　let grade = this.data.multiArray[1][this.data.multiIndex[1]];
　　let course = this.data.multiArray[2][this.data.multiIndex[2]];
　　let teachCourse = jiBie + '' + grade + '' + course;
　　this.setData({
　　teachPlaceholder: teachCourse
　　})
　　},
　　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;
　　// 第幾列判斷 只判斷兩列，第一列的級(jí)別，第二列的年級(jí)
　　switch (e.detail.column) {
　　// 選擇第一列，設(shè)置第二列對(duì)應(yīng)的年級(jí)
　　case 0:
　　switch (data.multiIndex[0]) {
　　// 小學(xué)
　　case 0:
　　data.multiArray[1] = ['一年級(jí)', '二年級(jí)', '三年級(jí)', '四年級(jí)', '五年級(jí)', '六年級(jí)'];
　　data.multiArray[2] = primarySchool[0];
　　break;
　　// 初中
　　case 1:
　　data.multiArray[1] = ['初一', '初二', '初三'];
　　data.multiArray[2] = juniorSchool[0];
　　break;
　　// 高中
　　case 2:
　　data.multiArray[1] = ['高一', '高二', '高三'];
　　data.multiArray[2] = highSchool[0];
　　break;
　　// 大學(xué)
　　case 3:
　　data.multiArray[1] = ['大一', '大二', '大三', '大四'];
　　data.multiArray[2] = bigSchool[0];
　　break;
　　}
　　data.multiIndex[1] = 0;
　　data.multiIndex[2] = 0;
　　break;
　　// 選擇第二列，設(shè)置對(duì)應(yīng)的科目
　　case 1:
　　/**
　　* 選擇第一列對(duì)應(yīng)的級(jí)別，然后判斷第二列的年級(jí)，從而設(shè)置課程
　　*/
　　switch (data.multiIndex[0]) {
　　// 小學(xué)
　　case 0:
　　switch (data.multiIndex[1]) {
　　// 一年級(jí)
　　case 0:
　　data.multiArray[2] = primarySchool[1];
　　break;
　　// 二年級(jí)
　　case 1:
　　data.multiArray[2] = primarySchool[2];
　　break;
　　// 三年級(jí)
　　case 2:
　　data.multiArray[2] = primarySchool[3];
　　break;
　　// 四年級(jí)
　　case 3:
　　data.multiArray[2] = primarySchool[4];
　　break;
　　// 五年級(jí)
　　case 4:
　　data.multiArray[2] = primarySchool[5];
　　break;
　　// 六年級(jí)
　　case 5:
　　data.multiArray[2] = primarySchool[6];
　　break;
　　}
　　break;
　　// 初中
　　case 1:
　　switch (data.multiIndex[1]) {
　　// 初一
　　case 0:
　　data.multiArray[2] = juniorSchool[1];
　　break;
　　// 初二
　　case 1:
　　data.multiArray[2] = juniorSchool[2];
　　break;
　　// 初三
　　case 2:
　　data.multiArray[2] = juniorSchool[3];
　　break;
　　}
　　break;
　　// 高中
　　case 2:
　　switch (data.multiIndex[1]) {
　　// 高一
　　case 0:
　　data.multiArray[2] = highSchool[1];
　　break;
　　// 高二
　　case 1:
　　data.multiArray[2] = highSchool[2];
　　break;
　　// 高三
　　case 2:
　　data.multiArray[2] = highSchool[3];
　　break;
　　}
　　break;
　　// 大學(xué)
　　case 3:
　　switch (data.multiIndex[1]) {
　　// 大一
　　case 0:
　　data.multiArray[2] = bigSchool[1];
　　break;
　　// 大二
　　case 1:
　　data.multiArray[2] = bigSchool[2];
　　break;
　　// 大三
　　case 2:
　　data.multiArray[2] = bigSchool[3];
　　break;
　　// 大四
　　case 3:
　　data.multiArray[2] = bigSchool[4];
　　break;
　　}
　　break;
　　}
　　data.multiIndex[2] = 0;
　　break;
　　}
　　// console.log(data.multiIndex);
　　this.setData(data);
　　},
　　})

　　AllDataConfig.js

　　// 課程設(shè)置
　　// 小學(xué)
　　export const primarySchool = [
　　// 默認(rèn)設(shè)置課程
　　['語文', '數(shù)學(xué)', '英語','體育','美術(shù)','化學(xué)'],
　　// 一年級(jí)
　　['語文', '數(shù)學(xué)', '英語'],
　　// 二年級(jí)
　　['語文', '數(shù)學(xué)', '英語'],
　　// 三年級(jí)
　　['語文', '數(shù)學(xué)', '英語'],
　　// 四年級(jí)
　　['語文', '數(shù)學(xué)', '英語'],
　　// 五年級(jí)
　　['語文', '數(shù)學(xué)', '英語'],
　　// 六年級(jí)
　　['語文', '數(shù)學(xué)', '英語']
　　]
　　// 初中
　　export const juniorSchool = [
　　// 默認(rèn)設(shè)置課程
　　['語文', '數(shù)學(xué)', '英語', '美術(shù)', '音樂', '政治', '歷史', '物理', '化學(xué)', '地理', '生物'],
　　// 初一
　　['語文', '數(shù)學(xué)', '英語', '美術(shù)', '音樂', '政治', '歷史', '地理', '生物'],
　　// 初二
　　['語文', '數(shù)學(xué)', '英語', '政治', '歷史', '物理', '化學(xué)', '地理', '生物'],
　　// 初三
　　['語文', '數(shù)學(xué)', '英語', '政治', '歷史', '物理', '化學(xué)'],
　　]
　　// 高中
　　export const highSchool = [
　　// 默認(rèn)設(shè)置課程
　　['語文', '數(shù)學(xué)', '英語', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'],
　　// 高一
　　['高一', '語文', '數(shù)學(xué)', '英語', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'],
　　// 高二
　　['高二', '語文', '數(shù)學(xué)', '英語', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'],
　　// 高三
　　['高三', '語文', '數(shù)學(xué)', '英語', '政治', '歷史', '地理', '物理', '化學(xué)', '生物'],
　　]
　　export const bigSchool = [
　　// 默認(rèn)設(shè)置課程
　　['數(shù)學(xué)', '英語', '美術(shù)', '計(jì)算機(jī)', '政治'],
　　// 大一
　　['大一', '數(shù)學(xué)', '英語', '美術(shù)', '計(jì)算機(jī)', '政治'],
　　// 大二
　　['大二', '數(shù)學(xué)', '英語', '美術(shù)', '計(jì)算機(jī)', '政治'],
　　// 大三
　　['大三', '數(shù)學(xué)', '英語', '美術(shù)', '計(jì)算機(jī)', '政治'],
　　// 大四
　　['大四', '數(shù)學(xué)', '英語', '美術(shù)', '計(jì)算機(jī)', '政治'],
　　]

　微信小程序中實(shí)現(xiàn)課程選擇已全部講述完，希望大家多多關(guān)注后續(xù)更多精彩內(nèi)容。