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="{1}" class="className">
<result name="json" type="json">
<param name="root">list</param>
</result>
</action>
</package>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值