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

最新推荐文章于 2021-05-09 13:58:19 发布

_noname

最新推荐文章于 2021-05-09 13:58:19 发布

阅读量879

点赞数

分类专栏： web 文章标签： ajax jquery

本文链接：https://blog.csdn.net/williamfan21c/article/details/54131385

版权

web 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

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