基于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
Aug 13 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
vue-cli3全面配置详解
Nov 14 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
在JavaScript中使用对数Math.log()方法的教程
2015/06/15 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
学习python的前途 python挣钱
2019/02/27 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
社团成立邀请函
2014/01/08 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
社会实践活动总结报告
2014/04/29 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
2015年重阳节主持词
2015/07/04 职场文书
python tqdm用法及实例详解
2021/06/16 Python