Ajax三级联动操作的js代码

<%@ 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>
        
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        
        <select id="department">
            <option value="" >--请选择--</option>
        </select>
        
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <select id="employee" >
            <option value="" >--请选择--</option>
        </select>
        
    </center>
</body>
</html>
posted @ 2017-08-18 11:07 钓鱼翁阅读(334) 评论(0) 收藏举报
刷新页面返回顶部
渔翁

Ajax三级联动操作的js代码

公告
