第一次写博客,为了就是记录自己的学习历程,做一个整理

业务需求:有两个下拉列表,部门列表和职位列表,实现级联

1:本功能是在strut2框架下完成的,在进入页面时通过action初始化部门下拉列表

前台代码如下:

 <s:select list="departmentList" id="deparmentId"name="departmentId" headerKey="" headerValue="请选择" listKey="departmentId"  listValue="name"  onchange="setEvent()" >
</s:select><s:select list="jobList" id="jobId"name="jobId" headerKey="" headerValue="请选择">
</s:select>

2:当选择具体的部门时触发onchang事件,进入js函数

function setEvent(){//获取选中的部门idvar code = $("#departmentId").val();//获取职位对象var jobs = $("#jobId");//异步访问后台,获取所选部门的所有职位
   $.ajax({type:"post",data:{"departmentId",code},url: "department_init.action";//后台处理的action方法success:function(jobs){$.each(jobs , function(i){$("<option>" , {val:jobs[i].id ,   //这两个都是后台获取的[ { id : "" , name : "" },{id : "" , name : " "} ]这种格式的数据,是在后台构造的json格式的数据
               text:jobs[i].name}).appendTo(jobs);});}dataType: "json"});}

3:departmentAction中的init()方法

代码如下:

public void init(){this.getResponse().setContentType("text/html;charset=GBK");  this.getResponse().setCharacterEncoding("GBK");  PrintWriter pw=null;try {pw = this.getResponse().getWriter();} catch (IOException e) {e.printStackTrace();}//以下是根据部门id查询职位的方法,,sql语句逻辑如下List jobs= departmentService.find(" select t.id , t.name from jobs t where t.departmentid="+deparmtnetId+" " );//转换为json格式StringBuffer buff=new StringBuffer();buff.append("[");for(int i=0;i<jobsList.size();i++){Object[] obj = (Object[])jobsList.get(i);buff.append("{");buff.append("\"id\":"+obj[0].toString+",");buff.append("\"name\":\""+obj[1].toString+"\"");if(i==list.size()-1){buff.append("}");}else{buff.append("},");}}buff.append("]");//输出
    pw.write(buff.toString());}

以上三步就能实现部门和职位的记录,这种方法可以用于各种级联下拉列表

第一次写,难免有错误,如果有错误希望各位博友指正

转载于:https://www.cnblogs.com/jhw0703/archive/2013/01/10/wjh_123.html

基本java,jquery异步 的级联下拉列表相关推荐

  1. js三级地区选择插件,省市县级联下拉列表

    js三级地区选择插件,省市县级联下拉列表 3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了 ...

  2. 如何使用 jQuery 异步上传文件?

    问: 我想用 jQuery 异步上传文件. $(document).ready(function () { $("#uploadbutton").click(function () ...

  3. jQuery异步框架探究1:jQuery._Deferred方法

    jQuery异步框架应用于jQuery数据缓存模块.jQuery ajax模块.jQuery事件绑定模块等多个模块,是jQuery的基础功能之中的一个.实际上jQuery实现的异步回调机制能够看做ja ...

  4. jQuery异步上传文件

    jQuery异步上传文件 我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="fil ...

  5. 在Java中异步编程,同事非要用rxJava,被我一顿吐槽!

    在Java中异步编程,不一定非要使用rxJava, Java本身的库中的CompletableFuture可以很好的应对大部分的场景. 这篇文章介绍 Java 8 的 CompletionStage ...

  6. php结合jquery异步上传图片(ajaxSubmit)

    2019独角兽企业重金招聘Python工程师标准>>> php结合jquery异步上传图片(ajaxSubmit),以下为提交页面代码: <!DOCTYPE html PUBL ...

  7. java jpa 异步编程_异步处理时的JPA

    java jpa 异步编程 几年前,在Java世界中,几乎显而易见的是,每个"企业"类项目都需要JPA与数据库进行通信. JPA是Joel Spolsky描述的" 泄漏抽 ...

  8. java后台异步任务执行器TaskManager

    java后台异步任务执行器TaskManager 此方式基于MVC方式: 一,使用任务: 1 @Resource 2 private TaskManager taskManager; 3 4 publ ...

  9. html动态下拉列表,jQuery实现动态显示select下拉列表数据的方法

    本文实例讲述了jQuery实现动态显示select下拉列表数据的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery动态显示表单 //数 ...

最新文章

  1. 第十六届全国大学生智能汽车竞赛 车模技术检查表格与技术文件
  2. 【设计模式】装饰者模式
  3. pandas 排序一个变量
  4. 七夕节:妹纸,找个程序员做男朋友吧!
  5. UI设计灵感|仪表盘界面如何设计?优质案例给你帮助
  6. 零基础自学python-零基础如何自学python?
  7. Could not resolve hostname github: Name or service
  8. 简单又强大的联发科手机PhilZ Touch Recovery安装器,详细教程 - 本文出自高州吧
  9. 东南亚跨境电商平台Lazada、Shopee、速卖通转化率低怎么办?(测评自养号)
  10. CSS3篮球场热力区域图
  11. LTE学习:PHICH(二)
  12. 【ZoomNet 解读】局部感知自适应缩放神经网络的三维目标检测
  13. 在线客服系统源码软件代码+自动回复+可生成接入+手机版管理后台
  14. form-storage.js表单数据本地存储插件
  15. 烽火HG680-J_Hi3798MV100_内有普通版和高安版-当贝桌面-卡刷强刷固件包
  16. 敬业签安卓手机便签如何使用本机号码一键登录?
  17. 压缩音频文件怎么弄?这篇文章告诉你怎么实现
  18. python二维转三维_平时都用Python绘制二维图,如果用来绘制三维图会有什么效果?...
  19. 泰山OFFICE技术讲座:GB18030藏文蒙文彝文维文的斜体粗体简单测试
  20. 鼎甲的这个“第一”没毛病

热门文章

  1. 在女画家杨雁翎的画室派对
  2. 台湾印象之一:金马奖之夜
  3. 推荐一个女画家的系列画:《公主的妄想症》之《喜欢就是要全部》
  4. python测试用例管理_Python测试框架Pytest的常用插件测试报告
  5. python 数据分析排名_2018年上半年热门编程语言排行榜
  6. delphi打印html文件路径,Delphi获取文件名、不带扩展名文件名、文件所在路径、上级文件夹路径的方法...
  7. LeetCode 97: 交错字符串
  8. Unity HDRP中的光照烘焙测试(Mixed Lighing )和间接光
  9. java调用keras theano模型_使用Keras获得模型输出的梯度w.r.t权重
  10. php配置email支持_配置以及实现mail()函数