[html] view
plaincopy

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>menu2level.html</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <script type="text/javascript">
  7. function loadXML(){
  8. var xmlDoc;
  9. try{
  10. //IE
  11. xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  12. }catch(e){
  13. try{
  14. xmlDoc = document.implementation.createDocument("","",null);
  15. }catch(e){
  16. alert(e.message);
  17. return;
  18. }
  19. }
  20. xmlDoc.async=false;
  21. xmlDoc.load("cities.xml");
  22. return xmlDoc;
  23. }
  24. //网页加载完在加载  完成省份加载
  25. onload=function(){
  26. var xmlDocument = loadXML();
  27. var provinceArr =xmlDocument.getElementsByTagName("province");
  28. var proSize = provinceArr.length;
  29. for(var i=0;i<proSize;i++){
  30. //创建option节点
  31. var optionElement = document.createElement("option");
  32. var provinceName = provinceArr[i].getAttribute("name");
  33. //创建文本节点
  34. var textElement =document.createTextNode(provinceName);
  35. optionElement.appendChild(textElement);
  36. optionElement.setAttribute("value", provinceName);
  37. var node = document.getElementById("province");
  38. node.appendChild(optionElement);
  39. }
  40. }
  41. //省份改变事件
  42. function changeProvince(node){
  43. //获取选择的角标
  44. var index = node.selectedIndex;
  45. //获取对应的省份名
  46. var provinceName = node.options[index].value;
  47. loadCities(provinceName);
  48. }
  49. //根据省份编号加载城市信息
  50. function loadCities(proName){
  51. var xmlDocument = loadXML();
  52. var provinceArr =xmlDocument.getElementsByTagName("province");
  53. //获取城市的元素
  54. var citySelectEle = document.getElementById("cities");
  55. var size = citySelectEle.options.length;
  56. for(var i=size;i>0;i--){
  57. citySelectEle.remove(i);
  58. }
  59. //获取省份的个数
  60. var proSize = provinceArr.length;
  61. var proElement;
  62. //获取对应的省份元素
  63. for(var i=0;i<proSize;i++){
  64. if(provinceArr[i].getAttribute("name")==proName){
  65. proElement = provinceArr[i];
  66. break;
  67. }
  68. }
  69. //获取省份的城市信息
  70. var citiesArr = proElement.getElementsByTagName("city");
  71. var len = citiesArr.length;
  72. for(var i=0;i<len;i++){
  73. //创建option节点
  74. var optionElement = document.createElement("option");
  75. //获取城市名
  76. var cityName = citiesArr[i].firstChild.nodeValue;
  77. //创建文本节点
  78. var textElement =document.createTextNode(cityName);
  79. optionElement.appendChild(textElement);
  80. optionElement.setAttribute("value", cityName);
  81. citySelectEle.appendChild(optionElement);
  82. }
  83. }
  84. function getValue(){
  85. var pro = document.getElementById("province").value;
  86. var city = document.getElementById("cities").value;
  87. alert(pro+":"+city);
  88. }
  89. </script>
  90. </head>
  91. <body>
  92. <select id="province" onchange="changeProvince(this)">
  93. <option value="" selected="selected">--省份--</option>
  94. </select>
  95. <select id="cities">
  96. <option value="" selected="selected">--城市--</option>
  97. </select>
  98. <input type="button" value="弹出" onclick="getValue()"/>
  99. </body>
  100. </html>

使用javascript中读取Xml文件做成的一个二级联动菜单的更多相关文章

  1. C#中读取xml文件指定节点

    目录(?)[-] XmlDocumentSelectSingleNode方法的使用 XmlDocumentSelectNodes方法的使用 通过节点属性查找指定节点   参考:Select XML N ...

  2. .net中读取xml文件中节点的所有属性信息

    功能描述: 将数据以xml的格式记录成配置文件,需要获取配置文件中的数据时,则获取对应的配置文件,读取配置文件里对应节点的所有属性. 逻辑实现: 1.将数据配置好在xml文件中. 2.获取xml文件中 ...

  3. Silverlight 中 读取XML文件

    一:xml文件 二:后台代码 private void ReadXml() { List<TreeViewItem> nodes = new List<TreeViewItem> ...

  4. javascript 实现 对XML文件 2级/3级联动操作

    js代码 //实现对xml文档的读取:function loadXMLDoc(dname) { try // Internet Explorer { xmlDoc = new ActiveXObjec ...

  5. JavaScript 解析读取XML文档 实例代码(转)

    JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readx ...

  6. js 读取xml文件

    读取xml文件 [原创 2007-6-20 17:35:37]     字号:大 中 小 js中读取xml文件,简单的例子: <html><head><script> ...

  7. IE下JS读取xml文件示例代码

    JS读取xml文件具体步骤为:创建DOM对象.加载xml文件(仅适用于IE)附示例代码,感兴趣的朋友可以参考下,希望对大家有所帮助使用javascript脚本读取xml文件,这里暂只考虑IE浏览器st ...

  8. C#中常用的几种读取XML文件的方法

    1.C#中常用的几种读取XML文件的方法:http://blog.csdn.net/tiemufeng1122/article/details/6723764/

  9. 在C#中创建和读取XML文件

    1.创建简单的XML文件 为了便于测试,我们首先创建控制台应用程序,项目命名为CreateXml,Program.cs代码如下: 这样会在C盘根目录下创建data2.xml文件,文件内容为 using ...

随机推荐

  1. android获取设备唯一标示

    概述 有时需要对用户设备进行标识,所以希望能够得到一个稳定可靠并且唯一的识别码.虽然Android系统中提供了这样设备识别码,但是由于Android系统版本.厂商定制系统中的Bug等限制,稳定性和唯一 ...

  2. 带吸附效果的ViewPager（一）

    什么叫吸附效果?先看一个示例更为直观,借用网上的一个效果图: 类似这种效果的app很多,网上的实现方法也是很多,但各种重写各种监听又令人不胜其烦,今日突发奇想,顺着自己的思路实现了类似的效果,不敢独享 ...

  3. Unable to instantiate Action, MenuAction, defined for 'QueryMenuAll' in namespace '/'MenuAction

    我刚好也遇到这样的情况,发现是自己的配置文件里写错了,spring里的id属性值要对应struts里class属性值.

  4. C++对C的函数拓展 - 占位参数

    函数占位参数 占位参数只有参数类型声明,而没有参数名声明 一般情况下,在函数体内部无法使用占位参数 demo #include <iostream> using namespace std ...

  5. （七十四）iOS8之前使socket可以后台运行的方法

    对于使用socket通信的应用程序,常常希望App位于后台时仍然可以进行网络通信,这在iOS8和以后的版本是被默认允许的,socket可以直接在后台运行,而对于iOS8之前的版本就不行,需要进行两步设 ...

  6. OC语言编写：为视图添加丝滑的水波纹

    先看一下最终效果图: 首先我们可以把如此丝滑的水波纹拆分一下下: 一条规律的曲线. 曲线匀速向右移动. 曲线下方的位置用颜色填充. 于是先来一条曲线吧. 对于需要产生波动如此规律的曲线,我们首先想到的 ...

  7. 关于Java的移位运算符

    /** * 测试移位运算符<br/> * "<<" 左移 : 右侧补0<br/> * ">>" 带符号右移 : ...

  8. UNIX环境高级编程——system函数

    system函数 功能:调用fork产生子进程,由子进程来调用:/bin/sh -c command来执行参数command所代表的命令,阻塞当前进程直到command命 令执行完毕. int sys ...

  9. EBS Form个性化的工作原理

    Form的个性化是EBS的比较好用的一个东西.好像很少人研究它的工作原理,都是直接用.最近有个同事问我问题,说他在个性化编写的代码无效果.解决之后,才发现,原来传说中的EBS的Form的个性化是这样子 ...

  10. SQL备份所有数据库脚本

    技巧要点:使用游标循环读取所有数据库名,然后定义存放路径,最后备份所有数据库到指定存在的本地文件夹中 脚本如下: declare @fileName varchar(255) --定义备份文件名变量d ...