基于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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
JavaScript封装单向链表的示例代码
Sep 17 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
香妃
2021/03/03 冲泡冲煮
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
如何理解python面向对象编程
2020/06/01 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
公司总经理岗位职责
2014/03/15 职场文书
党员教师一句话承诺
2014/05/30 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
公司踏青活动方案
2014/08/16 职场文书
青岛海底世界导游词
2015/02/11 职场文书
辞职信如何写
2015/02/27 职场文书
党支部审查意见
2015/06/02 职场文书
师德师风培训感言
2015/08/03 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
python中validators库的使用方法详解
2022/09/23 Python