`

数据库查询级联插件

    博客分类:
  • area
 
阅读更多

/** @author tancheng 基于jquery的地区级联组件*/
/**
  oid      当前对象的id
  fillId   需要填充对象的Id
  clearIds 要清空的数据项
  fn       回调函数
 
  使用方式

$(function (){
     //1.初始化
     jQuery("#vProvCode").change(function (){
         AreaPlugin.areaChange('vProvCode',['vCityCode','vContyCode'],'vCityCode');
     });
     jQuery("#vCityCode").change(function (){
         AreaPlugin.areaChange('vCityCode',['vContyCode'],'vContyCode');
     });

}

建议回显使用数据库查询list循环方式
*/
var AreaPlugin={};
(function ($$){
  this.initCode="root";
  this.areaChange=function(oId,clearIds,fillId,fn){
   //1.通过obj获得当前选中项
   var pcode;
   if(oId){
    obj=jQuery("#"+oId);
    pcode =obj.val();
   }
   if(!pcode)pcode=this.initCode;
   if(pcode){
      var url=getRootPath()+"baseinfo/destCity_searchArea.action?time="+new Date();
      $$.getJSON(url,{"vDestCityCode":pcode},function (data){
          if(data){
            clearSelect(clearIds);
            fillSelect(jQuery("#"+fillId),data);
          }
          if(typeof fn=='function')
            fn.call();
      });
   }
  }
//清空下拉框
this.clearSelect=function(clearIds){
     //清空的时候如果第一项value为空,则保留
     if(typeof clearIds=="string")
        clearIds=[clearIds];
     if($$.isArray(clearIds)){
         for(var i=0;i<clearIds.length;i++){
            //获得第一项的值
          var obj=$$("#"+clearIds[i]);
          var fistOption=obj.find("option:first");
          obj.empty();
          if(!fistOption.val())obj.append(fistOption);
         }
     }
}

//填充option
this.fillSelect=function (obj,ary){
    if($$.isArray(ary)){
       for(var i=0;i<ary.length;i++){
          obj.append("<option value='"+ary[i].V_DEST_CITY_CODE+"'>"+ary[i].V_DEST_CITY_NAME+"</option>");
       }
    }
}

function getRootPath() {
 var pathName = document.location.pathname;
    var index = pathName.substr(1).indexOf("/");
    var webName = pathName.substr(0,index+1);
 return window.location.protocol + '//' + window.location.host + '/'+ webName + '/';
}
AreaPlugin=this;
})(jQuery)


 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery城市级联插件

    《jQuery城市级联插件深度解析与应用》 在当今的网页开发中,用户体验成为了衡量一个网站质量的重要标准。为了提供更加便捷、直观的操作界面,城市级联菜单应运而生。这种菜单允许用户在无需刷新页面的情况下,通过...

    城市级联完整实例(带数据库.sql文件) jquery+ajax

    这个实例是基于jQuery、AJAX和$.jetjson实现的城市级联效果的完整案例,同时还包括了一个数据库.sql文件,方便用户快速搭建并运行。接下来,我们将详细讨论这个实例中的关键知识点。 1. **jQuery**: jQuery 是一个...

    struts2的动态多级联下拉菜单

    2. **创建Action**:编写一个Action类,该类将接收用户的选择,查询数据库以获取相关联的下一级数据,并将这些数据以JSON格式返回。 3. **定义JSP页面**:在JSP页面中,使用Struts2的Dojo标签库创建下拉菜单。每个...

    ajax+ssh实现省份城市级联查询

    在省份城市级联查询中,Hibernate可以用来映射省市区的数据库表结构,通过SQL查询获取数据,并将其转换为Java对象供前端展示。例如,当用户选择省份时,后台可以使用Hibernate的Criteria或HQL查询语句来获取该省份的...

    全国省市区 级联 列表 不需要数据库

    在IT行业中,级联列表(Cascading Dropdown List)是一种常见的用户界面元素,它允许用户在选择一个选项后,根据该选项的相关性加载并显示下一级别的选项。这种交互方式在处理多级分类数据时非常有效,比如在选择...

    前端+数据库 四级联动插件

    PHP可能被用来作为后端语言,处理前端的请求,例如当用户在前端选择某一地区时,PHP脚本会接收这个请求,查询数据库以获取相应的下级地区列表,然后将结果返回给前端。这种前后端交互通常基于HTTP请求,如AJAX,以...

    ajax+struts2.0+jsp下拉列表级联

    3. Struts2 Action处理:在Struts2的Action类中,接收AJAX请求,根据请求参数执行相应的业务逻辑,比如从数据库中查询关联数据。 4. 数据处理:查询到的数据转化为JSON格式,这是AJAX请求期望的响应格式。Struts2...

    动态树形结构的级联菜单

    常见的JavaScript库如jQuery、Vue.js、React.js等都有相应的组件或插件支持级联菜单的创建。 5. **数据绑定**:级联菜单的数据通常来自服务器,可以通过Ajax或Fetch API进行异步获取。数据结构一般包含节点ID、父...

    Struts2+Hibernate写的下拉菜单级联两级分类

    同时,为了提高用户体验,可以添加默认值,优化加载速度,以及使用缓存来减少不必要的数据库查询。 这个DuoJiFenLei压缩包可能包含了实现这个功能的部分代码或者示例,但缺少必要的依赖包。你需要自行添加相关的...

    手机端js联动选择插件,界面美观,可连接数据库

    这款插件设计精良,不仅外观美观,而且功能强大,能够适应各种选择需求,包括单项、多项、双项以及级联选择,这在很多场景下都是非常实用的。 首先,我们要理解“联动选择”这一概念。联动选择通常指的是两个或多个...

    struts2 三级级联

    例如,当用户从一级下拉框中选择一个省后,Struts2 Action应该被触发,然后根据选定的省查询数据库以获取相关的市。 2. **Action类**:这是处理业务逻辑的地方,通常会包含一个方法来获取级联数据。比如,你可以...

    点击【编辑】显示boostrap模态框级联菜单

    在Bootstrap模态框中实现级联菜单,可以利用Bootstrap的`&lt;select&gt;`元素和jQuery插件,如`bootstrap-select`或`chosen`,它们提供了更丰富的交互和样式。 下面是如何在Bootstrap模态框内创建级联菜单的步骤: 1. **...

    json+select 下拉框级联菜鸟

    5. **服务器端接口**:为了响应前端的AJAX请求,后端需要提供一个接口,这个接口接收前端发送的参数(如当前选中的值),查询数据库并返回相应的JSON数据。 6. **伪码和代码注释**:提供的压缩包中可能包含了一些...

    用Struts+hibernate+SQLServer2000写的级联下拉框程序

    级联下拉框的数据源通常来自数据库,Hibernate可以便捷地将这些数据映射到Java对象,便于在应用程序中使用。 3. **SQLServer2000**:这是一个关系型数据库管理系统,由Microsoft公司开发。在这个项目中,SQLServer...

    ebean插件压缩包(最终版)

    4. **懒加载与缓存**: Ebean支持懒加载,减少内存占用,并有级联缓存策略,提高查询性能。 5. **数据库迁移**: Ebean提供数据库迁移工具,方便开发者在不同数据库版本间进行数据同步。 ### 使用Ebean插件 在`标题...

    英文版js地区国家级联

    这个“英文版js地区国家级联”资源提供了一个纯JavaScript实现的解决方案,无需依赖数据库,简化了开发流程。以下是对这个资源的详细解读: 首先,我们要理解什么是级联选择菜单。级联菜单通常用于地理位置选择,...

    jQuery实现的多级级联下拉列表

    5. **Struts2 Action**:创建一个Action,处理请求,查询数据库并返回JSON格式的数据。 **六、示例代码片段** ```javascript $("#country").on("change", function() { var countryId = $(this).val(); $.ajax({ ...

    省市区三级联动(代码+SQL)

    5. **级联查询**:在数据库操作中,级联查询指的是当用户在一个下拉框选择一个选项时,根据该选项的值动态加载并显示下一个级别的选项,如选择省份后,自动更新城市列表,再选择城市后,自动更新区县列表。...

    Macrobject OQL.NET 对象查询语言

     OQL.NET 对象查询语言具有良好的设计,无需安装插件,您就能在 IDE 中编写 OQL 时获得严谨而正确的上下文帮助。OQL.NET 对象查询语言能一步一步地引导用户写出正确的、具有兼容性的数据库查询语句。  OQL.NET 是...

    级联菜单级联菜单

    例如,通过查询数据库获取菜单数据,并动态生成HTML结构。 总之,级联菜单是一种有效的网页导航工具,通过HTML、CSS和JavaScript可以创建出功能丰富、交互性强的菜单系统。在ASP环境中,还可以结合服务器端脚本来...

Global site tag (gtag.js) - Google Analytics