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

Ajax三级联动操作的js代码的更多相关文章

  1. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  2. 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

    使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...

  3. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  4. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  5. AJAX 三级联动

    新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...

  6. 0509 关于Ajax + 三级联动示例

    关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...

  7. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  8. [Ajax三级联动 无刷新]

    三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...

  9. 2019.03.25 Ajax三级联动

    所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 ​from django.core import serialize ...

随机推荐

  1. Bash编程(2) 循环与分支

    Shell中有三种类型的循环:for, until, while,具有3种类型的条件语句:if, case, 条件操作符(&&, ||). 1. 结束码 命令的结束码可以在命令运行完后 ...

  2. Golang教程：goroutine协程

    在上一篇中,我们讨论了并发,以及并发和并行的区别.在这篇教程中我们将讨论在Go中如何通过Go协程实现并发. 什么是协程 Go协程(Goroutine)是与其他函数或方法同时运行的函数或方法.可以认为G ...

  3. 将forme表单转换为Json对象

    //将Form 表单转换为Json字符串 $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); ...

  4. Splunk大数据分析经验分享

    转自:http://www.freebuf.com/articles/database/123006.html Splunk大数据分析经验分享:从入门到夺门而逃 Porsche 2016-12-19 ...

  5. 查找CPU使用率过高的线程

    1.在编写程序中有时候设置不恰当,休眠时间不够,一般情况下4核的电脑CPU使用率一直大于23%,8核的大于13%就有可能是这种情况 解决方法: 在VS查看并行线程利用CPU使用工具ProcessExp ...

  6. ASP.NET MVC4 新手入门教程之五 ---5.用控制器访问模型数据

    在本节中,将创建一个新的MoviesController类并编写代码来检索电影数据并将其显示在浏览器中使用一个视图模板. 才走出下一步生成应用程序. 用鼠标右键单击控制器文件夹中并创建一个新的 Mov ...

  7. 一、mysql架构

    一.简介 mysql是一个开源的数据库管理系统,它相对于oracle更加地轻量.成本低,随着功能的日益完善,它变得备受企业喜爱,尤其是中小企业. mysql的整体架构大体包括以下几个方面: 1)主体结 ...

  8. MySQL:ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO)

    错误:ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) 原因 :登录帐户错误(ODB ...

  9. 任意表格(table)实现拖动列(column)改变列大小

    直接上代码吧,原理可以看我上一篇博文.本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入). $(function () { var i ...

  10. 1004. 填充矩形 (Standard IO)

    题目描述 已知矩形的大小为n×m,现用a×a的正方形填充该矩形.输入三个正整数n,m,a(n,m,a≤10^9),计算至多能填入多少正方形?(正方形可以正好碰到矩形边界,但不能超出矩形外) 输入 一行 ...