<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <!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=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.blockUI.js"></script> <script type="text/javascript"> /** * */ $(function(){ $("#city").change(function(){ $("#department option:not(:first)").remove(); var city = $(this).val(); if(city != ""){ var params = {}; params.loc = city; $.ajax({ async:false, type: "POST", url: "${pageContext.request.contextPath}/linkageController/allDepartments",//注意路径 data:params, dataType:"json", success:function(data){ alert("返回的data = " + data.length); if (data.length == 0){ alert("当前城市没有部门"); }else{ for (var i = 0; i < data.length; i++) { var departmentId = data[i].deptId; var departmentName = data[i].deptName; //alert(departmentId); //alert(departmentName); $("#department").append("<option value='" + departmentId + "'>" + departmentName + "</option>"); } } }, error:function(data){ alert("发生错误"); alert(data.result); } }); } }); //============================================= $("#department").change(function(){ alert("department已经改变"); $("#employee option:not(:first)").remove(); var dept = $(this).val(); alert("department = " + dept); if(dept != ""){ var params = {}; params.departmentId = dept; alert("标记2"); $.ajax({ async:false, type: "POST", url: "${pageContext.request.contextPath}/linkageController/allEmployees",//注意路径 data:params, dataType:"json", success:function(data){ alert("已经返回data"); alert("返回的data = " + data.length); if (data.length == 0){ alert("当前部门没有员工"); }else{ alert("当前部门有员工"); for (var i = 0; i < data.length; i++) { var empId = data[i].empId; var empName = data[i].empName; //alert(empId); //alert(empName); $("#employee").append("<option value='" + empId + "'>" + empName + "</option>"); } } }, error:function(data){ alert("发生错误"); alert(data.result); } }); } }); //======================================== $("#employee").change(function(){ alert("employee已经改变"); var emp = $(this).val(); alert("emp = " + emp); if(dept != ""){ var params = {}; params.departmentId = dept; alert("标记2"); $.ajax({ async:false, type: "POST", url: "${pageContext.request.contextPath}/linkageController/allEmployees",//注意路径 data:params, dataType:"json", success:function(data){ alert("已经返回data"); alert("返回的data = " + data.length); if (data.length == 0){ alert("当前部门没有员工"); }else{ alert("当前部门有员工"); for (var i = 0; i < data.length; i++) { var empId = data[i].empId; var empName = data[i].empName; alert(empId); alert(empName); $("#employee").append("<option value='" + empId + "'>" + empName + "</option>"); } } }, error:function(data){ alert("发生错误"); alert(data.result); } }); } }); }) </script> </head> <body> <h4>Show</h4> <center> <select id="city" > <option value="" >--请选择--</option> <c:forEach items="${locations}" var="location" > <option value="${location.locationId}" >${location.locationName}</option> </c:forEach> </select> <select id="department"> <option value="" >--请选择--</option> </select> <select id="employee" > <option value="" >--请选择--</option> </select> </center> </body> </html>