基于ajax的三级联动

先上效果图

在点击院系的时候程序通过ajax异步查询得到该专业的名称,在查询专业名称的时候得到班级信息

ajax代码如下

   //根据s_id查询所有专业的信息
      function findClass()
    {              
        var Id = $("#sProfessional").val(); //获取Id    sProfessional的值
        $.ajax({
            url:"<%=basePath%>student/findClass.action",    //传到后台
            type:"post",
            timeout:"1000",
            data:{"Id":Id},  将获取的值传到后台
            success:function(data)
            {                
                $("#sClass option").remove();
                $("#sClass").append("<option value='0'>--请选择--</option>");
                if (data != null)
                {
                    for ( var i = 0; i < data.length; i++)
                    {
                        var s_id = data[i].s_id;
                        var title = data[i].title;
                        $("#sClass").append("<option value="+s_id+">"
                                + title + "</option>");
                        }
                    }
                },
                error : function(XMLResponse) {
                    alert(XMLResponse.responseText);
                    }        
                });
        }
   
//     查询学生信息

前端代码如下

        <div class="form-group">
                            <label for="sDepartment">院系</label> <select class="form-control"
                onchange="findsProfessional()"     id="sDepartment" name="sDepartment">
                                <option value="">--请选择--</option>
                                <c:forEach items="${Department}" var="row">     //这里的值由后端model存储hou 
                                    <option value="${row.s_id}">${row.title}</option>  
                                </c:forEach>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="sProfessional">学生专业</label> <select   onchange="findClass()"
                                class="form-control" id="sProfessional" name="sProfessional">
                                <option value="">--请选择--</option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="sClass">学生班级</label> <select class="form-control"
                                id="sClass" name="sClass">
                                <option value="">--请选择--</option>
                            </select>
                        </div>

后端代码如下

    /**
     * 根据院系s_id查询所有专业的信息
     *
     */
    @RequestMapping("/student/findsProfessional.action")
    @ResponseBody
    public List<BaseDict> list2(@RequestParam("Id")String Id1) {

        int  id=Integer.parseInt(Id1);
        List<BaseDict> getsProfessionalById = studentService.getsProfessionalById(id);    
        for(BaseDict baseDict:getsProfessionalById)
        {
            
            System.out.println(baseDict.getTitle());
        }
        return studentService.getsProfessionalById(id);     
    }    
    /**
     * 根据专业s_id查询所有班级的信息
     *
     */
    @RequestMapping("/student/findClass.action")
    @ResponseBody
    public List<BaseDict> list3(@RequestParam("Id")String id1) {    
        int  id=Integer.parseInt(id1);
         List<BaseDict> getsClasslById = studentService.getsClasslById(id);
        for(BaseDict baseDict:getsClasslById)
        {
            
            System.out.println(baseDict.getTitle());
        }
        return studentService.getsClasslById(id); 
    }    

恭喜你又学会一项技能