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 ...
随机推荐
- [APIO2018] Circle selection 选圆圈
Description 给出 \(n\) 个圆 \((x_i,y_i,r_i)\) 每次重复以下步骤: 找出半径最大的圆,并删除与这个圆相交的圆 求出每一个圆是被哪个圆删除的 Solution \(k ...
- 【转】mvc
又看到有人在问三层架构和MVC的关系,感觉这种问题有点教条化了.因为它们都在逻辑上将应用程序划为三块,凑了一个数字3,就有人非要把它们联系到一起了. 这两个东西我接触有几年了,有一点体会,表达一下: ...
- 多线程FTP下载日志脚本
#!/bin/bash ip_list=`cat $1` thead_num=5tmp_fifofile="/tmp/$$.fifo"mkfifo "$tmp_fifof ...
- WPF中使用ObjectDataProvider绑定方法
ObjectDataProvider提供了绑定任意.net类型的功能,具体功能如下: 1.ObjectDataProvider提供了绑定任意CLR类型的公嫩那个. 2.它可以再XAML中利用生命史的语 ...
- The Internet Communications Engine (Ice) 跨平台异构通讯方案 第二弹-Hello world!
如果不知道ICE是什么的同学,请看上一篇的ICE简介:http://www.cnblogs.com/winds/p/3864677.html 好了,HelloWorld,从中间语言讲起. 首先,我们新 ...
- Java - 谨慎覆盖clone
覆盖clone时需要实现Cloneable接口,Cloneable并没有定义任何方法. 那Cloneable的意义是什么? 如果一个类实现了Clonable,Object的clone方法就可以返回该对 ...
- influxdb 的安装(centos)
安装命令: # for 64-bit systems wget http://s3.amazonaws.com/influxdb/influxdb-latest-1.x86_64.rpm sudo r ...
- Mybaits插入记录返回主键值
某些情况进行insert时不知道主键值(主键为自增),例如系统新增用户时,有用户序号(主键 自增),用户名,密码.插入时只需插入用户名和密码,之后取得mysql自增的序号. 如下为mysql的usr表 ...
- git push报错--私钥问题
输入git push -u origin master时提示 Permission denied (publickey). fatal: Could not read from remote repo ...
- yield* 表达式
yield* 表达式用于委托给另一个generator 或可迭代对象. 委托给其他生成器 function* g1() { yield 2; yield 3; yield 4; } function* ...