当前位置:主页 > jquery教程 > 基于JQuery实现的Select级联

JQuery实现的Select级联的实例代码

发布:2020-01-20 16:27:28 106


给大家整理了jquery相关的编程文章,网友常访彤根据主题投稿了本篇教程内容,涉及到jquery、Select级联、基于JQuery实现的Select级联相关内容,已被891网友关注,内容中涉及的知识点可以在下方直接下载获取。

基于JQuery实现的Select级联

 

$(document).ready(function(){


$("#precinct").change(function(){
$("#ptype").val("");//重置所有
$("#stype").html("");
$("#stype").append("<option value=\"\">--请选择--</option>");
});

<span > </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 >#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得到多个值只能用取Class不能用取ID的详解

    发布:2020-01-29

    下面小编就为大家带来一篇jQuery得到多个值只能用取Class ,不能用取ID的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 关于jQuery.Validate表单验证插件的使用教程

    发布:2020-02-11

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。接下来通过本文给大家介绍jQuery.Validate表单验证插件的使


  • jquery easyui对于开始时间小于结束时间的判断方法

    发布:2020-01-20

    对于开始时间小于结束时间的判断可以参考,jquery easyui里的ValidateBox进行判断,需要的朋友可以参考下


  • jquery css实现动感的图片切换的效果代码

    发布:2020-01-18

    这篇文章主要介绍了jquery+css实现动感的图片切换效果,效果实现很精致,动画简洁大方,推荐给大家,感兴趣的小伙伴们可以参考一下


  • JS设置表格奇偶行设置不同颜色的实例代码

    发布:2021-05-28

    表格奇偶行设置不同颜色,在某些情况下还是比较实用的,下面有个不错的示例,大家可以参考下,希望对大家有所帮助


  • JQuery和Js中让ajax执行完后再继续往下执行的实现方法

    发布:2020-02-02

    查了不少资料,最后,还是jquery指南的书上找到了详细的参数(async: false,),做好后,示例代码放上,如下所示,需要的朋友可以参考下


  • jQuery的图片滑块焦点图插件整理推荐

    jQuery的图片滑块焦点图插件整理推荐

    发布:2022-07-07

    给大家整理一篇关于jQuery的教程,本文给大家整理了9款基于jQuery的图片滑块焦点图插件,效果都非常炫酷,演示和下载地址都给大家整理好了,有需要的小伙伴直接拿走吧,不用跟我客气^_^


  • jQuery Validate设置onkeyup验证的实例代码

    发布:2022-12-07

    给网友朋友们带来一篇关于jQuery的教程,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。这篇文章主要介绍了jQuery Validate设置onkeyup验证的相关资料


网友讨论