您现在的位置：首页 >> 前端 >> 内容

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

时间：2017/1/6 9:24:16 点击：

　　核心提示：%@ page language=java contentType=text/html; charset=ISO-8859-1pageEncoding=ISO-8859-1%!DOCTYPE html...

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://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>