基于JQuery实现的Select级联


Posted in Javascript onJanuary 27, 2014
$(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\":\"--请选择--\"}]"); 
} 
}
Javascript 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
javascript根据像素点取位置示例
Jan 27 #Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 #Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 #Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 #Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 #Javascript
javascript中定义私有方法说明(private method)
Jan 27 #Javascript
用javascript替换URL中的参数值示例代码
Jan 27 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP自定义函数收代码
2010/08/01 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
利用Python开发微信支付的注意事项
2016/08/19 Python
Django与JS交互的示例代码
2017/08/23 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
django 中QuerySet特性功能详解
2019/07/25 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python进度条的制作代码实例
2019/08/31 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
《母鸡》教学反思
2014/02/25 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
红色旅游心得体会
2014/09/03 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年防汛工作总结
2015/05/15 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
Node实现搜索框进行模糊查询
2021/06/28 Javascript