Dynamic DropDownList Group

No Comment

我的日历

最新评论

友情链接

访问计数

收藏本站 设为首页

+------------------------------------------------------------------------------------------------------+

Dynamic DropDownList Group [2005-8-29]
Xmercy 发表在 Plus

大佛

以XML为数据源（后台根据库中分类生成），可编辑，支持IE和FF，其它浏览器有待测试

/*
Dynamic DropDownList Group
author : 我佛山人
email  : wfsr@msn.com
*/
String.prototype.Format = function(){
	var tmpStr = this;
	var iLen = arguments.length;
	for(var i=0;i<iLen;i++){
		tmpStr = tmpStr.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
	}
	return tmpStr;
}
var ClassReader = function(){
	this.GetHttpRequest = function(){
		if (window.XMLHttpRequest)		// Gecko
			return new XMLHttpRequest();
		else if (window.ActiveXObject)	// IE
			return new ActiveXObject("MsXml2.XmlHttp") ;
	}
	this.LoadUrl = function(urlToCall, asyncFunctionPointer, args){
		var oClassReader = this;
		var bAsync = (typeof(asyncFunctionPointer) == "function");

if (xPathResult && xPathResult.singleNodeValue)
				return xPathResult.singleNodeValue ;
			else	
				return null ;
		}
	}
}
function Class(){
	this.ClassID = 0;
	this.ParentID = 0;
	this.ClassName = "";
	this.Level = 0;
}
Browser = {
	isIE : document.all? true:false,
	isNS : document.layer? true:false,
	isFF : !this.isIE
}
function Group(instanceName, value){
	this.InstanceName = instanceName;
	this.Value = value || 0;
	this.XMLPath = "ddlData.xml";
	var XML = null;
	var Level = 0;
	var CurrentLevel = 0;
	var Container = null;
	function createOption(selectName, optionData){
		var obj = getSelect(selectName);
		var l = optionData.length;
		if(l==0){
			Container.removeChild(obj);
			Level -= 1;
			return;
		}
		if(obj){
			with(obj){
				if (l > 0){
					deleteOption(selectName);
					for(var i=0;i<l;i++)
						options[i+1] = new Option(optionData[i].getAttribute("ClassName"), optionData[i].getAttribute("ClassID"));
				}
				else deleteSelect(selectName);
			}
		}
		else alert("找不到对象");
	}
	function getLevel(id){
		return parseInt(id.replace(instanceName + "_", ""));
	}
	function getNextLevel(id){
		return "{0}_{1}".Format(instanceName, getLevel(id) + 1);
	}
	function hasNext(id){
		return document.getElementById(getNextLevel(id)) ? true : false;
	}
	function deleteOption(selectName){
		var obj = document.getElementById(selectName);
		while(obj.options.length >1) obj.removeChild(obj.options[1]);
	}
	function deleteSelect(selectName){
		var curLevel = getLevel(selectName);
		var container = document.getElementById(instanceName + "_Container");
		for(;Level > curLevel;Level-=1)
			container.removeChild(document.getElementById(instanceName + "_" + Level))
		if(curLevel > 0) container.removeChild(document.getElementById(instanceName + "_" + (Level--)))
	}
	function deleteSelect2(selectName){
		var curLevel = getLevel(selectName);
		var next2SelectName = instanceName + "_" + (curLevel + 2);
		if(document.getElementById(next2SelectName)) deleteSelect(next2SelectName);
	}
	function createSelect(selectName){
		var oSelect = document.createElement("SELECT");
		with(oSelect){
			id = selectName;
			name = selectName;
			options[0] = new Option("请选择分类", "");
			if(Browser.isIE){
				attachEvent("onchange", _changeHandler);
			}
			else setAttribute("onchange", instanceName + ".ChangeHandler(this)"); 
		}
		Container.appendChild(oSelect);
		Level ++;
		return oSelect;
	}
	function getSelect(selectName){
		var obj = document.getElementById(selectName);
		if(obj){
			return obj;
		}
		else
		{
			return createSelect(selectName);
		}
	}
	this.ChangeHandler = _changeHandler;
	function _changeHandler(obj){
		if(!obj.value) obj = event.srcElement || event.target || e.target;
		var val = obj.value;
		setValue(val);
		if(val == ""){if(hasNext(obj.id))deleteSelect(getNextLevel(obj.id));return;}
		deleteSelect2(obj.id);
		createOption(getNextLevel(obj.id), XML.SelectNodes("//Class[@ParentID={0}]".Format(val)));
		window.status=Level;
	}
	function setValue(val){
		window[instanceName].Value = val;
		document.getElementById(instanceName).value = val;
	}
	this.InitData = function(){
		if(arguments.length > 0){
			XML = arguments[0];
			createOption(instanceName + "_0", XML.SelectNodes("//Class[@ParentID=0]"));
			if(arguments[1][0]>0) loadData(arguments[1]);
		}
		else{
			new ClassReader().LoadUrl(this.XMLPath, arguments.callee, [this.Value, instanceName]);
		}
	}
	function loadData(){
		var curPID = arguments[0][0];
		var instanceName = arguments[0][1];
		var arrData = [curPID];
		while((curPID = parseInt(XML.SelectSingleNode("//Class[@ClassID={0}]".Format(curPID)).getAttribute("ParentID"))) > 0)
		arrData[arrData.length] = curPID;
		arrData.reverse()
		var l = arrData.length;
		for(var i=0;i<l;i++){
			selectByValue(instanceName + "_" + i, arrData[i]);
		}
	}
	function selectByValue(selectName, value){
		try{
			var obj = document.getElementById(selectName);
			var i = obj.options.length - 1;
			while(obj.options[i].value != value && i >0) i -= 1;
			obj.selectedIndex = i;
			_changeHandler(obj);
		}catch(e){alert(selectName)}
	}
	this.Generate = function(){
		document.write('<div id="{0}_Container"><input type="text" name="{0}" id="{0}" value="{1}"><select id="{0}_0" onchange="window[\'{0}\'].ChangeHandler(this)"><option value="">请选择分类</option></select></div>'.Format(this.InstanceName, this.Value));
		Container = document.getElementById(instanceName + "_Container")
		this.InitData(); 
	}
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
演示：
wfsr.net/Plus/ddlGroup/ddlGroup.htm
3个文件：一个htm，一个xml,一个js

≡≡≡≡≡ 评论(共条)我要评论

+------------------------------------------------------------------------------------------------------+