js之select三级联动
Posted youcong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js之select三级联动相关的知识，希望对你有一定的参考价值。
效果图如下:
代码逻辑梳理:
层层递进，比如选择了课程后，将对应的课程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>
以上是关于js之select三级联动的主要内容，如果未能解决你的问题，请参考以下文章