1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  9. <title>Insert title here</title>
  10.  
  11. <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script>
  12. <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery.blockUI.js"></script>
  13.  
  14. <script type="text/javascript">
  15.  
  16. /**
  17. *
  18. */
  19. $(function(){
  20. $("#city").change(function(){
  21.  
  22. $("#department option:not(:first)").remove();
  23. var city = $(this).val();
  24.  
  25. if(city != ""){
  26.  
  27. var params = {};
  28. params.loc = city;
  29.  
  30. $.ajax({
  31. async:false,
  32. type: "POST",
  33. url: "${pageContext.request.contextPath}/linkageController/allDepartments",//注意路径
  34. data:params,
  35. dataType:"json",
  36.  
  37. success:function(data){
  38. alert("返回的data = " + data.length);
  39.  
  40. if (data.length == 0){
  41. alert("当前城市没有部门");
  42. }else{
  43.  
  44. for (var i = 0; i < data.length; i++) {
  45. var departmentId = data[i].deptId;
  46. var departmentName = data[i].deptName;
  47.  
  48. //alert(departmentId);
  49. //alert(departmentName);
  50.  
  51. $("#department").append("<option value='" + departmentId + "'>" + departmentName + "</option>");
  52. }
  53. }
  54.  
  55. },
  56.  
  57. error:function(data){
  58. alert("发生错误");
  59. alert(data.result);
  60. }
  61. });
  62. }
  63.  
  64. });
  65.  
  66. //=============================================
  67. $("#department").change(function(){
  68.  
  69. alert("department已经改变");
  70. $("#employee option:not(:first)").remove();
  71. var dept = $(this).val();
  72. alert("department = " + dept);
  73.  
  74. if(dept != ""){
  75.  
  76. var params = {};
  77. params.departmentId = dept;
  78. alert("标记2");
  79. $.ajax({
  80. async:false,
  81. type: "POST",
  82. url: "${pageContext.request.contextPath}/linkageController/allEmployees",//注意路径
  83. data:params,
  84. dataType:"json",
  85.  
  86. success:function(data){
  87. alert("已经返回data");
  88. alert("返回的data = " + data.length);
  89.  
  90. if (data.length == 0){
  91. alert("当前部门没有员工");
  92. }else{
  93. alert("当前部门有员工");
  94.  
  95. for (var i = 0; i < data.length; i++) {
  96. var empId = data[i].empId;
  97. var empName = data[i].empName;
  98.  
  99. //alert(empId);
  100. //alert(empName);
  101.  
  102. $("#employee").append("<option value='" + empId + "'>" + empName + "</option>");
  103. }
  104. }
  105.  
  106. },
  107.  
  108. error:function(data){
  109. alert("发生错误");
  110. alert(data.result);
  111. }
  112. });
  113. }
  114.  
  115. });
  116. //========================================
  117. $("#employee").change(function(){
  118.  
  119. alert("employee已经改变");
  120. var emp = $(this).val();
  121. alert("emp = " + emp);
  122.  
  123. if(dept != ""){
  124.  
  125. var params = {};
  126. params.departmentId = dept;
  127. alert("标记2");
  128. $.ajax({
  129. async:false,
  130. type: "POST",
  131. url: "${pageContext.request.contextPath}/linkageController/allEmployees",//注意路径
  132. data:params,
  133. dataType:"json",
  134.  
  135. success:function(data){
  136. alert("已经返回data");
  137. alert("返回的data = " + data.length);
  138.  
  139. if (data.length == 0){
  140. alert("当前部门没有员工");
  141. }else{
  142. alert("当前部门有员工");
  143.  
  144. for (var i = 0; i < data.length; i++) {
  145. var empId = data[i].empId;
  146. var empName = data[i].empName;
  147.  
  148. alert(empId);
  149. alert(empName);
  150.  
  151. $("#employee").append("<option value='" + empId + "'>" + empName + "</option>");
  152. }
  153. }
  154.  
  155. },
  156.  
  157. error:function(data){
  158. alert("发生错误");
  159. alert(data.result);
  160. }
  161. });
  162. }
  163. });
  164. })
  165.  
  166. </script>
  167.  
  168. </head>
  169. <body>
  170. <h4>Show</h4>
  171.  
  172. <center>
  173. <select id="city" >
  174. <option value="" >--请选择--</option>
  175. <c:forEach items="${locations}" var="location" >
  176. <option value="${location.locationId}" >${location.locationName}</option>
  177. </c:forEach>
  178. </select>
  179.  
  180. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  181.  
  182. <select id="department">
  183. <option value="" >--请选择--</option>
  184. </select>
  185.  
  186. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  187. <select id="employee" >
  188. <option value="" >--请选择--</option>
  189. </select>
  190.  
  191. </center>
  192. </body>
  193. </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. [APIO2018] Circle selection 选圆圈

    Description 给出 \(n\) 个圆 \((x_i,y_i,r_i)\) 每次重复以下步骤: 找出半径最大的圆,并删除与这个圆相交的圆 求出每一个圆是被哪个圆删除的 Solution \(k ...

  2. 【转】mvc

    又看到有人在问三层架构和MVC的关系,感觉这种问题有点教条化了.因为它们都在逻辑上将应用程序划为三块,凑了一个数字3,就有人非要把它们联系到一起了. 这两个东西我接触有几年了,有一点体会,表达一下: ...

  3. 多线程FTP下载日志脚本

    #!/bin/bash ip_list=`cat $1` thead_num=5tmp_fifofile="/tmp/$$.fifo"mkfifo "$tmp_fifof ...

  4. WPF中使用ObjectDataProvider绑定方法

    ObjectDataProvider提供了绑定任意.net类型的功能,具体功能如下: 1.ObjectDataProvider提供了绑定任意CLR类型的公嫩那个. 2.它可以再XAML中利用生命史的语 ...

  5. The Internet Communications Engine (Ice) 跨平台异构通讯方案 第二弹-Hello world!

    如果不知道ICE是什么的同学,请看上一篇的ICE简介:http://www.cnblogs.com/winds/p/3864677.html 好了,HelloWorld,从中间语言讲起. 首先,我们新 ...

  6. Java - 谨慎覆盖clone

    覆盖clone时需要实现Cloneable接口,Cloneable并没有定义任何方法. 那Cloneable的意义是什么? 如果一个类实现了Clonable,Object的clone方法就可以返回该对 ...

  7. influxdb 的安装(centos)

    安装命令: # for 64-bit systems wget http://s3.amazonaws.com/influxdb/influxdb-latest-1.x86_64.rpm sudo r ...

  8. Mybaits插入记录返回主键值

    某些情况进行insert时不知道主键值(主键为自增),例如系统新增用户时,有用户序号(主键 自增),用户名,密码.插入时只需插入用户名和密码,之后取得mysql自增的序号. 如下为mysql的usr表 ...

  9. git push报错--私钥问题

    输入git push -u origin master时提示 Permission denied (publickey). fatal: Could not read from remote repo ...

  10. yield* 表达式

    yield* 表达式用于委托给另一个generator 或可迭代对象. 委托给其他生成器 function* g1() { yield 2; yield 3; yield 4; } function* ...