1.

cities.xml 保存省份和城市

  1. <?xml version="1.0" encoding="GB2312"?>
  2. <china>
  3. 	<province name="吉林省">
  4. 		<city>长春</city>
  5. 		<city>吉林市</city>
  6. 		<city>四平</city>
  7. 		<city>松原</city>
  8. 		<city>通化</city>
  9. 	</province>
  10. 	<province name="辽宁省">
  11. 		<city>沈阳</city>
  12. 		<city>大连</city>
  13. 		<city>鞍山</city>
  14. 		<city>抚顺</city>
  15. 		<city>铁岭</city>
  16. 	</province>
  17. 	<province name="山东省">
  18. 		<city>济南</city>
  19. 		<city>青岛</city>
  20. 		<city>威海</city>
  21. 		<city>烟台</city>
  22. 		<city>潍坊</city>
  23. 	</province>
  24. </china>

city.html

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>test01.html</title>
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.   </head>
  7.   <body>
  8.      <select id="province" name="province">
  9.        <option value="">请选择....</option>
  10.      </select>
  11. 	 <select id="city" name="city">
  12. 	 	<option value="">请选择.....</option>
  13. 	 </select>
  14.   </body>
  15.   <script language="JavaScript">
  16.   	 window.onload=function(){
  17. 		var provinceElement = document.getElementById("province");
  18. 		var cityElement = document.getElementById("city");
  19. 		var xmlDom = parseXML("cities.xml");
  20. 		var xmlProvinceElements = xmlDom.getElementsByTagName("province");
  21. 		for(var i=0;i<xmlProvinceElements.length;i++){
  22. 			var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
  23. 			var textElement = document.createTextNode(xmlProvinceName);
  24. 			var optionElement = document.createElement("option");
  25. 			optionElement.appendChild(textElement);
  26. 			optionElement.setAttribute("value",xmlProvinceName);
  27. 			provinceElement.appendChild(optionElement);
  28. 		}
  29.  
  30. 		provinceElement.onchange = function(){
  31. 			var optionElements = cityElement.getElementsByTagName("option");
  32. 			for(var i=optionElements.length-1;i>0;i--){
  33. 				cityElement.removeChild(optionElements[i]);
  34. 			}
  35. 			var changename = this.value;
  36. 			for(var i=0;i<xmlProvinceElements.length;i++){
  37. 				var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");
  38. 				if(changename==xmlProvinceName){
  39. 					var xmlCitiesElements = xmlProvinceElements[i].getElementsByTagName("city");
  40. 					for(var j=0;j<xmlCitiesElements.length;j++){
  41. 						var xmlCityName = xmlCitiesElements[j].firstChild.nodeValue;
  42. 						var textElement = document.createTextNode(xmlCityName);
  43. 						var optionElement = document.createElement("option");
  44. 						optionElement.appendChild(textElement);
  45. 						optionElement.setAttribute("value",xmlCityName);
  46. 						cityElement.appendChild(optionElement);
  47. 					}
  48. 				}
  49. 			}
  50. 		}
  51.  
  52. 	 }
  53.  
  54. ///////////////////////////////////////////////////////////////////////////////////////////////
  55. 	 function parseXML(filename){
  56. 		   var xmlDoc;
  57. 		   try { //Internet Explorer
  58. 				xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  59. 			}
  60. 			catch (e) {
  61. 				try { //Firefox, Mozilla, Opera, etc.
  62. 					xmlDoc = document.implementation.createDocument("", "", null);
  63. 				}
  64. 				catch (e) {
  65. 				}
  66. 			}
  67. 			//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。
  68. 			xmlDoc.async=false;
  69. 			//解析器加载名为 "xxx.xml" 的 XML 文档
  70. 			xmlDoc.load(filename);
  71. 			return xmlDoc;
  72.     }
  73.   </script>
  74. </html>

Javascript -- 级联菜单, javascript解析xml文件的更多相关文章

  1. XML：使用DOM技术解析xML文件中的城市，实现select级联选择

    中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

  2. JQuery -- Jquery 中的Ajax, Jquery解析xml文件

    1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...

  3. JS解析XML文件和XML字符串

    JS解析XML文件 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判断浏览 ...

  4. Php 解析XML文件

    Php 解析XML文件 Php 解析XML文件,仅供学习參考!演示样例代码例如以下: <?php header("Content-type: text/html; charset=ut ...

  5. Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  6. 深入浅出如何解析xml文件---下篇

    在上篇博文中,小编主要介绍xml的两种解析方式,分别是dom4j和dom,今天这篇博文,小编主要来简单介绍一下xml的其她两种解析方式sax和jdom.  sax解析xml文件 sax,全称是Simp ...

  7. jQuery ajax解析xml文件demo

    解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...

  8. Android程序解析XML文件的方法及使用PULL解析XML案例

    一.一般解析XML文件的方法有SAX和DOM.PULL (1)DOM(JAXP Crimson解析器) DOM是用与平台和语言无关的方式表示XML文档的官方W3C标准.DOM是以层次结构组织的节点或信 ...

  9. Android 解析XML文件和生成XML文件

    解析XML文件 public static void initXML(Context context) { //can't create in /data/media/0 because permis ...

随机推荐

  1. 火狐 a 标签 download 属性，要在 a 标签添加到页面中才生效；

    在 chrome 中,如果需要设置点击下载文件,需要创建一个 a 标签,指定 download 属性和 href 属性即可, var aLink = document.createElement('a ...

  2. Thrift初试

    Restful 基于 Http 进行通讯. 开放.标准.简单.兼容性升级容易: 性能略低.在 QPS 高或者对响应时间要求苛刻的服务上,可以用 RPC,RPC采用二进制传输.TCP 通讯,所以通常性能 ...

  3. CodeForeces 665C Simple Strings

    C. Simple Strings time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  4. 对opencv.hpp头文件的认识

    OpenCV学习笔记(二):对opencv.hpp头文件的认识 - 安东的技术博客 - CSDN博客 https://blog.csdn.net/xidiancoder/article/details ...

  5. IDEA 录制宏+设置快捷键 实现写时编译

    参考: IDEA 录制宏+设置快捷键 实现写时编译:https://blog.csdn.net/wangjie919/article/details/79487981 IDEA 设置运行时不编译项目: ...

  6. django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TABLESPACE的解决办法(转)

    在python的开发中,遇到了这个错误: django.core.exceptions.ImproperlyConfigured: Requested setting DEFAULT_INDEX_TA ...

  7. Andrew Ng机器学习总结（自用）

    监督学习: 线性回归,逻辑回归,神经网络,支持向量机. 非监督学习: K-means,PCA,异常检测 应用: 推荐系统,大规模机器学习 机器学习系统优化: 偏差/方差,正则化,下一步要进行的工作:评 ...

  8. Tomcat的session

    创建session 在具体说明session的创建过程之前,先看一下BS访问模型:  browser发送Http request: tomcat内核Http11Processor会从HTTP requ ...

  9. SQL2000查看表的大小

    SQL2000查看表的大小 标签: sqlsql server数据库报表tableinsert 2011-06-08 11:47 4013人阅读 评论(0) 收藏 举报 SQL2000查看表的大小 本 ...

  10. boost atomic

    文档: http://www.boost.org/doc/libs/1_53_0/doc/html/atomic.html Presenting Boost.Atomic Boost.Atomic i ...