敬业的IT人 >> 网站建设 >> Web编程 >> JavaScript >> AttachXMLForSelect: XML自动关联多级SELECT菜单代码和例子

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

敬业的IT人 互联网 佚名 2008-1-10 16:35:32

<HTML>
<META NAME=save CONTENT=history/>

<script>

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

function AttachXMLForSelect(xd,arr,defaultText,defaultValue)//xd:xmldom,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(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>

<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=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>
</HTML>

粤ICP备06119539号
Copyright CiscoSky.Org,Some Rights Reserved.
Email：me1228#tom.com