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>
<select style="width: 120px;" name="selectName2" id="selectName2">
<option value="">--二级分类--</option>
</select>
<select style="width: 120px;" name="selectName3" id="selectName3">
<option value="">--三级分类--</option>
</select>
</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="{