//使用c標籤遍歷list取值

<select name="hospital" class="form-control" onchange="changeHospital(this.options[this.options.selectedIndex].value)">
	<option value="" label=" 請選擇"/>
	    <c:forEach items="${hospitalList}" var="hospital">
		<option  value="${hospital.id}"> ${hospital.name}</option>
            </c:forEach>
</select>

<span>科室：</span>
	<select id="department" name="department" class="form-control ">
		<option value="" label=" 請選擇"/>
		<c:forEach items="${DepartList}" var="depart">
			<option  value="${depart.id}"> ${depart.name}</option>
		</c:forEach>
	</select>
 

下面直接寫function即可

</script>	
	function changeHospital(id){
		if(id){//判斷是否在請選擇option
		 $.ajax({  
                         type : "get",  
                         url : "${ctx}/sys/office/listDepartmentByHosptial",  
                         async : false,  
                         data : {  
                             "id" : id 
                         },  
                     success : function(data) {  
            	             //先清空原有資料
            	             $("#department").html("");
            	              if(data.length>=0){ //後臺傳遞過來的list為一個array陣列需要用length去接收長度。
            	                    var optionStr ='<option value="" label="請選擇" />';
                                      for(var i = 0; i < data.length; i++){
                    	                  optionStr+="<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                                   }
                             $("#department").append(optionStr);
                              }  
                             }  
       		    });  
		} 
	}


</script>	
 

後臺傳遞引數departmentId,前端預設選中狀態

<select id="department" name="department" class="form-control ">
	<option value="" label=" 請選擇"/>
     <c:forEach items="${DepartList}" var="depart">
	<option  value="${depart.id}"  <c:if test="${departmentId == depart.id}"> selected="selected" </c:if>> ${depart.name}</option>
     </c:forEach>
</select>