基于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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
Javascript函数的参数
Jul 16 Javascript
jquery中键盘事件小结
Feb 24 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
详解node.js 事件循环
Jul 22 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
一个ubbcode的函数,速度很快.
2006/10/09 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
初中国旗下的演讲稿
2014/08/28 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
党小组评议意见
2015/06/02 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python