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

发布时间：2020-12-16 03:33:24 所属栏目：百科来源：网络整理

导读：%@ 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"htmlheadmeta http-equiv="Content-Type" conten

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!