基于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脚本实现Web页面信息交互
Dec 21 Javascript
js 匿名调用实现代码
Jun 19 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
Sep 04 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
详解tween.js的使用教程
Sep 14 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
python的unittest测试类代码实例
2017/12/07 Python
python实现数据分析与建模
2019/07/11 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
医学生实习自荐信
2013/10/01 职场文书
个人自荐信
2013/12/05 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
行政专员的岗位职责
2014/03/10 职场文书
个人年度总结报告
2015/03/09 职场文书
离职信范文
2015/06/23 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js