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

这篇文章主要介绍了JavaScript Ajax Json实现上下级下拉框联动效果实例代码,有需要的朋友可以参考一下

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是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技巧 时间:2014-06-20 人气:31
本文关键词: ajax json JavaScript
分享到:

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.056 (s). 12 q(s)