JavaScript Ajax Json实现上下级下拉框联动效果实例代码


Posted in Javascript onNovember 23, 2013

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是1:N

<div class="forntName">部门</div>
 <div class="inpBox">
 <select  name="department" id="department"  onchange="change();" style="width:200px;" >
 <option value='-1'>请选择</option>
 <s:iterator value="departmentList">
  <option value='<s:property value="departmentCode"/>'><s:property value="departmentName"/></option>
 </s:iterator>
 <select>  
 </div>
<SPAN style="WHITE-SPACE: pre"> </SPAN><div class="forntName">人员</div>
 <div class="inpBox">
 <select name="workorderOperator" id = "workorderOperator" style="width:200px;"> <s:iterator value="userList">
  <option value='<s:property value="userName"/>'><s:property value="userName"/></option>
 </s:iterator>
 </select>
 </div>

部门下拉框的onchange()事件走一个AJAX方法,返回一个JSON对象(JSON里放的是个LIST)。

js方法在此页面的写法:

<script type="text/javascript">
function change(){     
    var departmentCode =$("#department").val();      var params = {  
        'departmentCode':departmentCode  
    };  
    $.ajax({
        type: 'get',
        url: "departmentChangeEvent.shtml",
        cache: false,
        data: params,
        dataType: 'json',
        success: function(data){
      var sel2 = $("#workorderOperator");  
      sel2.empty();  
      if(data==null)
          {
       sel2.append("<option value = '-1'>"+"部门人员为空"+"</option>");
          }
      var items=data.list;
      if(items!=null)
         {
        for(var i =0;i<items.length;i++)
           {
            var item=items[i];
            sel2.append("<option value = '"+item.userName+"'>"+item.userChinesename+"</option>");
           };
          }     
      else
          {
       sel2.empty();  
          }
        },
        error: function(){
            return;
        }
    });
    //$.post(url, params, callback);  
}  
</script> 

此处返回的data里包含list(list见后文),list里包含着人员的代码,人员的姓名两个属性。然后先把人员下拉框empty(),通过select控件append方法 添加新的下拉框元素。

后台代码:

public String departmentChangeEvent() throws Exception{
  userList=service.queryForList("Workorder.queryUserByDepartmentCode", departmentCode);
  if(userList!=null&&userList.size()>0)
  {
   HttpServletResponse response = ServletActionContext.getResponse();
   response.setContentType("text/html;charset=utf-8");
   response.setHeader("Pragma","No-cache");
   response.setHeader("Cache-Control","no-cache");
   response.setHeader("Cache-Control", "no-store");
   PrintWriter writer = response.getWriter();
   JSONObject json = new JSONObject();
   Map map = new HashMap();
      map.put("list",userList);
      JSONObject jso = JSONObject.fromObject(map);
   writer.write(jso.toString());
      writer.flush();
      writer.close();  }
         return null;  
   } 

这个方法是部门切换事件,通过departmentCode(field域,有set,get)来求的当前部门下的用户放到userList中。

然后通过标准写法把userList放到一个定义好的HashMap中,KEY为list。

<STRONG> JSONObject jso = JSONObject.fromObject(map);</STRONG> 

这是最为关键的一步,有的json对象创建方法也可以为JSONObject jso = new JSONObject() ; 然后把list里的记录放入到jso中。。。

在这里是行不通的,前台会认为返回的是个字符串。。。

struts中 返回类型为json

  <action name="departmentChangeEvent" class="workorderAction" method="departmentChangeEvent"> 
       <result type="json">
   </result> 
        </action>
Javascript 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
Three.js学习之网格
Aug 10 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
微信小程序错误this.setData报错及解决过程
Sep 18 Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 #Javascript
js获取电脑分辨率的思路及操作
Nov 22 #Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 #Javascript
Mac/Windows下如何安装Node.js
Nov 22 #Javascript
javascript Event对象详解及使用示例
Nov 22 #Javascript
js Date概念详细介绍
Nov 22 #Javascript
页面定时刷新(1秒刷新一次)
Nov 22 #Javascript
You might like
Ajax PHP简单入门教程代码
2008/04/25 PHP
PHP里的中文变量说明
2011/07/23 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
JScript实现表格的简单操作
2017/08/15 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
Python自动连接ssh的方法
2015/03/07 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
keras slice layer 层实现方式
2020/06/11 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
优秀员工自荐书
2013/12/19 职场文书
讲解员培训方案
2014/05/04 职场文书
婚姻出轨保证书
2015/05/08 职场文书
追悼词范文大全
2015/06/23 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
离婚协议书格式范本
2016/03/18 职场文书
python实现图片批量压缩
2021/04/24 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技