效果图如下:

代码逻辑梳理:
层层递进，比如选择了课程后，将对应的课程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. Nginx深入详解之upstream分配方式

    一.分配方式 Nginx的upstream支持5种分配方式,下面将会详细介绍,其中,前三种为Nginx原生支持的分配方式,后两种为第三方支持的分配方式: 1.轮询 轮询是upstream的默认分配方式 ...

  2. MybatisGenerator生成SSM的dao层

    官网下载 mybatis generator 下载generator的release版本mybatis-generator-core-1.4.0-bundle.zip https://github.c ...

  3. Resource注解无法导入依赖使用javax.annotation的注解类

    Resource注解无法导入依赖使用javax.annotation的注解类 使用javax.annotation的注解类 javax.annotation.Resource 注解在eclipse中无 ...

  4. [摘抄] 4.require命令

    4.require命令 1. 基本用法 Node适用CommonJS模块规范,内置的require命令用于加载模块文件. require命令的基本功能是,读入并执行一个JavaScript文件,然后返 ...

  5. 面试题：栈的push和pop序列是否一致

    参数是两个数组,arr1,arr2 stack stack = new Stack() for(int i=0;j=0;i<arr1.length;i++){ stack.push(arr[i] ...

  6. js修改页面标题 title

    如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! /* * *添加首页description元数据meta标签 *创建一个meta元素,sName为该meta ...

  7. Linux chage命令详解

    原文 chage命令用于密码实效管理,该是用来修改帐号和密码的有效期限,接下来通过本文给大家介绍Linux chage命令相关知识,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧 lin ...

  8. 用Nodejs遍历云存储文件

    起因 最近想要将云存储中的文件去重.因为有现成的Nodejs的API,所以打算用Nodejs实现此功能. 伪代码如下: scanDir = function(uri){ return new Prom ...

  9. zabbix--4.0源码安装

    Zabbix4.0 源码编译安装 ps:其实相对 zabbix 来说,直接按照官网 yum 安装还是要方便点,我这里已经有 lnmp 的环境了,就想自己编译安装试下. 官网yum安装中文文档:http ...

  10. zabbix--告警消息内容更改

    zabbix 告警消息内容更改 自带的消息内容模板发送出来的消息着实有点丑陋,再加之是英文,这就让我有点尴尬了. 如下默认的消息内容: 更改过后的效果: 操作步骤 编辑默认的Report proble ...