<!--單位下拉框-->
<select class="easyui-combobox" name="deptName" id="deptId" label="單位：" 
                      labelPosition="left" data-options=""  style="width:20%">
	  <option value=''>--請選擇單位--</option>
      <c:forEach items="${officeList}" var="dept" varStatus="status">
            <option value="${dept.id}">${dept.name}</option>
      </c:forEach>
</select>

<!--專案下拉框-->
<select class="easyui-combobox" name="projectName" id="projectId" label="專案：" 
                editable="false" labelPosition="left" data-options="" style="width:20%">
	<option value=''>--請選擇專案--</option>
	<c:forEach items="${proList}" var="pro" varStatus="status">
		<option value="${pro.id}">${pro.proName}</option>
	</c:forEach>
</select>
 

//這裡使用onChange替換onSelect,兩者不同之處在於: 
// onChange事件使用者點選(--請選擇單位--)會觸發(查詢所有單位),
// onSelect事件在使用者點選(--請選擇單位--)不觸發
$("#deptId").combobox({
    onChange: function () {
        // $("#projectId").combobox("setValue",'');//清空課程
        var id = $('#deptId').combobox('getValue');
        //如果id為''空串,則查詢所有專案,當傳入id有值,則查詢掛在此單位下的專案
        $("#projectId").combobox({
            disabled: false,
            url: "${baseUrl}/attence/getProjectByDeptId.shtml?deptId=" + id,
            //從遠端載入列表資料的 URL 
            valueField: 'id', //這裡的id name就是返回的List<Map>中map的鍵和值
            textField: 'name'
        });
    }
});