`
toyota2006
  • 浏览: 545322 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

XML做动态级联菜单

XMLAjaxFlexJSPJavaScript 
阅读更多
网上又很多文章都讲述了级联菜单的问题，有的用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来获取数据了。到时代码或许会更简练。
分享到：
| 输入框input高级限制
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics