基于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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
webpack配置之后端渲染详解
Oct 26 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php object转数组示例
2014/01/15 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
Javascript中的delete介绍
2012/09/02 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue组件发布到npm简单步骤
2017/11/30 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
python获取目录下所有文件的方法
2015/06/01 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python字符串循环左移
2019/03/08 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
绿化先进工作者事迹材料
2014/01/30 职场文书
节约用水演讲稿
2014/05/21 职场文书
基层党员公开承诺书
2014/05/29 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
毕业生入职感言
2015/07/31 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Python机器学习之决策树和随机森林
2021/07/15 Javascript
Python sklearn分类决策树方法详解
2022/09/23 Python
MySQL深分页问题解决思路
2022/12/24 MySQL