基于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 的dialog和ztree结合实现步骤
Aug 02 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
基于vue实现swipe分页组件实例
May 25 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 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&amp;mysql(五)
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
微信自定义分享php代码分析
2016/11/24 PHP
php异常处理捕获错误整理
2019/09/23 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
Opacity.js
2007/01/22 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python中while循环语句用法简单实例
2015/05/07 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
详解django2中关于时间处理策略
2019/03/06 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
标准毕业生自荐信
2014/06/24 职场文书
python编写五子棋游戏
2021/05/25 Python
python超详细实现完整学生成绩管理系统
2022/03/17 Python