日期:2014-05-16  浏览次数:20701 次

JQUERY 应用AJAX实现下拉列表框三级联动
//移除option中的值
function removeOp(selectId){ 
var op = $("#"+selectId).children();
if(op.length>1){
   for(var i=0;i<op.length;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<data.length;i++){
str+="<option value='"+data[i].id+"'>"+data[i].name+"</option>"
}
$(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<data.length;i++){
str+="<option value='"+data[i].erid+"'>"+data[i].erName+"</option>"
}
$(str).appendTo($("#selectName3"));
}
  }
});
});
});


//jsp部分
<table>
   <tr>
<td height="30" >分类:</td>
<td>
<select  style="width: 120px;"  name="selectName1" id="selectName1">
<option value="">--一级分类--</option>
<option value="1"/>">name1</option>
    <option value="2"/>">name2</option>
<option value="3"/>">name3</option>
<option value="4"/>">name4</option>
</select>&nbsp;
<select  style="width: 120px;"  name="selectName2" id="selectName2">
<option value="">--二级分类--</option>

</select>&nbsp;
<select  style="width: 120px;"  name="selectName3" id="selectName3">
<option value="">--三级分类--</option>
</select>&nbsp;
</td>
     </tr>

</table>

//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

<package name="name" namespace="/name" extends="struts-default,json-default">
<action name="path_*" method="{