/** @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、AJAX和$.jetjson实现的城市级联效果的完整案例,同时还包括了一个数据库.sql文件,方便用户快速搭建并运行。接下来,我们将详细讨论这个实例中的关键知识点。 1. **jQuery**: jQuery 是一个...
2. **创建Action**:编写一个Action类,该类将接收用户的选择,查询数据库以获取相关联的下一级数据,并将这些数据以JSON格式返回。 3. **定义JSP页面**:在JSP页面中,使用Struts2的Dojo标签库创建下拉菜单。每个...
在省份城市级联查询中,Hibernate可以用来映射省市区的数据库表结构,通过SQL查询获取数据,并将其转换为Java对象供前端展示。例如,当用户选择省份时,后台可以使用Hibernate的Criteria或HQL查询语句来获取该省份的...
在IT行业中,级联列表(Cascading Dropdown List)是一种常见的用户界面元素,它允许用户在选择一个选项后,根据该选项的相关性加载并显示下一级别的选项。这种交互方式在处理多级分类数据时非常有效,比如在选择...
PHP可能被用来作为后端语言,处理前端的请求,例如当用户在前端选择某一地区时,PHP脚本会接收这个请求,查询数据库以获取相应的下级地区列表,然后将结果返回给前端。这种前后端交互通常基于HTTP请求,如AJAX,以...
3. Struts2 Action处理:在Struts2的Action类中,接收AJAX请求,根据请求参数执行相应的业务逻辑,比如从数据库中查询关联数据。 4. 数据处理:查询到的数据转化为JSON格式,这是AJAX请求期望的响应格式。Struts2...
常见的JavaScript库如jQuery、Vue.js、React.js等都有相应的组件或插件支持级联菜单的创建。 5. **数据绑定**:级联菜单的数据通常来自服务器,可以通过Ajax或Fetch API进行异步获取。数据结构一般包含节点ID、父...
同时,为了提高用户体验,可以添加默认值,优化加载速度,以及使用缓存来减少不必要的数据库查询。 这个DuoJiFenLei压缩包可能包含了实现这个功能的部分代码或者示例,但缺少必要的依赖包。你需要自行添加相关的...
这款插件设计精良,不仅外观美观,而且功能强大,能够适应各种选择需求,包括单项、多项、双项以及级联选择,这在很多场景下都是非常实用的。 首先,我们要理解“联动选择”这一概念。联动选择通常指的是两个或多个...
例如,当用户从一级下拉框中选择一个省后,Struts2 Action应该被触发,然后根据选定的省查询数据库以获取相关的市。 2. **Action类**:这是处理业务逻辑的地方,通常会包含一个方法来获取级联数据。比如,你可以...
在Bootstrap模态框中实现级联菜单,可以利用Bootstrap的`<select>`元素和jQuery插件,如`bootstrap-select`或`chosen`,它们提供了更丰富的交互和样式。 下面是如何在Bootstrap模态框内创建级联菜单的步骤: 1. **...
5. **服务器端接口**:为了响应前端的AJAX请求,后端需要提供一个接口,这个接口接收前端发送的参数(如当前选中的值),查询数据库并返回相应的JSON数据。 6. **伪码和代码注释**:提供的压缩包中可能包含了一些...
级联下拉框的数据源通常来自数据库,Hibernate可以便捷地将这些数据映射到Java对象,便于在应用程序中使用。 3. **SQLServer2000**:这是一个关系型数据库管理系统,由Microsoft公司开发。在这个项目中,SQLServer...
4. **懒加载与缓存**: Ebean支持懒加载,减少内存占用,并有级联缓存策略,提高查询性能。 5. **数据库迁移**: Ebean提供数据库迁移工具,方便开发者在不同数据库版本间进行数据同步。 ### 使用Ebean插件 在`标题...
这个“英文版js地区国家级联”资源提供了一个纯JavaScript实现的解决方案,无需依赖数据库,简化了开发流程。以下是对这个资源的详细解读: 首先,我们要理解什么是级联选择菜单。级联菜单通常用于地理位置选择,...
5. **Struts2 Action**:创建一个Action,处理请求,查询数据库并返回JSON格式的数据。 **六、示例代码片段** ```javascript $("#country").on("change", function() { var countryId = $(this).val(); $.ajax({ ...
5. **级联查询**:在数据库操作中,级联查询指的是当用户在一个下拉框选择一个选项时,根据该选项的值动态加载并显示下一个级别的选项,如选择省份后,自动更新城市列表,再选择城市后,自动更新区县列表。...
OQL.NET 对象查询语言具有良好的设计,无需安装插件,您就能在 IDE 中编写 OQL 时获得严谨而正确的上下文帮助。OQL.NET 对象查询语言能一步一步地引导用户写出正确的、具有兼容性的数据库查询语句。 OQL.NET 是...
例如,通过查询数据库获取菜单数据,并动态生成HTML结构。 总之,级联菜单是一种有效的网页导航工具,通过HTML、CSS和JavaScript可以创建出功能丰富、交互性强的菜单系统。在ASP环境中,还可以结合服务器端脚本来...