基于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 相关文章推荐
jQuery 中关于CSS操作部分使用说明
Jun 10 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
PHP之数组学习
2011/05/29 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
2013/05/13 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python中set()函数简介及实例解析
2018/01/09 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
高中生学习的自我评价
2013/12/14 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
话题作文之呼唤
2019/12/18 职场文书