JavaScriptk开发中如何基于JQuery实现的Select级联

代码如下:

$(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\":\"--请选择--\"}]");
}
}