用ajax做级联操作,【转自：wlo_o】jquery用ajax实现级联

Js代码

//列表初始化方法进入页面后调用

$(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)//成功处理

{

varlen=json.length;//得到查询到数组长度

$("").appendTo("#content");//在content中添加select元素

$("请选择").appendTo("#no1");

for(vari=0;i

{

$(""+json[i].sortName+"").appendTo("#no1");

}

}

});

});

//列表初始化方法进入页面后调用

$(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;//得到查询到数组长度

$("").appendTo("#content");//在content中添加select元素

$("请选择").appendTo("#no1");

for(var i=0;i

{

$(""+json[i].sortName+"").appendTo("#no1");

}

}

});

});

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

 Js代码

 functionshow()

{

varobj=event.srcElement;//取得当前事件的对象,也就是你点了哪个select,这里得到的就是那个对象

varcurrentObj=$(obj);//将JS对象转换成jQuery对象,这样才能使用其方法

vars1=$(obj).nextAll("select");//找到当前点击的后面的select对象

s1.each(function(i){

$(this).remove();//循环把它们删除

});

varvalue1=$(obj).val();

$.ajax({

url:'init.action',

cache:false,

data:{pid:value1},

type:'Get',

dataType:'json',

timeout:20000,

error:function()

{

alert("出错啦");

},

success:function(json)

{

varlen=json.length;

if(len!=0)

{

$("").appendTo("#content");

for(vari=0;i

{

$(""+json[i].sortName+"").appendTo("#content>select:last");

}

}

}

});

}

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)

{

$("").appendTo("#content");

for(var i=0;i

{

$(""+json[i].sortName+"").appendTo("#content>select:last");

}

}

}

});

}

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

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

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

Java代码

publicvoidinit()throwsIOException{

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");

intid=Integer.parseInt(pid);

List list=sortService.getChildenByConditions(id,"0");//这个查询所有父亲id下面所有的列表

JsonConfig config =newJsonConfig();

config.setJsonPropertyFilter(newPropertyFilter(){

publicbooleanapply(Object source, String name, Object value) {

if(name.equals("parentSort") || name.equals("TASorts")||name.equals("TAAuths")||name.equals("TBSortInfors")||name.equals("sortInfors")) {

returntrue;

}else{

returnfalse;

}

}

});

JSONArray arr=JSONArray.fromObject(list,config);//这个类是把list转换成json的格式

out.print(arr);

}

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 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中代码如下：

Html代码