AttachXMLForSelect: XML自动关联多级SELECT菜单代码和例子
2007-12-05 16:03:41 来源：WEB开发网<HTML>
<META NAME=save CONTENT=history/>
<script>
/*
关联xml(标准化越来越近了)到1个到N个的Select
没有做历史记录
*/
function Attachxml(标准化越来越近了)ForSelect(xd,arr,defaultText,defaultValue)//xd:xml(标准化越来越近了)dom,arr:array of select
{
function EnsureString(str)
{
if(typeof(str)==string)return str;
if(str==null)return ;
try{return str+;}catch(x){}
return ;
}
defaultText=EnsureString(defaultText);
defaultValue=EnsureString(defaultValue);
//检查参数
if(xd==null||xd.documentElement==null||arr==null||arr.length==0)
throw(new Error(-1,invalid arguments));
//转换成内部的xd
(function(xml(标准化越来越近了)dom){
xd=new ActiveXObject(Microsoft.xml(标准化越来越近了)DOM);
xd.loadxml(标准化越来越近了)(xml(标准化越来越近了)dom.xml(标准化越来越近了));
})(xd)
//把Select释放掉,换成uniqueID来储存
for(var i=0;i<arr.length;i++)
arr[i]={
uniqueID:arr[i].uniqueID
,
node:null //当前关联的xml(标准化越来越近了) Node
,
attach:false //当前是否关联到OnSelectChange
};
//把第一个Select相关的xml(标准化越来越近了) node设置为xml(标准化越来越近了)的根元素
arr[0].node=xd.documentElement;
//关联第一个Select
ReAttachNode(0);
var Controller={
HandleChange:HandleChange
};
return Controller;
//响应用户操作
function OnSelectChange(event)
{
HandleChange(event.srcElement);
}
//处理Select可能被修改的情况，确认后面的Select正常
function HandleChange(s)
{
//取得Select在arr中的位置
for(var index=0;index<arr.length;index++)
{
if(s.uniqueID==arr[index].uniqueID)
break;
}
//如果不是最后一个Select
if(index<arr.length-1)
{
var node=arr[index].node;
//关联下一个Select相关的xml(标准化越来越近了) node
if(node)
{
var xns=node.selectNodes(item);
arr[index+1].node=xns.item(s.selectedIndex);
}
else arr[index+1].node=null;
//关联下一个Select
/*关联递归处*/
ReAttachNode(index+1);
}
}
//关联，重关联一个Select到指定的node
function ReAttachNode(index)
{
//取当前关联的node
var node=arr[index].node;
var pnode=null;
if(index>0)pnode=arr[index].node;
//取当前Select
var s=document.getElementById(arr[index].uniqueID);
//清楚当前Select的内容
s.innerHTML=;
//如果有defaultText，那么设置一项
if((node==null||node.selectNodes(item).length==0)&&defaultText)
{
var o=document.createElement(OPTION);
o.value=defaultValue;
o.innerText=defaultText;
s.appendChild(o);
}
//如果关联的node为空，那么取消事件关联
if(node==null)
{
if(arr[index].attach)
{
s.detachEvent(onchange,OnSelectChange);
arr[index].attach=false;
}
/*关联递归处*/
HandleChange(s);
return;
}
//如果node不为空
//重新关联事件
if(arr[index].attach==false)
{
s.attachEvent(onchange,OnSelectChange);
arr[index].attach=true;
}
//把子node的值倒入到Select中
var xns=node.selectNodes(item);
for(var i=0;i<xns.length;i++)
{
var o=document.createElement(OPTION);
o.value=xns.item(i).getAttribute(value);
o.innerText=xns.item(i).getAttribute(text);
s.appendChild(o);
}
//这个。。。可能不需要吧。。。
if(s.options.length)
s.selectedIndex=0;
/*关联递归处*/
HandleChange(s);
}
}
</script>
<BODY>
<xml(标准化越来越近了) id=oxml(标准化越来越近了)>
<item>
<item text=text1 value=value1>
<item text=text11 value=value11>
<item text=text111 value=value111/>
<item text=text112 value=value112/>
<item text=text113 value=value113/>
<item text=text114 value=value114/>
</item>
<item text=text12 value=value12>
<item text=text121 value=value121/>
<item text=text122 value=value122/>
<item text=text123 value=value123/>
<item text=text124 value=value124/>
</item>
<item text=text13 value=value13>
<item text=text131 value=value131/>
<item text=text132 value=value132/>
<item text=text133 value=value133/>
<item text=text134 value=value134/>
</item>
<item text=text14 value=value14>
<item text=text141 value=value141/>
<item text=text142 value=value142/>
<item text=text143 value=value143/>
<item text=text144 value=value144/>
</item>
</item>
<item text=text2 value=value2>
<item text=text21 value=value21>
<item text=text211 value=value211/>
<item text=text212 value=value212/>
<item text=text213 value=value213/>
<item text=text214 value=value214/>
</item>
<item text=text22 value=value22>
<item text=text221 value=value221/>
<item text=text222 value=value222/>
<item text=text223 value=value223/>
<item text=text224 value=value224/>
</item>
<item text=text23 value=value23>
<item text=text231 value=value231/>
<item text=text232 value=value232/>
<item text=text233 value=value233/>
<item text=text234 value=value234/>
</item>
<item text=text24 value=value24>
<item text=text241 value=value241/>
<item text=text242 value=value242/>
<item text=text243 value=value243/>
<item text=text244 value=value244/>
</item>
</item>
</item>
</xml(标准化越来越近了)>
<SCRIPT>
function AlertForm(f)
{
alert(
s1:\t+GetSelectOption(f(s1)).innerText + \t:\t + GetSelectOption(f(s1)).value + \r\n
+
s2:\t+GetSelectOption(f(s2)).innerText + \t:\t + GetSelectOption(f(s2)).value + \r\n
+
s3:\t+GetSelectOption(f(s3)).innerText + \t:\t + GetSelectOption(f(s3)).value + \r\n
);
return event.returnValue=false;
}
function GetSelectOption(s)
{
return s(s.selectedIndex);
}
</SCRIPT>
<FORM id=f1 onsubmit=AlertForm(this)
><SELECT name=s1 style=width:100px;></SELECT
><SELECT name=s2 style=width:100px;></SELECT
><SELECT name=s3 style=width:100px;></SELECT
><INPUT type=submit>
</FORM>
<input type=hidden id=inpSave style=behavior:url(#default#savehistory) value=000>
</BODY>
<script>
var C=Attachxml(标准化越来越近了)ForSelect(oxml(标准化越来越近了).xml(标准化越来越近了)Document,[f1(s1),f1(s2),f1(s3)]);
//暴露Controller是因为IE5.0没有提供fireEvent,,555555
//下面的代码是储存状态的。
function window.onload()
{
var sis=inpSave.value;
f1(s1).selectedIndex=parseInt(sis.charAt(0));
C.HandleChange(f1(s1));
f1(s2).selectedIndex=parseInt(sis.charAt(1));
C.HandleChange(f1(s2));
f1(s3).selectedIndex=parseInt(sis.charAt(2));
C.HandleChange(f1(s3));
}
function window.onbeforeunload()
{
inpSave.value=+f1(s1).selectedIndex+f1(s2).selectedIndex+f1(s3).selectedIndex;
}
</script>
</HTML>
Tags：AttachXMLForSelect XML 自动
编辑录入：coldstar [复制链接] [打 印]
中查找“AttachXMLForSelect: XML自动关联多级SELECT菜单代码和例子”更多相关内容
中查找“AttachXMLForSelect: XML自动关联多级SELECT菜单代码和例子”更多相关内容更多精彩
赞助商链接
