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

最近尝试做出一个部门和人员的下拉框联动功能,部门和人员的对应关系是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>

时间: 2024-08-30 17:26:57

JavaScript Ajax Json实现上下级下拉框联动效果实例代码_javascript技巧的相关文章

JSuggest自动匹配下拉框使用方法(示例代码)_javascript技巧

1.下载jquery-latest.js,JSuggest.js和JSuggest.css JSuggest.js源代码如下 复制代码 代码如下: /*** * Description : JSuggest 下拉提示框*/ function JSuggest(){ // DIV下拉框this.div = null; // DIV下的ulthis.ul = null; // 文本输入框this.input = null; // 当前DIV所选的LI对象this.current_li = null;

Ajax学习之------&amp;gt;Ajax和Json实现无限下拉框联动(上)

  init.jsp页面,直接跳转到InitShengServlet2这个servlet初始化省份 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <jsp:forward page="/InitShengServlet2"></jsp:forward>   /** 该servlet初始化完后跳转到li

JQuery打造省市下拉框联动效果_jquery

做联动效果,若是用纯JavaScript来做,往往需要辅助页面保存需要刷新的结果集,然后渲染到原页面.考虑将需要动态刷新的内容自动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后面的下拉框全部清除,然后重新拼接刷新的内容.用JQuery实现比较容易,代码以省市联动效果为例实现. JSP页面代码如下: 复制代码 代码如下: <li id="base"> <p>生源地:</p> <label> <select id=&

jquery及原生js获取select下拉框选中的值示例_javascript技巧

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

js实现带搜索功能的下拉框实时搜索实时匹配_javascript技巧

1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中. 2. 如何获取每次输入的内容,当keyup的时候触发函数. 问题:select标签中可以输入内容吗?(解决:另一篇文章可选择和输入的下拉列表框 ) 3. 如何获得输入框中的内容?(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 复制代码 代码如下: function getSelectT

下拉框select的绑定示例_javascript技巧

根据文本绑定text var locationCity = productViewObj.Product.LocationCity; var countCity = $("#slCity option").length; for (var i = 0; i < countCity; i++) { if ($("#slCity").get(0).options[i].text == locationCity) { $("#slCity").g

easyUI实现(alert)提示框自动关闭的实例代码_javascript技巧

原理:使用js的定时任务函数setInterval设置时间,然后触发关闭事件 参数说明 title:提示框的标题 msg:提示信息内容 ico:显示的提示信息图标,'info','warnning','error'等 函数体 function alert_autoClose(title,msg,icon){ var interval; var time=1000; var x=2; //设置时间2s $.messager.alert(title,msg,icon,function(){}); i

JavaScript中访问id对象 属性的方式访问属性(实例代码)_javascript技巧

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

Ionic实现页面下拉刷新(ion-refresher)功能代码_javascript技巧

在平常做项目时下拉刷新功能非常常见,那么大家都是怎么实现的呢?下面小编给大家介绍如何使用Ionic实现页面下拉刷新(ion-refresher功能,一起看看看吧! 具体的实现请看下面的源码: HTML 代码 ion-refresher : 即为下拉刷新的图标: pulling-text="下拉刷新" 这里的问题可以随意更换,喜欢就好: on-refresh="doRefresh()" 这个便是当下拉的时候我们要执行的方法,这里便是刷新页面的数据. <body