网上又很多文章都讲述了级联菜单的问题，有的用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来获取数据了。到时代码或许会更简练。
相关资源：js实现xml级联
