Dynamic DropDownList Group - 达人(大佛)

2005/08/29 | Dynamic DropDownList Group
类别(Plus) | 评论(1) | 阅读(118) | 发表于 23:43: 以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"); var oXmlHttp = this.GetHttpRequest(); oXmlHttp.open("GET", urlToCall, bAsync); if (bAsync){ oXmlHttp.onreadystatechange = function() { if (oXmlHttp.readyState == 4){ oClassReader.DOMDocument = oXmlHttp.responseXML; if (oXmlHttp.status == 200) asyncFunctionPointer( oClassReader, args ) ; else alert("XML Request Error: " + oXmlHttp.statusText + " (" + oXmlHttp.status + ")" ) ; } } } oXmlHttp.send(null) ; if (!bAsync) { if (oXmlHttp.status == 200) this.DOMDocument = oXmlHttp.responseXML ; else { alert("XML Request Error: " + oXmlHttp.statusText + " (" + oXmlHttp.status + ")") ; } } } this.SelectNodes = function(xpath){ if (document.all) // IE return this.DOMDocument.selectNodes(xpath); else{ // Gecko var aNodeArray = new Array(); var xPathResult = this.DOMDocument.evaluate(xpath, this.DOMDocument, this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), XPathResult.ORDERED_NODE_ITERATOR_TYPE, null) ; if (xPathResult){ var oNode = xPathResult.iterateNext() ; while(oNode){ aNodeArray[aNodeArray.length] = oNode ; oNode = xPathResult.iterateNext(); } } return aNodeArray ; } } this.SelectSingleNode = function(xpath){ if (document.all) // IE return this.DOMDocument.selectSingleNode( xpath ) ; else{ // Gecko var xPathResult = this.DOMDocument.evaluate( xpath, this.DOMDocument, this.DOMDocument.createNSResolver(this.DOMDocument.documentElement), 9, null); 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; 0

http://Xmercy.5d.cn/

评论Comments