敬业的IT人 >> 网站建设 >> Web编程 >> JavaScript >> 利用xml数据岛实现多级关联下拉选择框的做法

利用xml数据岛实现多级关联下拉选择框的做法

敬业的IT人 互联网 佚名 2008-1-10 17:11:11

<select name=year></select>
<select name=month></select>
<select name=date></select>
<select name=clock></select>
<input name=result>

<script>
var arrSel=[year,month,date,clock];//arrSel定义了要修改的下拉框和xml数据的节点名称
</script>

<xml id=xmldata>
 <xmldata>
  <year value=2000>
   <month value=4>
    <date value=14>
     <clock value=一点 />
     <clock value=三点 />
    </date>
    <date value=17>
     <clock value=一点 />
    </date>
   </month>
   <month value=5>
    <date value=15>
     <clock value=一点 />
     <clock value=四点 />
     <clock value=七点 />
    </date>
   </month>
  </year>
  <year value=2001>
   <month value=7>
    <date value=16>
     <clock value=一点 />
     <clock value=五点 />
     <clock value=九点 />
    </date>
   </month>
  </year>
 </xmldata>
</xml>

<script>
function qswhXml(num){
/******* by qiushuiwuhen(2002-5-17) ********/
 var i,j,arrTemp=[];
 for(i=0;i<num;i++)arrTemp[i]=document.all(arrSel[i]).options[document.all(arrSel[i]).selectedIndex].text
 if(num==arrSel.length){//这里处理最后的数据。
  document.all(result).value=选中了(+arrTemp+);return;
 }
 with(document.all(arrSel[num])){
  length=0
  var obj=document.all.xmldata.XMLDocument.childNodes[0];
  for(i=0;i<num;i++)obj=obj.selectSingleNode(arrSel[i]+[@value=+arrTemp[i]+]);
  for(i=0;i<obj.childNodes.length;i++)options[length++].text=obj.childNodes[i].getAttribute(value);
  onchange=new Function(qswhXml(+(num+1)+));
  onchange();
 }
}
qswhXml(0);
</script>

 

秋水无恨 :)

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