当前页面: 开发资料首页 → Javascript 专题 → AttachXMLForSelect:XML自动关联多级SELECT菜单代码和例子

AttachXMLForSelect:XML自动关联多级SELECT菜单代码和例子

摘要: AttachXMLForSelect:XML自动关联多级SELECT菜单代码和例子

http://www.csdn.net/Expert/TopicView1.asp?id=933535

/*
关联XML到1个到N个的Select
没有做历史记录
*/

//检查参数
if(xd==null||xd.documentElement==null||arr==null||arr.length==0)
throw(new Error(-1,"invalid arguments"));

//转换成内部的xd
(function(xmldom){
xd=new ActiveXObject("Microsoft.XMLDOM");
xd.loadXML(xmldom.xml);
})(xd)

//把Select释放掉,换成uniqueID来储存
for(var i=0;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 {
if(s.uniqueID==arr[index].uniqueID)
break;
}
//如果不是最后一个Select
if(index {
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 {
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>

<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>

//下面的代码是储存状态的。
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>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: web进度条
后一篇: JScript下Singleton模式的实现。