XML做动态级联菜单

最新推荐文章于 2021-02-12 23:27:17 发布

manmonth2004

最新推荐文章于 2021-02-12 23:27:17 发布

阅读量229

点赞数

分类专栏： html/js/css 文章标签： XML Ajax Flex JSP JavaScript ViewUI

本文链接：https://blog.csdn.net/manmonth2004/article/details/83318453

版权

html/js/css 专栏收录该内容

6 篇文章

订阅专栏

网上又很多文章都讲述了级联菜单的问题，有的用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>