效果圖如下:
代碼邏輯梳理:
層層遞進，比如選擇了課程后，將對應的課程id保存，然后點擊選擇章時自動觸發對應的時間，根據這個課程ID獲取其下面的章信息。
其它的如節等，同理。
代碼說明:
如下代碼不規范，可以參考功能實現，切不可照搬照抄(當然了，可以作為一個反面代碼案例以告誡后來學習者，代碼嚴謹和規范的重要性)。
比如與像一些通用的js和css等可以放在CDN上。
比如這樣的標簽，如果像源代碼中摻雜大量的js代碼時，強烈建議將其抽出為一個外部js文件，主要方便管理和維護及其未來擴展。
源代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>創建課時</title> <link rel="stylesheet" href="../css/app.min.css"/> <link rel="stylesheet" href="../layui/css/layui.css" media="all"> </head> <body> <div class="rel alert-reg alert-reg2"> <div style="margin-left:90px;"> <table class="alert-tb tdh70" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td><em class="ico2 ico2-phone"></em></td> <td><label for="regPhone_">選擇課程：</label></td> <td> <span class="red">*</span> <select id="course_list" name="course_list" class="vi fctr_label_2" style="height:20px;"> <option value="" id="course_val">請選擇課程</option> </select> </td> <td></td> </tr> <tr> <td><em class="ico2 ico2-phone"></em></td> <td><label for="regPhone_">選擇章：</label></td> <td> <span class="red">*</span> <select onmouseover="chapterList()" id="chapter_list" class="vi fctr_label_2" style="height:20px;"> <option value="" id="chapter_val">請選擇章</option> </select> </td> <td></td> </tr> <tr> <td><em class="ico2 ico2-phone"></em></td> <td><label for="regPhone_">選擇節：</label></td> <td> <span class="red">*</span> <select onmouseover="quarterList()" id="quarter_list" class="vi fctr_label_2" style="height:20px;"> <option value="" id="quarter_val">請選擇節</option> </select> </td> <td></td> </tr> <tr> <td><em class="ico2 ico2-phone"></em></td> <td><label for="regPhone_">課時名稱：</label></td> <td> <span class="red">*</span> <input class="vi fctr_label_2" type="text" id="quarter_name" placeholder="請輸入課時名稱" maxlength="40"/> </td> <td></td> </tr> </table> <br> <br> <div align="center" > <button type="button" id="create_quarter" style="background-color: #7ED321;width: 150px;height: 36px;color: #FFFFFF">創建</button> </div> <br /> </div> </div> <script src="../js/jquery-1.11.3.min.js"></script> <script src="../layui/layui.js" charset="utf-8"></script> <script src="../js/layer/layer-v3.1.1/layer/mobile/layer.js" type="text/javascript"></script> <script src="../js/common.js" charset="utf-8"></script> <script type="text/javascript"> $(function () { courseListInfo(); $("#create_quarter").click(function(){ var courseId = $("#course_list").val(); var chapterId = $('#quarter_list option:selected') .val(); var quarterName = $("#quarter_name").val(); //alert("userCode = " + userCode) if(courseId==null || courseId==""){ layer.open({ content: '課程不能為空，請選擇課程' , skin: 'msg', time: 3 //3秒后自動關閉 }); return false; }else if(chapterId==null || chapterId==""){ layer.open({ content: '章節不能為空，請選擇章節' , skin: 'msg', time: 3 //3秒后自動關閉 }); return false; }else if(quarterName==null || quarterName==""){ layer.open({ content: '課時名稱不能為空' , skin: 'msg', time: 3 //3秒后自動關閉 }); return false; } else if(quarterName.length > 40){ layer.open({ content: '課時名稱太長' , skin: 'msg', time: 3 //3秒后自動關閉 }); return false; }else{ $.ajax({ async:false, url:RouterAPI.url.api.course_add_chapter, type:"POST", data : {"parentId":chapterId, "title":quarterName,"type":"lesson"}, dataType : 'json', success:function(data){ if(data.code=="000000"){ layui.use('layer', function(){ var layer = layui.layer; layer.alert("創建成功，返回課程管理頁面",{icon:1}); }); setTimeout(() => { parent.location.reload(); }, 600); return true; }else{ layui.use('layer', function(){ var layer = layui.layer; layer.alert(data.msg,{icon:5}); }); return false; } },error:function(XMLHttpRequest, textStatus, errorThrown){ alert("失敗"); // 狀態碼 alert(XMLHttpRequest.status); // 狀態 alert(XMLHttpRequest.readyState); // 錯誤信息 alert(textStatus); return false; } }); } }); }); //課程選擇發生變化 function courseListInfo(){ var creator = getMyCookie("userId"); $.ajax({ async:false, url:RouterAPI.url.api.course_list, type:"GET", data : {"creator":creator}, dataType : 'json', success:function(data){ if(data.code=="000000"){ if (data.data.length > 0) { for (var i = 0; i < data.data.length; i++) { var item = data.data[i]; console.log(data.data[i].id); $("#course_list").append('<option value="' + data.data[i].id + '">' + data.data[i].title + '</option>'); } } return true; }else{ layui.use('layer', function(){ var layer = layui.layer; layer.alert(data.msg,{icon:5}); }); } },error:function(XMLHttpRequest, textStatus, errorThrown){ alert("失敗"); // 狀態碼 alert(XMLHttpRequest.status); // 狀態 alert(XMLHttpRequest.readyState); // 錯誤信息 alert(textStatus); return false; } }); } //章選擇發生變化 function chapterList(){ var parentId = $('#course_list option:selected') .val(); var type="chapter"; $.ajax({ url : RouterAPI.url.api.course_chapter_list, type : "GET", data : { parentId : parentId, type : type }, success:function(result) { $("#chapter_list option[value != '']").remove(); for (var i = 0; i < result.data.length; i++) { $("#chapter_list").append("<option id='chapter_val' value='" + result.data[i].id + " '>" + result.data[i].title + "</option>"); } } }); } //節選擇變化 function quarterList(){ var parentId = $('#chapter_list option:selected') .val(); var type="unit"; $.ajax({ url : RouterAPI.url.api.course_chapter_list, type : "GET", data : { parentId : parentId, type : type }, success:function(result) { $("#quarter_list option[value != '']").remove(); for (var i = 0; i < result.data.length; i++) { $("#quarter_list").append("<option id='chapter_val' value='" + result.data[i].id + " '>" + result.data[i].title + "</option>"); } } }); } function getQueryString(name) { var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i")); if (result == null || result.length < 1) { return ""; } return result[1]; } </script> </body> </html>