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 相关文章推荐
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现比较两段文本不同之处的方法
2015/05/30 Python
使用Python写个小监控
2016/01/27 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python中的for循环
2018/09/28 Python
Windows下安装Scrapy
2018/10/17 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
学生档案自我鉴定
2013/10/07 职场文书
新闻系毕业生推荐信
2013/11/16 职场文书
行政复议决定书
2015/06/24 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
导游词之西安骊山
2019/12/03 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript