ajax+jsp实现三级联动下拉框

js文件sjld.js  :

$(document).ready(
function(){
$.ajax({
url:"bindZ",
type:"get",
dataType:"json",
success:bindZList
});
}
); //回调函数
function bindZList(json){
data=(json.a);
for(zmc in data){
var option = document.createElement("option");
for(key in data[zmc]){
document.getElementById("bindZ").appendChild(option);
option.text=data[zmc];
}
}
} function getKcbh(){
//绑定之前 清空第一个以外的option
$("#bindK").children().eq().siblings().remove();
$("#bindZsd").children().eq().siblings().remove();
var temp=$("#bindZ").find("option:selected").val();
$.ajax({
url:"bindK",
type:"get",
dataType:"json",
data:"zmc="+temp,
success:bindKList
});
}
//回调函数
function bindKList(json){
data=(json.k);
for(CName in data){
var option = document.createElement("option");
for(key in data[CName]){
document.getElementById("bindK").appendChild(option);
option.text=data[CName];
}
}
} function getZsd(){
//绑定之前 清空第一个以外的option
$("#bindZsd").children().eq().siblings().remove();
var temp = $("#bindK").find("option:selected").val();
$.ajax({
url:"bindZsd",
type:"get",
dataType:"json",
data:"CName="+temp,
success:bindZsdList
});
}
//回调函数
function bindZsdList(json){
data=(json.s);
for(zsdmc in data){
var option = document.createElement("option");
for(key in data[zsdmc]){
document.getElementById("bindZsd").appendChild(option);
option.text=data[zsdmc];
}
}
}

action  文件sjld.java :

//获得一级数据源
@Action(value="/bindZ",results={@Result(name="success",type="json")})
public String bindZ(){
list1=this.baseservice.find(Zinfo.class);
for(int i=;i<list1.size();i++){
String b=list1.get(i).getZmc();
a.add(b);
}
return SUCCESS;
} //获得二级数据源
@Action(value="/bindK",results={@Result(name="success",type="json")})
public String bindK(){
if(zmc!=null){ //通过zmc查找CId
String[] keys=new String[];
keys[]="zmc";
Object[] values=new Object[];
values[]=zmc;
List<Integer> CId=this.baseservice.find(Integer.class, "Zinfo", "id.CId", keys, values);
for(int j=;j<CId.size();j++){
String[] keys1 = {"c_id"};
Object[] values1 = {CId.get(j)};
list2=this.baseservice.find(Kcxx.class, "Kcxx", keys1, values1);
String c = list2.get().getCName();
k.add(c); }
}
return SUCCESS;
} //获得三级数据源
@Action(value="/bindZsd",results={@Result(name="success",type="json")})
public String bindZsd(){ if(CName!=null){ //通过CName查找CId
String[] keys=new String[];
keys[]="CName";
Object[] values=new Object[];
values[]=CName;
List<Integer> CId=this.baseservice.find(Integer.class, "Kcxx", "CId", keys, values);
for(int k=;k<CId.size();k++){
String[] keys1 = {"c_id"};
Object[] values1 = {CId.get(k)};
list3=this.baseservice.find(Zsd.class, "Zsd", keys1, values1);
String d = list3.get().getZsdmc();
s.add(d);
}
}
return SUCCESS;
}

其中定义的变量:

private List<Zinfo> list1;
private List<Kcxx> list2;
private List<Zsd> list3; private String CName;
private String zmc;
private String zsdmc; private List<String> a=new ArrayList<String>();
private List<String> k=new ArrayList<String>();
private List<String> s=new ArrayList<String>(); //省略getter、setter方法

jsp页面代码:

<tr>
<td>
章名称:
</td>
<td>
<select id="bindZ" onChange="getKcbh()" style="width:100px;"></select>
</td>
</tr>
<tr>
<td>
课程名称:
</td>
<td>
<select id="bindK" onChange="getZsd()" style="width:100px;">
<option value="-1">--</option>
</select>
</td>
</tr>
<tr>
<td>
知识点名称:
</td>
<td>
<select id="bindZsd" style="width:100px;">
<option value="-1">--</option>
</select>
</td>
</tr>
上一篇:Docker 快速部署 Django项目到云服务器


下一篇:img、列表和table标签