zoukankan      html  css  js  c++  java
  • 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="100px;"></select>
    </td>
    </tr>
    <tr>
    <td> 
    课程名称: 
    </td>
    <td>
    <select id="bindK"  onChange="getZsd()" style="100px;">
    <option  value="-1">--</option>
    </select>
    </td>
    </tr> 
    <tr>
    <td> 
    知识点名称:
    </td>
    <td> 
    <select id="bindZsd" style="100px;">
    <option  value="-1">--</option>
     </select>
    </td>
    </tr>
  • 相关阅读:
    弱鸡儿长乐爆肝旅Day8
    弱鸡儿终于没爆零Day7
    弱鸡儿长乐爆零旅Day6
    弱鸡儿长乐爆零旅Day5
    弱鸡儿长乐爆零旅Day4
    D1字符串哈希
    Tarjan算法
    弱鸡儿长乐爆零旅Day3
    弱鸡儿长乐爆零旅Day2
    弱鸡儿长乐爆零旅Day1
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4997617.html
Copyright © 2011-2022 走看看