手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于JQuery实现的Select级联
基于JQuery实现的Select级联
摘要:复制代码代码如下:$(document).ready(function(){$("#precinct").change(function()...

复制代码 代码如下:

$(document).ready(function(){

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

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

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

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

});

<span> </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>#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":"--请选择--"}]");

}

}

【基于JQuery实现的Select级联】相关文章:

JavaScript实现的MD5算法完整实例

javascript基于DOM实现省市级联下拉框的方法

AspNet中使用JQuery boxy插件的确认框

基于JavaScript实现动态添加删除表格的行

简单获取键盘的KeyCode

jQuery 遍历函数详解

jQuery+ajax实现无刷新级联菜单示例

jQuery实现延迟跳转的方法

JQuery中DOM实现事件移除的方法

jQuery实现在列表的首行添加数据

精品推荐
分类导航