SSM框架整和layui的二级级联下拉框实现

初始样子：

级联选择：

级联选择没有课程时：

需要封装的数据结构：

接下来是实现过程

---

前端代码

<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";
}

这样就可以实现二级级联下拉框实现了！