网上又很多文章都讲述了级联菜单的问题，有的用ajax+jsp,其实我也做过用ajax+jsp的级联菜单，但是若后台数据很小，又不经常变动，那么你可以用xml文件来做数据源，用javascript解析xml文件,得到里面的数据，这样就不用和后台交互了，既方便又不用浪费服务器资源，其实这也是我的初衷，哈哈，看一下代码吧。
school.xml文件代码：
<?xml version="1.0" encoding="UTF-8"?>
<university>
<college label="信息学院">
<department label="计算机"/>
<department label="测绘"/>
<department label="信息"/>
<department label="电子"/>
</college>
<college label="机电学院">
<department label="系一"/>
<department label="系二"/>
<department label="系三"/>
<department label="系四"/>
</college>
</university>注意，建立此文件时，不要右击新建文本文档，因为这样建的文件编码格式不对，一定要按照：开始-->所有程序-->附件-->记事本，粘上上述代码后保存文件时要注意选择编码为：UTF-8。
index.html文件代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>js调用xml实现级联菜单</title>
<script type="text/javascript">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("school.xml");
init = function(){
var collegeNode = xmlDoc.getElementsByTagName("college");
var collegeAttributesValue;
var college_select = document.getElementById("collegeselect");
for(var i = 0;i<collegeNode.length;i++){
collegeAttributesValue = collegeNode(i).attributes.getNamedItem("label").value;
var option = new Option(collegeAttributesValue,collegeAttributesValue);
college_select.add(option);
}
}
collegechange = function(){
var j = document.getElementById("collegeselect").selectedIndex;
var collegeNode = xmlDoc.getElementsByTagName("college");
var departmentNode = collegeNode(j).childNodes;
var departmentAttributesValue;
var department_select = document.getElementById("departmentselect");
department_select.length = 0;
for(var i = 0;i<departmentNode.length;i++){
departmentAttributesValue = departmentNode(i).attributes.getNamedItem("label").value;
var option = new Option(departmentAttributesValue,departmentAttributesValue);
department_select.add(option);
}
}
</script>
</head>
<body onload="init()">
<select name="collegeselect" onChange="collegechange()"></select>
<select name="departmentselect"></select>
</body>
</html>好了，大共告成！
你或与会问我为什么xml文件要建成那样呢！如果你玩过flex就知道了，在那里面又一个Tree的东西，Tree识别这种xml文件最好，我已经养成习惯了。等我又空了，我一定会更新一个更好的xml级联菜单，到那时，就不用attribute来获取数据了。到时代码或许会更简练。
分享到：
相关推荐
尽管Flash在现代网页设计中的使用已经减少，因为HTML5和CSS3提供了更轻量级、跨平台的解决方案，但Flash+XML级联菜单仍然是一个经典的示例，展示了如何将动态视觉效果与数据驱动的交互性相结合。对于那些仍然使用...
xml实现级联菜单，很简单，完全不需要Ajax，但实现了Ajax的效果
在本案例中，我们讨论的是使用JavaScript和HTML技术实现的级联菜单，且该菜单能够与数据库进行交互，动态地从数据库中读取内容。这种功能可以提升用户体验，使用户能够快速浏览和选择多层分类的信息。 首先，我们要...
在这个级联菜单中，AJAX将用来动态获取下级菜单的数据，使得用户体验更加流畅，无需等待页面刷新。 JavaScript是实现异步级联菜单的主要编程语言，负责处理用户交互、DOM（文档对象模型）操作以及AJAX请求的发送和...
AJAX（Asynchronous JavaScript and XML）技术可以有效地实现级联菜单的动态加载和交互，无需刷新整个页面即可获取并显示数据。 **AJAX** 是一种在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页的...
可以使用CSS来美化级联菜单，或者利用jQuery库简化DOM操作和添加动态效果。 8. **跨域问题**： 如果Ajax请求的URL不在当前页面的同源策略范围内，会遇到跨域问题。可以通过JSONP、CORS等技术解决这个问题。 9. **...
在本例中，"XML+C#"的组合用于实现这一功能，其中XML文件存储了地区和邮编的数据，C#代码则负责解析这些数据并动态生成级联菜单。 XML（Extensible Markup Language）是一种标记语言，用于存储结构化数据。在城市...
总结起来，使用JavaScript和XML实现级联菜单是一种常见的技术组合，它结合了JavaScript的动态性和XML的数据结构优势，提供了用户友好的交互体验。通过学习和实践，开发者可以掌握这一技能，提升网页的交互性和功能性...
这个实例中的“级联菜单”是AJAX应用的一个常见场景，常用于下拉选择框，其中一个选项的选择会动态地影响另一个选项的显示内容。 在AJAX级联菜单中，用户通常会选择一个主类别，然后基于这个选择，相关的子类别会...
在这个特定的案例中，我们讨论的是用JavaScript动态创建这样的级联菜单。动态创建意味着菜单可以在页面加载后或者根据用户的某些操作实时生成。 首先，我们要理解JavaScript的基础知识。JavaScript是一种轻量级的...
在JavaScript中，实现级联菜单通常涉及到DOM操作、事件监听以及动态改变元素的样式。以下是一些关键知识点： 1. DOM（Document Object Model）：DOM是HTML和XML文档的一种标准表示，它允许编程语言或脚本语言访问和...
在Web开发中，创建动态交互的用户界面是一个重要的任务，特别是在大型系统中，为了提供更好的用户体验，级联菜单（Cascading Menu）被广泛应用。在这个案例中，我们探讨如何运用AJAX、JSP和Servlet技术来实现一个三...
"三级行业动态无刷新级联菜单"是一个旨在解决传统网页刷新问题，提供高效用户体验的解决方案。这种技术常用于构建如省市级联菜单，让用户在选择时无需等待页面刷新，提高网站交互性和效率。 无刷新，即Ajax...
这个"Android 级联菜单，两级菜单自定义实现提供多种方式PopWindow，Fragment引用"的项目，就是一个很好的示例，展示了如何在Android应用中实现一个功能完备、灵活多样的级联菜单。下面将详细介绍该项目中的关键知识...
XML城市级联菜单是一种在网页或应用程序中常见交互设计，用于展示层次结构的数据，如国家-省份-城市的三级菜单。这种菜单通常与后台数据库相结合，通过XML数据文件存储菜单结构，便于动态加载和更新。本实例是基于C#...
在JavaScript和CSS的配合下，我们可以创建动态且响应式的级联菜单，提高用户体验。JavaScript负责处理用户的交互，如鼠标悬停、点击事件，而CSS则用于样式设置，实现菜单的布局和动画效果。 JavaScript是Web开发中...
在城市级联菜单中，Ajax的作用是动态获取和更新数据。当用户在一级菜单（省份）中选择一个选项时，通过Ajax向服务器发送请求，服务器则根据请求返回相应的二级菜单（城市）数据。同样，当用户在二级菜单中做出选择时...
在Web开发中，树形级联菜单是一种常见的用户界面元素，尤其在数据层次结构复杂的系统中，如组织架构、文件目录或数据库表关系的展示。本项目实现了将这种菜单与Oracle数据库连接，利用Ajax和Servlet技术，实现了动态...
本示例中的".net MVC架构下无刷新三级级联菜单源码"是一个典型的前端与后端交互场景，它展示了如何利用ASP.NET MVC框架以及DropdownList控件来实现一个动态的、无需页面刷新的三级级联菜单。这个菜单的数据是从...