微信小程序中課程選擇器如何實現？先看看實現效果：

　　代碼如下

　　wxml

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

　　js

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

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

　微信小程序中實現課程選擇已全部講述完，希望大家多多關注后續更多精彩內容。