`
baalwolf
  • 浏览: 350586 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

三级级联的代码

 
阅读更多
/**
 * LinkedSelect: 联动下拉框控件,支持N级联动。
 * 根据每个Select的定义中的url和id为Select做初始化,后台返回的数据为[{value:"",label:""},{value:"",label:""}]形式的数组json
 * @author senton
 * @version 1.0
 * 
 * 以选国家、省、市的联动为例,调用示例如下:
 * <pre>
 *  // 声明一个select变量
 * 	var select = new LinkedSelect();
 *  // 调用selct的init()方法,注意,该方法的参数是一个数组,用[]括起来,每个select的定义用{}括起来,多个select定义之间以,分割
 * 	select.init([
 * 		{
 * 			id:"country",
 * 			url:"获取country列表的url",
 * 			nullable:false,
 * 			defaultValue:2
 * 		},
 * 		{
 * 			id:"province",
 * 			url:"获取province列表的url",
 * 			nullable:false
 * 		},
 * 		{
 * 			id:"city",
 * 			url:"获取city列表的url",
 * 			nullable:false
 * 		}
 *  ]); 
 * </pre>
 */
/**
 * 定义一个LinkedSelect函数
 */
function LinkedSelect(){
	return this;
}

/**
 * LinkedSelect的初始化方法
 * @param allSelectInputs 所有的需要联动显示的下拉框,是一个数组。
 * @returns
 */
LinkedSelect.prototype.init = function(allSelectInputs){
	
	// 定义一个内部方法,用于加载一个下拉框,参数:
	// 	allSelectInputs:所有的下拉框定义
	//  parentId: 上一个被选中的ID,即<option>的value属性值
	//  currentIndex: 要初始化的下拉框在allSelectInputs中的索引
	initNextSelect = function(allSelectInputs, parentId, currentIndex){
		// 如果没有allSelectInputs值或者allSelectInputs的长度小于等于currentIndex,说明没有需要初始化的下拉框了,就返回
		if(!allSelectInputs || allSelectInputs.length <= currentIndex){
			return;
		}
		// 取出当前需要初始化的select的定义
		var currentSelect = allSelectInputs[currentIndex];
		// 清空currentSelect的option
		$("#"+currentSelect.id).empty();
		// 如果还有下一个,则为当前的Select加上onchange事件
		if(allSelectInputs.length > currentIndex + 1){
			$("#"+currentSelect.id).unbind("change");
			$("#"+currentSelect.id).bind("change", function(){
				initNextSelect(allSelectInputs, $(this).val(), currentIndex + 1);
			});
		}
		// 如果不是第一个,则需要判断parentId是否为空,如果为空,则递归清空后面的所有下拉框
		if(currentIndex != 0){
			if(!parentId || parentId == ''){
				$("#"+currentSelect.id).append("<option value=''></option>");
				initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1);
				return;
			}
		}
		// 如果不为空,则根据parentId取出所有的SelectItem初始化currentSelect
		$.post(currentSelect.url,
			{
			   	parentId:parentId
			},
			function(data){
				// 如果currentSelect在被定义时nullable为true,则说明可以为空,在第一个加上一个空的option
				if(currentSelect.nullable){
					$("#"+currentSelect.id).append("<option value=''></option>");
				}
				// 取出所有的selectItem加到currentSelect上
				$.each(data, function (index, selectItem) {
					// 如果currentSelect在被定义时的defaultValue等于当前selectItem的值,则选中它
					if(selectItem.value == currentSelect.defaultValue){
						$("#"+currentSelect.id).append("<option selected='selected' value='" + selectItem.value + "'>" + selectItem.label + "</option>");
					}
					else {
						$("#"+currentSelect.id).append("<option value='" + selectItem.value + "'>" + selectItem.label + "</option>");
					}
				});
				// 初始化完毕后,取出当前currentSelect选中的值,作为parentId初始化下一个select
				initNextSelect(allSelectInputs, $("#"+currentSelect.id).val(), currentIndex + 1);
			},"json"
		);
	};

	// 调用initNextSelect,启动第一个下拉框的加载
	initNextSelect(allSelectInputs, "", 0);
	
};

 

分享到:
评论

相关推荐

    省市区三级级联代码

    在IT行业中,省市区三级级联代码是一种常见的前端开发需求,尤其在构建具有地理定位功能的网站或应用时。这种级联通常涉及到用户选择省份、城市和区域的过程,这三个级别依次展开,确保用户能准确地指定他们的位置。...

    级联菜单 (二级级联 三级级联)

    标题中提到的"级联菜单(二级级联 三级级联)"是指具有两个或三个级别的级联菜单结构。二级级联菜单意味着主菜单有一个子菜单,而三级级联菜单则在二级的基础上再增加一级子菜单。例如,一个网站的导航栏可能有"产品...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    js树状地区三级级联带复选框

    在JavaScript编程领域,"js树状地区三级级联带复选框"是一个常见的需求,尤其在构建具有地域选择功能的Web应用时。这个功能允许用户通过一个层级结构来选择国家、省份和城市,同时提供了复选框以支持多选。在本篇中...

    jQuery 城市三级级联

    在网页开发中,城市三级级联通常用于实现省市区选择功能,这种功能可以让用户逐步选择他们的省份、城市和区县,以提供精确的地理位置信息。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...

    WPF和Prism实现ComboBox省市县三级级联

    在本文中,我们将深入探讨如何使用Windows Presentation Foundation (WPF) 和 Prism 框架来实现ComboBox的省市县三级级联效果。WPF是.NET Framework的一部分,提供了丰富的用户界面(UI)设计工具,而Prism则是一个...

    运用ajax+jsp+servlet实现三级级联菜单

    在我们的三级级联菜单中,服务器可能会返回一个包含各级菜单项的JSON数组,供前端JavaScript代码处理。 **JSP (JavaServer Pages)** 是Java平台上的动态网页技术,它可以将Java代码嵌入到HTML页面中,使得服务器端...

    uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

    在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"这个压缩包中,包含了实现这种级联选择的示例代码。 uni-app是一个多端统一的开发框架,它可以将同一份代码编译到iOS、Android、H5、小程序等...

    三级级联菜单(JS+HTML)

    压缩包中的“三级级联菜单.html”文件包含了实现这一功能的所有HTML、CSS和JavaScript代码。通过分析和学习这个文件,你可以了解如何将这些概念应用到实际项目中,也可以根据自己的需求进行自定义和优化。记得在本地...

    angularjs 地区三级级联

    在本文中,我们将深入探讨如何使用AngularJS实现地区三级级联功能,这通常涉及到省、市、区的联动选择。AngularJS是一个强大的JavaScript框架,它提供了丰富的功能来构建动态单页应用(SPA)。在这个场景中,我们使用...

    jquery省市区三级级联

    在IT行业中,尤其是在前端开发领域,经常需要处理各种交互效果,其中之一就是省市区三级级联。这个功能在网站注册、地址填写等场景中非常常见,它允许用户按顺序选择省份、城市和区县,以便精确地输入地址信息。在本...

    cas.rar_MATLAB 级联失效_级联_级联失效 代码_级联失效代码_级联失效算法

    总结来说,这个MATLAB级联失效项目提供了一套工具和代码,帮助研究人员和工程师理解网络级联失效的机制,并通过编程实验找到预防或减轻这种失效的方法。使用这些资源,用户可以构建自己的仿真环境,测试不同的故障...

    Java三级级联,省份,市区,地区

    这种被称为“三级级联”的概念在Java Web开发中是一个常见需求,主要用于下拉列表联动选择,提升用户界面的交互性和数据输入的准确性。 在这个项目中,"Java三级级联,省份,市区,地区"意味着开发者正在创建一个...

    Ajax (jQuery) 全国城市三级级联菜单插件

    在本案例中,我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件,它使得用户能够在下拉菜单中选择省份、城市以及区县,以实现快速筛选或输入数据的目的。 首先,jQuery是一个广泛使用的JavaScript库,它简化...

    高德地图省市县三级级联.zip

    3. **代码示例**:压缩包可能包含了一段示例代码,用于演示如何实现三级级联的功能。这部分代码可能是用Java编写的,因为标签中提到了“java”。Java是一种广泛应用于Web开发的语言,它支持丰富的库和框架,非常适合...

    Ajax实现省市区三级级联Demo(数据库来自Mysql)

    这个“Ajax实现省市区三级级联Demo”是一个典型的前端与后端交互的实例,它展示了如何利用Ajax技术从MySQL数据库动态获取并显示省级、市级、区县级的数据,实现联动选择的效果。下面我们将详细探讨这一知识点。 ...

    html js代码 省市区三级级联 完整版

    在网页开发中,省市区三级级联是一种常见的交互设计,...通过学习和理解这些代码,你可以掌握如何在实际项目中实现省市区三级级联功能。这不仅锻炼了JavaScript编程能力,还对前端数据交互和用户体验设计有深入的理解。

    省市三级级联

    "省市三级级联"是一个常见的前端开发概念,主要用于构建具有中国省、市、县(区)选择功能的用户界面。这种级联选择通常应用于地址填写、物流配送等场景,为用户提供方便快捷的选择流程。在给定的压缩包文件中,包含...

    使用JQuery实现漂亮的三级级联下拉框

    三级级联下拉框则是指三个互相联动的下拉菜单,当用户在一个下拉框中选择一个选项时,其他关联的下拉框会根据所选选项动态更新其内容。在本教程中,我们将探讨如何使用JavaScript库JQuery来实现这样的功能。 首先,...

    android省市三级级联源码

    在Android开发中,省市三级级联是一个常见的需求,特别是在实现地址选择、定位服务等功能时。这个"android省市三级级联源码"提供了一个完整的实例,可以帮助开发者快速理解和实现这一功能。下面将详细介绍这个源码中...

Global site tag (gtag.js) - Google Analytics