效果图如下:

代码逻辑梳理:
层层递进，比如选择了课程后，将对应的课程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="" cellspacing="" border="">

            <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=""/>

                </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秒后自动关闭

                    });

                return false;

            }else if(chapterId==null || chapterId==""){

                layer.open({

                      content: '章节不能为空，请选择章节' ,

                      skin: 'msg',

                      time:  //3秒后自动关闭

                    });

                return false;

            }else if(quarterName==null || quarterName==""){

                layer.open({

                      content: '课时名称不能为空' ,

                      skin: 'msg',

                      time:  //3秒后自动关闭

                    });

                return false;

            } else if(quarterName.length > ){

                layer.open({

                      content: '课时名称太长' ,

                      skin: 'msg',

                      time:  //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==""){

                            layui.use('layer', function(){

                                  var layer = layui.layer;

                                  layer.alert("创建成功，返回课程管理页面",{icon:});

                                });

                            setTimeout(() => {

                                parent.location.reload(); 

                            }, );

                            return true;

                        }else{

                            layui.use('layer', function(){

                                  var layer = layui.layer;

                                  layer.alert(data.msg,{icon:});

                                });

                            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==""){

                    if (data.data.length > ) {

                        for (var i = ; 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:});

                        });

                }

            },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 = ; 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 = ; 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 < ) {

            return "";

        }

        return result[];

    }

</script> 

</body>

</html>

js之select三级联动的更多相关文章

  1. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  2. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  3. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  4. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  5. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  6. js实现省市区三级联动

    电商平台或者一些网站的个人信息部分,通常会有填写地址的功能.该功能一般分为二级联动(省.市)和三级联动(省.市.区),只需要JavaScript就可以实现. 这里介绍一种很简洁易用的方法.参考地址:h ...

  7. js+ajax编码三级联动

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

  8. js原生实现三级联动下拉菜单

    js代码: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

  9. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

随机推荐

  1. python基础04--list,cou,dict

    1.1 列表list 1.列表可以完成大多数集合类的数据结构实现.列表中元素的类型可以不相同,它支持数字,字符串,列表,元组,集合,字典 2.列表是有序的, 可以索引,切片 3.List中的元素是可以 ...

  2. linux ssh scp免密码

    1.首先登入一台linux服务器做为母机(即登入其他linux系统用这台做为入口):执行一行命令生成key文件:ssh-keygen -t rsa 2.在母机上,进入/root/.ssh目录,找到id ...

  3. xen虚拟化环境安装

    1. 操作系统安装 OEL下载地址大全: http://koumm.blog.51cto.com/703525/1283801 # uname -a Linux localhost 2.6.39-40 ...

  4. iOS之Category关联属性

    Objective-C /** 原文件 */ // Person.h #import <Foundation/Foundation.h> @interface Person : NSObj ...

  5. 5 dex文件

    Dex文件中数据结构 类型 含义 u1 等同于uint8_t,表示1字节无符号数 u2 等同于uint16_t,表示2字节的无符号数 u4 等同于uint32_t,表示4字节的无符号数 u8 等同于u ...

  6. 从零开始搭建vue+element-ui后台管理系统项目到上线

    前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...

  7. Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port

    Httpd服务入门知识-Httpd服务常见配置案例之修改监听的IP和Port 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看默认配置 [root@node101.yinzh ...

  8. 自动化渗透测试工具(Cobalt Strike)3.1 最新破解版

    自动化渗透测试工具(Cobalt Strike)3.1 最新破解版[附使用教程] Cobalt Strike是一款专业的自动化渗透测试工具,它是图形化.可视化的,图形界面非常友好,一键傻瓜化使用MSF ...

  9. (一)Kubernetes 系统基础

    Kubernetes介绍 什么是Kubernetes? Kubernetes是容器集群管理系统,是一个开源的平台,可以实现容器集群的自动化部署.自动扩缩容.维护等功能. 使用Kubernetes可以: ...

  10. Win10 家庭版 VMware 无法启动 解决办法

    引发原因 最近更新了一个补丁 KB4524147 安装后会导致 VM 无法打开(如果你没有安装hyper-v的话) 解决方案 控制面板 -> 程序 -> 查看已安装的更新 -> 找到 ...