您的位置：首页 > 其它

Ajax_典型应用_2级联动__城市到部门的 Ajax 实现

2017-01-06 02:30 239 查看

<%@ 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航