基于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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
js表头排序实现方法
Jan 16 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
JS作用域深度解析
Dec 29 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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 分页原理分析,大家可以看看
2009/12/21 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue实现购物车的监听
2020/04/20 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
生育关怀行动实施方案
2014/03/26 职场文书
老公爱的承诺书
2014/03/31 职场文书
统计专业自荐书
2014/07/06 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
五好家庭事迹材料
2014/12/20 职场文书
毕业设计论文评语
2014/12/31 职场文书
学校端午节活动总结
2015/02/11 职场文书
投标单位介绍信
2015/05/05 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
Redis数据同步之redis shake的实现方法
2022/04/21 Redis