基于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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
H5实现手机拍照和选择上传功能
Dec 18 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
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php和html的区别点详细总结
2019/09/24 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
Python浅复制中对象生存周期实例分析
2018/04/02 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
英国羊绒服装购物网站:Pure Collection
2018/10/22 全球购物
Java的五个基础面试题
2016/02/26 面试题
教师业务学习制度
2014/01/25 职场文书
《自然之道》教学反思
2014/02/11 职场文书
新农村建设标语
2014/06/24 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
岗位职责范本大全
2015/02/26 职场文书
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
python处理json数据文件
2022/04/11 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers