当前位置:首页 > 开发 > Web前端 > 前端 > 正文

三级级联的代码

发表于: 2013-09-16   作者:baalwolf   来源:转载   浏览次数:
摘要: /** * LinkedSelect: 联动下拉框控件,支持N级联动。 * 根据每个Select的定义中的url和id为Select做初始化,后台返回的数据为[{value:"",label:""},{value:"",label:""}]形式的数组json * @author senton * @ve
/**
 * 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);
	
};

 

三级级联的代码

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一、前端js代码 // JavaScript Document Ra.ServerFailsInfo.bydepart = function(grid_id,level,dep
嘿嘿,周六周日网络没啦,甚是纠结啊,终于在不懈的努力下重新拥有了网络,激动哦,于是今天在这里
http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动。所以研究了一下。他的界面如下: 何不直接
< asp : DropDownList ID ="ddl1" runat ="server" Width ="100px" ></ asp : DropDownLis
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
<asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList> <
<asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList> <
前段时间想学习学习DWR,在网上查找资料无数,没有见到一个现成的例子可以参阅一下,郁闷无比,罢了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head>
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号