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> <select id="department">
<option value="" >--请选择--</option>
</select>
<select id="employee" >
<option value="" >--请选择--</option>
</select> </center>
</body>
</html>
Ajax三级联动操作的js代码的更多相关文章
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区
使用AJAX + 三级联动 实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...
- 城市三级联动 AJAX-原生js封装
话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- AJAX 三级联动
新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...
- 0509 关于Ajax + 三级联动示例
关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- [Ajax三级联动 无刷新]
三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...
- 2019.03.25 Ajax三级联动
所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 from django.core import serialize ...
随机推荐
- h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽（露出黑色背景）
h5页面ios,双击向上滑动,拖拽到底部还能继续拖拽 标签: 手机 2016-02-02 18:09 696人阅读 评论(0) 收藏 举报 在ios下,双击屏幕某些地方,滚动条会自动向上走一段. ...
- YII框架路由配置
首先要在服务器配置(httpd.conf)中开启重写模块: #开启重写模块,将其前面的#去掉 LoadModule rewrite_module modules/mod_rewrite.so #Dir ...
- JavaScript中 运算符
运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值 根据所执行的运算,运算符可分为以下类别: (1) 算术运算符 (2) 比较运算符 运算符 说 明 示 例 == 等于. 如果两个操作数相 ...
- Access入门 2010，数学
Access入门 2010(高级窗体) 1,创建数据透视图:创建---其他窗体---数据透视图---图标字段列表---选择列表内容---移动到数据透视图的对应位置---完成. 2,创建数据透视表窗体: ...
- 登陆oracle数据库时提示“ORA-28002: 7 天之后口令将过期” 或提示 密码过期
登陆oracle数据库时提示“ORA-28002: 7 天之后口令将过期” 或提示 密码过期. [原因/触发因素] 确定是由于oracle11g中默认在default概要文件中设置了“PASSWORD ...
- final 、finalize和finally的区别
2019-04-1217:29:40 (1)final用于声明属性,方法和类,分别表示属性不可变,方法不可覆盖,类不可继承.内部类要访问局部变量,局部变量必须定义成final类型,比如一段代码 (2) ...
- VirtualBox使用Centos7与主机共享文件夹
最近使用VitrtualBox安装Centos7学习,liunx脚本和一些命令,经过一些研究完成了虚拟机与 主机共享文件夹,虚拟机链接外部网络,主机与虚拟机互相通信.在其中遇到一些我解决的技术问题记录 ...
- SQL Join 语句
SQL Join 语句 SQL 中每一种连接操作都包括一个连接类型和连接条件. 连接类型 决定了如何处理连接条件不匹配的记录. 连接类型 返回结果 inner join 只包含左右表中满足连接条件的记 ...
- pom文件解析
Maven的依赖是使用Maven坐标来定位的,而Maven坐标主要由GAV(groupId, artifactId, version)构成.因此,使用任何一个依赖之间,你都需要知道它的Maven坐标. ...
- 原生JS编写getByClass、addClass、removeClass、hasClass
前言: 年后换了工作,在现在的公司写交互主要使用JS原生:刚刚入门前端的时候写交互一直用的原生JS,虽然用的不怎么样.后来去之前的公司之后,leader主张把jQuery用好,JS原生自然就熟练了:一 ...