<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.blockUI.js"></script>
<script type="text/javascript">
$(function(){
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
$("#city").change(function(){
$("#department option:not(:first)").remove();
var city=$(this).val();
if(city!=""){
var url="/employeeServlet";
var args={"locationId":city,"time":new Date()};
$.getJSON(url,args,function(data){
if(data.length==0){
alert("no department");
}else{
for(var i=0;i<data.length;i++){
var deptId=data[i].departmentId;
var deptName=data[i].departmentName;
$("#department").append("<option value='"+deptId+"'>"+deptName+"</option>")
}
}
});
}
});
});
</script>
</head>
<body>
<center>
<br><br>
City:
<select id="city">
<option value="">choose...</option>
<option value="hello">world</option>
<c:forEach items="${locations }" var="location">
<option value="${location.locationId }">${location.city }</option>
</c:forEach>
</select>
Department:
<select id="department">
<option value="">choose ...</option>
</select>
<br><br>
</center>
</body>
</html>
jquery.blockUI.js 下载地址：
http://download.csdn.net/detail/fanpengfei0/9730183
原文链接：https://www.f2er.com/ajax/161516.html