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>
时间: 2024-08-08 13:51:57

ajax+jsp实现三级联动下拉框的相关文章

jquery+ligerform三级联动下拉框

如下为ligerform里的三级联动下拉框: var formData=[ {display:"县区",name:"QY",newline:true,labelWidth:100,width:220,space:50,type:"select",group:"区域信息",groupicon:"@Url.Content("~/Content/icons/32X32/communication.gif"

JS年月日三级联动下拉框日期选择代码

原博客网址: http://www.cnblogs.com/gdcgy/p/5467742.html 由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

Web 1三级联动 下拉框 2添加修改删除 弹框

Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { private MyDBDataContext _Context = new MyDBD

jquery+html三级联动下拉框及详情页面加载时的select初始化问题

html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel" style="width: 200px;font-size:12px" ></select> <select name="ddlQYWZEJ" id="ddl_QYWZEJ" class="fields

省市区三级联动下拉框效果分析

<select id="selProvince"> <option>--请选择--</option> </select> <select id="selCity"> <option>--请选择--</option> </select> <select id="selCountry"> <option>--请选择--</op

Android实现三级联动下拉框 下拉列表spinner的实例

主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值              XML布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_

省市区三级联动下拉框+数据绑定

1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" data-code="@Model.City"

用jsp实现省市区三级联动下拉

jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善用户体验,目前基本上所有网站都是采用这一种方式.现在ajax的使用已经不像最初那样使用最原始的方法了,因为有很多的js框架供我们选择,我们只需要调用它们的一个方法就可以实现ajax功能,而其他的则交给js组件去完成. 最近整理了一份最新的全国省市区县数据库,再加上之前还没有在jsp中实现过省市区三级

地址联动下拉框实现

<head> <meta charset="UTF-8"> <title>地址联动下拉框实现</title> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="