ajax下拉栏三级联动,JQUERY 应用AJAX实现下拉列表框三级联动

//移除option中的值

function removeOp(selectId){

var op = $("#"+selectId).children();

if(op.length>1){

for(var i=0;i

{

if(i>=1){

document.getElementById(selectId).removeChild(op[i]);

}

}

}

}

//三级下拉列表框的联动js

//读出第二级的数据

$(function() {

$("#selectName1").change(function() {

var selectName1 = $("#selectName1").val();

removeOp("selectName2");

removeOp("selectName3");

if(selectName1=="") return ;

$.ajax(

{

url:"${path}/name/path_getAjaxResult.do",

type:"post",

dataType:"json",  //接受数据格式

data:"selectName1="+selectName1,

error:

function(){alert("请求失败!");},

success:

function(data){

if(data!=null && data!=""){

var str="";

for(var i=0;i

str+=""+data[i].name+""

}

$(str).appendTo($("#selectName2"));

}

}

});

});

});

//读出第三级的数据

$(function() {

$("#selectName2").change(function() {

var selectName2 = $("#selectName2").val();

removeOp("selectName3");

if(selectName2=="") return ;

$.ajax(

{

url:"${path}/name/path_getAjaxResult.do",

type:"post",

dataType:"json",  //接受数据格式

data:"selectName2="+selectName2,

error:

function(){alert("请求失败!");},

success:

function(data){

if(data!=null && data!=""){

var str="";

for(var i=0;i

str+=""+data[i].erName+""

}

$(str).appendTo($("#selectName3"));

}

}

});

});

});

//jsp部分

分类：	--一级分类-- ">name1 ">name2 ">name3 ">name4 --二级分类-- --三级分类--

//struts2 Action 中AJAX方法

public String getAjaxResult(){

request=ServletActionContext.getRequest();

String selectName1=request.getParameter("selectName1");

String selectName2=request.getParameter("selectName2");

if(selectName1=null && !"".equals(selectName1)){

//根据selectName1去取得二级下拉列表数据Object数组resultList

}

if(selectName2=null && !"".equals(selectName2)){

//根据selectName2去取得三级下拉列表数据Object数组resultList

}

//resultList为Object对象数组或者是Map数组

List list=resultList;

//返回数据类型

return "json";

}

//struts2 struts-config.xml

list