首先看一下簡單的樣式：

在頁面載入完畢後，所有部門的名字也全部顯示在下拉框中，下拉框繫結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。

需要注意的地方就是每次觸發事件呼叫這個函式的時候，要將第二級下拉框的內容初始化為‘請選擇’。