相信不少同学都接触过这样的问题，对于一个多条件的查询，我们希望在选择了一个菜单项后，另外一个下拉菜单能够根据我们所选择的第一个菜单项显示其所有子菜单项。这就是本文提到的级联菜单问题。级联菜单实现的方法有很多，本文根据笔者所做的一个小实验，简单的介绍一下如何通过XML来实现级联菜单的功能。首先要定义一个XML文件，用以存放级联菜单的信息，我们命名为query.xml，其代码如下：

软件工程
1

数据结构
2

操作系统
3

计算机组成原理
4

张老师
1

李老师
2

刘老师
3

王老师
4

一班
1

二班
2

三班
3

四班
4然后再创建一个HTML文件，命名为query.html在query.html里，首先创建一个表单
default
课程
教师
班级    
default从上面的代码可以看出，当我们选择第一级菜单时，会触发showDetail方法，这是通过JavaScript来实现的，因此我们还需要定义一个showDetail方法，其实现代码如下：function showDetail(){var document_xml = new ActiveXObject("Microsoft.XMLDOM");document_xml.load("query.xml"); //加载info.xmlvar RootNode = document_xml.documentElement; //获得info.xml文档的根节点var keyword = document.getElementById("keyword").value;var details; //用以存放二级菜单内容，是一个数组对象var content = document.getElementById("content");content.options.length = 0;//先清空if(keyword=="default"){ var option = new Option("default","default"); content.add(option);}else{ if(keyword=="1"){ details = document_xml.getElementsByTagName("course"); }else if(keyword=="2"){ details = document_xml.getElementsByTagName("teacher"); }else if(keyword=="3"){ details = document_xml.getElementsByTagName("class"); } for(var i=0;i
之间，记得要写上
和了，然后你直接打开query.xml就可以看到效果了。

顶