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

Javascript
仿51JOB的地区选择效果(可选择多个地区)
Javascript打印网页部分内容的脚本
Ext面向对象开发实践(续)
js的闭包的一个示例说明
javascript 字符串连接的性能问题(多浏览器)
JavaScript脚本性能优化注意事项
js电信网通双线自动选择技巧
js DIV滚动条随机位置的设置技巧
Javascript日期对象的dateAdd与dateDiff方法
小试JavaScript多线程
jquery $.ajax入门应用一
JS 俄罗斯方块完美注释版代码
JavaScript在IE中“意外地调用了方法或属性访问”
设置下载不需要倒计时cookie(倒计时代码)
拖拉表格的JS函数
js刷新框架子页面的七种方法代码
FireFox与IE 下js兼容触发click事件的代码
js利用div背景,做一个竖线的效果。
javascript 贪吃蛇实现代码
JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 471 ::
收藏到网摘: 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>

 

秋水无恨 :)