基于JQuery实现的Select级联

 更新时间:2014年01月27日 17:43:18   作者:  
Select级联,想必大并不陌生吧,本文为大家介绍下使用jquery是如何快速实现的,希望对大家有所帮助
复制代码 代码如下:

$(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\":\"--请选择--\"}]");
}
}

相关文章

  • jquery判断至少有一个checkbox被选中的方法

    jquery判断至少有一个checkbox被选中的方法

    这篇文章主要介绍了jquery判断至少有一个checkbox被选中的方法,涉及jQuery操作checkbox控件的相关技巧,需要的朋友可以参考下
    2015-06-06
  • jQuery设置聚焦并使光标位置在文字最后的实现方法

    jQuery设置聚焦并使光标位置在文字最后的实现方法

    下面小编就为大家带来一篇jQuery设置聚焦并使光标位置在文字最后的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS自动缩小超出大小的图片

    JS自动缩小超出大小的图片

    在文章的正文中,往往会出现一些超大的图片,把页面撑开变形,影响了美观。用这段JS代码就可解决这个问题,你可以把图片的最大值限定在一定范围内,当图片大小超出这个尺寸后,就会被自动按比例缩小
    2012-10-10
  • jQuery表格行上移下移和置顶的实现方法

    jQuery表格行上移下移和置顶的实现方法

    这篇文章主要介绍了jQuery表格行上移下移和置顶的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • 2014年50个程序员最适用的免费JQuery插件

    2014年50个程序员最适用的免费JQuery插件

    这篇文章主要介绍了2014年50个程序员最适用的免费JQuery插件,需要的朋友可以参考下
    2014-12-12
  • jquery中加载图片自适应大小主要实现代码

    jquery中加载图片自适应大小主要实现代码

    当图片较小时显示实际大小,当图片超过div 大小时图片自动适应div的大小,下面有个示例,大家可以参考下,希望对大家有所帮助
    2013-08-08
  • jquery实现简单文字提示效果

    jquery实现简单文字提示效果

    这篇文章主要介绍了jquery实现简单文字提示效果的方法,以完整实例形式分析了jQuery插件jquery-1.2.6.pack.js实现文字提示效果的相关技巧,并提供了jquery-1.2.6.pack.js的本站下载地址,需要的朋友可以参考下
    2015-12-12
  • jQuery中element选择器用法实例

    jQuery中element选择器用法实例

    这篇文章主要介绍了jQuery中element选择器用法,实例分析了element选择器的功能、定义及相关的操作技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jquery键盘事件介绍

    jquery键盘事件介绍

    jquery键盘事件介绍,使用jquery的朋友可以参考下。
    2011-01-01
  • 浅谈jQuery中ajaxPrefilter的应用

    浅谈jQuery中ajaxPrefilter的应用

    下面小编就为大家带来一篇浅谈jQuery中ajaxPrefilter的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论