效果图如下:

代码逻辑梳理:
层层递进，比如选择了课程后，将对应的课程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. Calendar类set方法中的坑

    最近写了一个支付宝微信对账报表,发现系统金额比支付宝微信的少好多,左查右查发现是追缴金额没统计到,再一查发现月结束日期为2019-09-31,9月咋会有31,为啥呢就追缴金额不行呢,因为其他类型用TI ...

  2. DataPipeline数据融合重磅功能丨一对多实时分发、批量读取模式

    为能更好地服务用户,DataPipeline最新版本支持: 1. 一个数据源数据同时分发(实时或定时)到多个目的地: 2.  提升Hive的使用场景: 写入Hive目的地时,支持选择任意目标表字段作为 ...

  3. Python数据分析 之时间序列基础

    1. 时间序列基础 import numpy as np import pandas as pd np.random.seed(12345) import matplotlib.pyplot as p ...

  4. 解决bootstrap模态框居中问题

    完美解决办法: 在bootstrap.js或bootstrap.min.js文件中找到Modal.prototype.show方法. 在that.$element.addClass('in').att ...

  5. C语言深入学习

    计算机存储篇 1.计算机对数据类型的辨别: 编译器在编译C程序时将其转变为汇编指令,其中指明了数据类型.此外,每种数据类型都有固定的存储长度,计算机运行程序时,会根据具体类型 读出相应长度的数据进行计 ...

  6. 在 Vim 中，删除 ^@ 符号的几种方法

    在 Vim 中,^@ 表示 ASCII 码中的 NULL 字符,编码为 0x00,占用一个字节. 删除方法 方法1,采用 <CTRL-V><CTRL-J> 或 <CTRL ...

  7. Linux基础：时间同步工具Chrony

    在Linux下,默认情况下,系统时间和硬件时间,并不会自动同步.在Linux运行过程中,系统时间和硬件时间以异步的方式运行,互不干扰.硬件时间的运行,是靠Bios电池来维持,而系统时间,是用CPU t ...

  8. JAVA分页工具类

    最近写了一个代码生成工具,分享下该工具下的分页工具 一.分页工具类 package com.qy.code.api.page; import java.io.Serializable; import ...

  9. PS用户配置服务连接出错

    PS用户配置服务连接出错 [2019-07-30 14:58:25.475]-[INFO ]-[xxxx.profileserver.service.ProfileServerImpl:1430][1 ...

  10. Explorer(2019年牛客多校第八场E题+线段树+可撤销并查集)

    题目链接 传送门 题意 给你一张无向图,每条边\(u_i,v_i\)的权值范围为\([L_i,R_i]\),要经过这条边的条件是你的容量要在\([L_i,R_i]\),现在问你你有多少种容量使得你可以 ...