基于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 相关文章推荐
js实现遮罩层弹出框的方法
Jan 15 Javascript
Js控制滑轮左右滑动实例
Feb 13 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
理解javascript async的用法
Aug 22 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
Vue 一键清空表单的实现方法
Feb 07 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
Javascript 解疑
2009/11/11 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
windows系统下Python环境搭建教程
2017/03/28 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
C语言笔试集
2012/07/24 面试题
数学系毕业生的自我评价
2014/01/10 职场文书
2014年征兵标语
2014/06/20 职场文书
商场促销活动总结
2014/07/10 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
Python音乐爬虫完美绕过反爬
2021/08/30 Python
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript