基于JQuery实现的Select级联

点评：Select级联，想必大并不陌生吧，本文为大家介绍下使用jquery是如何快速实现的，感兴趣的朋友可以参考一下，希望对大家有所帮助！

复制代码 代码如下:

$(document).ready(function(){ 

$("#precinct").change(function(){ 

$("#ptype").val("");//重置所有 

$("#stype").html(""); 

$("#stype").append("<option value=\"\">--请选择--</option>"); 

}); 

<span style="white-space:pre"> </span>//监听专利类型change事件 

$("#ptype").change(function(){ 

var ptype = $(this); 

var atype = $(this).val();//对象值 

var pid = $("#precinct").val(); 

if (!ptype.data(atype)) {//从缓存里拿到值得话不需要再和服务器交互 

$.post("Main/PatentSubsidy/getSubsidy",{askfor:atype,precinct:pid},function(json){//返回json对象 

$("#stype").html("");//清空<span style="font-family: Arial, Helvetica, sans-serif;">#stype</span>下拉框 

for(var i=0;i<json.length;i++){ 

//添加一个 

$("#stype").append("<option value='"+json[i].id+"'>"+json[i].value+"</option>"); 

}; 

ptype.data(atype, json); //以#ptype的值为key加入到缓存 

},'json'); 

}else{ 

var json = ptype.data(atype);//取缓存 

$("#stype").html(""); 

for(var i=0;i<json.length;i++){ 

//添加一个 

$("#stype").append("<option value='"+json[i].id+"'>"+json[i].value+"</option>"); 

}; 

} 

}); 

}); 

根据#precinct和#ptype取得#stype 

action method 

复制代码 代码如下:

public void getSubsidy(){ 

String askfor=null,precinct=null; 

if(null!=getPara("askfor")&&!"".equals(getPara("askfor"))){ 

askfor=getPara("askfor"); 

if(null!=getPara("precinct")&&!"".equals(getPara("precinct"))){ 

precinct=getPara("precinct"); 

} 

}else{ 

renderJson("[{\"id\":\"\",\"value\":\"--请选择--\"}]");//传空值，返回 

} 

String sql = "select s.id, s.subsidy_type, p.name from org_subsidy_flow s, tab_precinct p where s.enabled = 'true' and p.status = '1' and s.patent_type = '" + askfor + "' and s.precinct = p.id"; 

if(null!=precinct&&!"".equals(precinct)){ 

sql += " and p.id = "+precinct; 

} 

sql += " order by p.id, s.id"; 

List<Org_subsidy_flow> sf = Org_subsidy_flow.dao.find(sql); 

if(sf.size()!=0){ 

StringBuffer buffer = new StringBuffer(); 

for(int i=0;i<sf.size();i++){ 

buffer.append("{\"id\" : \""+sf.get(i).getInt("id")+"\" , \"value\" : \""+sf.get(i).getStr("subsidy_type")+" -- "+sf.get(i).getStr("name")+"\"},"); 

} 

if(buffer.length()!=0){ 

renderJson("["+buffer.substring(0, buffer.length()-1).toString()+"]"); 

} 

}else{ 

renderJson("[{\"id\":\"\",\"value\":\"--请选择--\"}]"); 

} 

}