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 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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
星际中的相关伤害
2020/03/04 星际争霸
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
Python切换pip安装源的方法详解
2016/11/18 Python
PyQt5实现下载进度条效果
2018/04/19 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
基于python使用tibco ems代码实例
2019/12/20 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
幼儿园消防安全制度
2014/01/26 职场文书
《乞巧》教学反思
2014/02/27 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
安全守法证明
2015/06/23 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Redis可视化客户端小结
2021/06/10 Redis
如何使用SQL Server语句创建表
2022/04/12 SQL Server