SSH结合jquery实现三级联动效果
本文实例为大家分享了jquery实现三级联动的具体代码,供大家参考,具体内容如下
jsp页面部分:
<liid="floors"> <spanclass="title"id="floorShow">选择楼栋:</span> <selectname="build"id="build"style="width:282px;height:40px;"onchange="floor2()"> </select> </li> <liid="builds"> <spanclass="title"id="floorShow">选择住房:</span> <selectname="builds"id="floot2"style="width:282px;height:40px;"> </select> </li>
js部分:
functionfloor(){
document.getElementById("build").options.length=0;
document.getElementById("floot2").options.length=0;
varparentId=document.getElementById("village").value;
if(parentId==0){
}else{
$.ajax({
type:"post",
url:"floor.action",
data:{"parentId":parentId},
dataType:"json",
success:function(data){
console.log(data);
varlen=data.length;
varhtm="<optionvalue='0'>请选择</option>";
for(vari=0;i<len;i++){
htm+="<optionvalue='"+data[i].id+"'>"+data[i].info+"</option>";
}
$("#build").append(htm);
}
})
}
}
functionfloor2(){
document.getElementById("floot2").options.length=0;
varbuild=document.getElementById("build").value;
if(build==0){
}else{
$.ajax({
type:"post",
url:"floor2.action",
data:{"parentId":build},
dataType:"json",
success:function(data){
varlen=data.length;
varhtm="<optionvalue='0'>请选择</option>";
for(vari=0;i<len;i++){
htm+="<optionvalue='"+data[i].id+"'>"+data[i].info+"</option>";
}
$("#floot2").append(htm);
}
})
}
}
struts2配置部分:
<packagename="user"namespace="/"extends="json-default"> <actionname="floor"class="addressInfoAction"method="floor"> <resulttype="json"> <paramname="root">floor</param> </result> </action> <actionname="floor2"class="addressInfoAction"method="floor2"> <resulttype="json"> <paramname="root">floor2</param> </result> </action> </package>
action部分:
publicStringfloor(){
System.out.println("这里是ajax调用");
//floor=addressInfoService.getFloor(addressInfo.getParentId());
System.out.println(addressInfo.getParentId());
floor=addressInfoService.getFloor(addressInfo.getParentId());
returnSUCCESS;
}
publicStringfloor2(){
System.out.println("这里是ajax的第二次调用");
System.out.println(addressInfo.getParentId());
floor2=addressInfoService.getBuild(addressInfo.getParentId());
returnSUCCESS;
}
最后,一定不要忘记导入struts2-json-plugin-2.3.15.1.jar这个夹包的版本也要和struts2的其他的夹包的版本一致。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。