通过ajax实现部门与员工的二级级联，三级级联相同的原理

首先看一下简单的样式：

在页面加载完毕后，所有部门的名字也全部显示在下拉框中，下拉框绑定onchange事件，通过ajax获得部门对应的所有员工名。

在加载部门的时候，我用的是ssm框架中的ModelAndView对象绑定了一个参数，参数中有所有部门的信息，在前台通过jstl标签处理参数。

html代码：

<form class="form-inline">
              <div class="form-group col-xs-offset-1">
                <label for="exampleInputName2">部门：</label>
                <select id="department" class="form-control" style="margin-right: 50px;" onchange="getemployee()">

                    <option>==请选择==</option>
                    <c:forEach var="department" items="${DepartmentList}">
                        <option value="${department.departmentId}">${department.departmentName}</option>
                    </c:forEach>
                </select>

                <label for="exampleInputEmail2">员工名：</label>
                <select id="employee" class="form-control" style="margin-right: 100px;"  onchange="alertdate()">

                    <option>==请选择==</option>


                </select>
                <button class="btn btn-primary">保存</button>
              </div>

后台controller代码：

/**
     * 按个人排班页面
     * @return
     */
    @RequestMapping("groupbyself")
    public ModelAndView GroupBySelf(){

        List<Department> departmentlist=scheduleservice.getAllDepaertment();

        ModelAndView mv=new ModelAndView();

        mv.setViewName("groupbyself");
        mv.addObject("DepartmentList", departmentlist);

        return mv;
    }

具体样式如下，我数据库中的部门只有一个。

js部分onchange事件代码：

function getemployee(){

            var departmentId=$("#department").val();

            var departmentName=$("#department option:checked").text();

            $("#employee").html("<option>==请选择==</option>"); //避免选择同一个部门多次生成一个部门的员工，所以每次查询员工前初始化

            $.ajax({
                url:"getEmployeeByDepartmentId",
                type:"post",
                async : false,
                data:{"departmentId":departmentId},
                success:function(msg){
                    if(msg!=null){
                        for(var i=0;i<msg.length;i++){
                            //alert(msg[i].employeeId);
                            $("#employee").append("<option value='"+msg[i].employeeId+"'>"+msg[i].employeeName+"</option>"); 
                        }
                    }
                }
            });

        }

第二个下拉框内容的后台代码：

/**
     * 根据部门id，得到该部门所有的成员
     * @param departmentId
     * @return
     */
    @ResponseBody
    @RequestMapping(value="getEmployeeByDepartmentId",produces="application/json;charset=UTF-8")
    public String GetEmployeeByDepartmentId(int departmentId){

        JSONArray employees=scheduleservice.getEmployeeByDepartId(departmentId);

        return employees.toString();
    }

每触发一次事件，就会获取前一下拉框当前选中的部门的id。将部门的id传入后台得到该部门所有的员工，传回json格式的字符串，在回调函数中通过for循环遍历，生成新的option。

需要注意的地方就是每次触发事件调用这个函数的时候，要将第二级下拉框的内容初始化为‘请选择’。