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

Javascript
QQ邮箱的一个文本编辑器代码
Z-Blog中用到的js代码
绝对经典的滑轮新闻显示(javascript+css)实现
用js实现的仿sohu博客更换页面风格(简单版)
仿Vista进程条效果
用Javascript判断图片是否存在,不存在则显示默认图片的代码
用JQuery 实现的自定义对话框
jQuery使用手册之三 CSS操作
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
贴图转换+转贴工具用到的js代码超级推荐
超级简单的图片防盗(HTML),好用
现代 javscript 编程 资料
超级可爱纯js网页时钟
Dojo之路:如何利用Dojo实现Drag and Drop效果
AJAX架构之Dojo篇
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
使用prototype.js 的时候应该特别注意的几个问题.
一个已封装好的漂亮进度条
漂亮的widgets,支持换肤和后期开发新皮肤
用javascript实现的仿Flash广告图片轮换效果

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


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

 

秋水无恨 :)