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三级联动的主要内容,如果未能解决你的问题,请参考以下文章

封装的三级联动及应用

省市区三级联动JS部分简单版

三级联动

Ajax三级联动

js三级联动

JS全国城市三级联动