jquery用ajax实现级联

 

1、刚开始页面初始化的时候调用该方法，将在页面显示初始化记录页面如图

 

//列表初始化方法进入页面后调用 $(document).ready(function(){ $.ajax({ url:'init.action',//请求的URL cache: false, //不从缓存中取数据 data:{pid:2},//发送的参数 type:'Get',//请求类型 dataType:'json',//返回类型是JSON timeout:20000,//超时 error:function()//出错处理 { alert("程序出错!"); }, success:function(json)//成功处理 { var len=json.length;//得到查询到数组长度 $("<select id='no1' name='querySortId' style='width:80px' οnchange='show()'></select>").appendTo("#content");//在content中添加select元素 $("<option value='-1'>请选择</option>").appendTo("#no1"); for(var i=0;i<len;i++)//把查询到数据循环添加到select中 { $("<option value="+json[i].sortId+">"+json[i].sortName+"</option>").appendTo("#no1"); } } }); }); 

 
当选择其中一项时触发onshow()方法，代码如下：

 

  function show() { var obj=event.srcElement;//取得当前事件的对象,也就是你点了哪个select,这里得到的就是那个对象 var currentObj=$(obj);//将JS对象转换成jQuery对象,这样才能使用其方法 var s1=$(obj).nextAll("select");//找到当前点击的后面的select对象 s1.each(function(i){ $(this).remove();//循环把它们删除 }); var value1=$(obj).val(); $.ajax({ url:'init.action', cache:false, data:{pid:value1}, type:'Get', dataType:'json', timeout:20000, error:function() { alert("出错啦"); }, success:function(json) { var len=json.length; if(len!=0) { $("<select style='width:80px' name='querySortId' οnchange='show()'></select>").appendTo("#content"); for(var i=0;i<len;i++) { $("<option value="+json[i].sortId+">"+json[i].sortName+"</option>").appendTo("#content>select:last"); } } } }); } 

 

就会动态的级联出下一级：界面如下图：

如果再选择同样还会调用onshow()方法,继续级联出来，



action中代码也比较简单，贴出来供参考一下：

public void init() throws IOException{ HttpServletResponse res=this.getResponse(); HttpServletRequest request=this.getRequest(); res.setContentType("text/html; charset=utf-8"); PrintWriter out; out = res.getWriter(); String pid=request.getParameter("pid"); int id=Integer.parseInt(pid); List<TASort> list=sortService.getChildenByConditions(id, "0");//这个查询所有父亲id下面所有的列表 JsonConfig config = new JsonConfig(); config.setJsonPropertyFilter(new PropertyFilter(){ public boolean apply(Object source, String name, Object value) { if(name.equals("parentSort") || name.equals("TASorts")||name.equals("TAAuths")||name.equals("TBSortInfors")||name.equals("sortInfors")) { return true; } else { return false; } } }); JSONArray arr=JSONArray.fromObject(list,config);//这个类是把list转换成json的格式 out.print(arr); } 

 

jsp中代码如下：

<div id="content" style="width: 500px; border: 1px; border-style: solid; background-color: lightblue;"> </div> 

实现以上代码即可实现无限极联动。

 

转自 http://www.po-soft.com/hi/chengzhengliang/blog/1962

更多内容请访问OECP社区