关联菜单.三级

来源：互联网发布：new balance淘宝官方店编辑：程序博客网时间：2024/04/29 05:16

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>关联菜单</title>

/*
使用说明：
1. 不要更改代码的位置,只须更改 <xml></xml> 和 <form><form/> 标记中的 text、value 值即可。
2.其他的网页设计内容，就添加到 <form><form/> 中。
3.script AlertForm 是弹出窗口，为了直观验证关联菜单的正确性用的，可以去掉。
4.具体使用时，去掉不必要的注释。
5.本例子来源于互联网

2005.02.17

//检查参数
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.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>
<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>

</head>
<body>
<FORM id=f1 onsubmit=AlertForm(this)>
<SELECT style="WIDTH: 100px" name=s1>
    <OPTION value=value1 selected>text1</OPTION>
    <OPTION value=value2>text2</OPTION>
</SELECT>
<SELECT style="WIDTH: 100px" name=s2>
    <OPTION value=value11 selected>text11</OPTION>
    <OPTION value=value12>text12</OPTION>
    <OPTION value=value13>text13</OPTION>
    <OPTION value=value14>text14</OPTION>
</SELECT>
<SELECT style="WIDTH: 100px" name=s3>
    <OPTION value=value111 selected>text111</OPTION>
    <OPTION value=value112>text112</OPTION>
    <OPTION value=value113>text113</OPTION>
    <OPTION value=value114>text114</OPTION>
</SELECT>
<INPUT type=submit value=提交查询内容>
</FORM>
<INPUT id=inpSave style="BEHAVIOR: url(#default#savehistory)" type=hidden value=000>

<SCRIPT>
var C=AttachXMLForSelect(oxml.XMLDocument,[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>

</body>
</html>