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 常用方法经典总结
Jan 28 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
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
咖啡知识大全
2021/03/03 新手入门
留言板翻页的实现详解
2006/10/09 PHP
php程序之die调试法 快速解决错误
2009/09/17 PHP
Wordpress php 分页代码
2009/10/21 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python字符串替换实例分析
2015/05/11 Python
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python 实现Harris角点检测算法
2020/12/11 Python
2014年三八妇女节活动总结
2014/03/01 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015年教师国培感言
2015/08/01 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js