初始樣子：

級聯選擇：

級聯選擇沒有課程時：

需要封裝的資料結構：

接下來是實現過程

前端程式碼

<form class="layui-form" onclick="return false;">
     <button class="layui-btn layui-btn-normal" id="add_course">新增課程</button>
     <button class="layui-btn layui-btn-danger" id="del_all" data-type="getCheckData"
 
>批量刪除</button>
     <div class="layui-form-item" style="float: left;">
         <div class="layui-inline">
             <div class="layui-input-inline">
                    <select name="typeId" id="typeId" lay-ignore style="width: 100%; height: 38px; border: 1px solid #e6e6e6;"
 
>
                         <option value="">課程型別</option>
                    </select>
             </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="courseName" id="courseName"
 
 lay-ignore style="width: 100%; height: 38px; border: 1px solid #e6e6e6;">
                    <option value="">課程名稱</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo" id="search_btn">搜尋</button>
            </div>
        </div>
    </div>
</form>

JS程式碼

$.each(msg, function(k, v){
     $("#typeId").append("<option value='"+v.type.typeId+"'>"+v.type.typeName+"</option>");
 });

 $("#typeId").change(function(){
     var tmp = $(this).val();
     $("#courseName").empty();
    $.each(msg, function(k, v){
        if(v.type.typeId == tmp){
            if(v.course.length != 0){
                $.each(v.course, function(key, value){
                    console.log(value.courseName);
                    $("#courseName").append("<option value='"+value.courseName+"'>"+value.courseName+"</option>");
                });
                $("#search_btn").removeClass("layui-btn-disabled");
            }else{
                $("#courseName").append("<option>"+'無課程'+"</option>");
                $("#search_btn").addClass("layui-btn-disabled");
            }

        }
    })
})

封裝資料的service

/**
 * @function
 * @return
 */
public List<Map<String,Object>> groupType(){
    List<Type> list_type = typeMapper.selectByExample(null);
    // 將封裝的資料放在List<Map<String, Object>>的集合中
    List<Map<String,Object>> list = new ArrayList<>();
    for (Type type: list_type) {
        List<Course> list_course = courseService.selectByExample(type.getTypeId());
        Map<String,Object> map = new HashMap<>();
        map.put("type",type);
        map.put("course", list_course);
        list.add(map);
    }
    return list;
}

控制器controller

/**
* @function 載入課程錄入頁面
* @return
*/
@RequestMapping("/list")
public String load_page(Model model){
    // 獲取的封裝的資料
   List<Map<String, Object>> group_list = typeService.groupType();
   Map<String, Object> map = new HashMap<>();
   map.put("groups", group_list);
   model.addAllAttributes(map);
   return "course/list";
}

這樣就可以實現二級級聯下拉框實現了！