基于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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JS数组的赋值介绍
Mar 10 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
优秀食品类广告词
2014/03/19 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
环保倡议书400字
2014/05/15 职场文书
学习之星事迹材料
2014/05/17 职场文书
学生病假条范文
2015/08/17 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
element tree树形组件回显数据问题解决
2022/08/14 Javascript