当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 利用xml数据岛实现多级关联下拉选择框的做法

Javascript
常用JS加密编码算法代码
js之完全兼容ie与firefox的拖动层代码[测试好用]
用javascript getComputedStyle获取和设置style的原理
ppk谈JavaScript style属性
JavaScript更改class和id的方法
js数据向上翻滚_数据滚动
javascript弹出一个层并增加一个覆盖层
可浮动QQ在线客服
jabsorb笔记_几个小例子
js快速与任意QQ号码建立临时对话
javascript得到XML某节点的子节点个数的脚本
js验证符合用户体验的网页表单特效
限制复选框的最大可选数的js代码
Javascript调试脚本的经验之谈
用js统计用户下载网页所需时间的脚本
javascript表单域与json数据间的交互
Javascript循环绑定事件的示例代码
表单Form的submit事件不响应的解决方法
JAVASCRIPT下判断IE与FF的比较简单的方式
javascript检查日期格式的函数[比较全]

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 478 ::
收藏到网摘: n/a

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

 

秋水无恨 :)