jsp----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(0).siblings().remove();
     $("#bindZsd").children().eq(0).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(0).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=0;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[1];
keys[0]="zmc";
Object[] values=new Object[1];
values[0]=zmc;
List<Integer> CId=this.baseservice.find(Integer.class, "Zinfo", "id.CId", keys, values);
for(int j=0;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(0).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[1];
keys[0]="CName";
Object[] values=new Object[1];
values[0]=CName;
List<Integer> CId=this.baseservice.find(Integer.class, "Kcxx", "CId", keys, values);
for(int k=0;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(0).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>

这样就实现动态三级联动下拉框了！！ 好不容易才弄出来的哦！！希望对大家有帮助！！