1.

cities.xml 保存省份和城市

<?xml version="1.0" encoding="GB2312"?>

<china>

	<province name="吉林省">

		<city>长春</city>

		<city>吉林市</city>

		<city>四平</city>

		<city>松原</city>

		<city>通化</city>

	</province>

	<province name="辽宁省">

		<city>沈阳</city>

		<city>大连</city>

		<city>鞍山</city>

		<city>抚顺</city>

		<city>铁岭</city>

	</province>

	<province name="山东省">

		<city>济南</city>

		<city>青岛</city>

		<city>威海</city>

		<city>烟台</city>

		<city>潍坊</city>

	</province>

</china>

city.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>test01.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  </head>

  <body>

     <select id="province" name="province">

       <option value="">请选择....</option>

     </select>

	 <select id="city" name="city">

	 	<option value="">请选择.....</option>

	 </select>

  </body>

  <script language="JavaScript">

  	 window.onload=function(){

		var provinceElement = document.getElementById("province");

		var cityElement = document.getElementById("city");

		var xmlDom = parseXML("cities.xml");

		var xmlProvinceElements = xmlDom.getElementsByTagName("province");

		for(var i=0;i<xmlProvinceElements.length;i++){

			var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");

			var textElement = document.createTextNode(xmlProvinceName);

			var optionElement = document.createElement("option");

			optionElement.appendChild(textElement);

			optionElement.setAttribute("value",xmlProvinceName);

			provinceElement.appendChild(optionElement);

		}

		provinceElement.onchange = function(){

			var optionElements = cityElement.getElementsByTagName("option");

			for(var i=optionElements.length-1;i>0;i--){

				cityElement.removeChild(optionElements[i]);

			}

			var changename = this.value;

			for(var i=0;i<xmlProvinceElements.length;i++){

				var xmlProvinceName = xmlProvinceElements[i].getAttribute("name");

				if(changename==xmlProvinceName){

					var xmlCitiesElements = xmlProvinceElements[i].getElementsByTagName("city");

					for(var j=0;j<xmlCitiesElements.length;j++){

						var xmlCityName = xmlCitiesElements[j].firstChild.nodeValue;

						var textElement = document.createTextNode(xmlCityName);

						var optionElement = document.createElement("option");

						optionElement.appendChild(textElement);

						optionElement.setAttribute("value",xmlCityName);

						cityElement.appendChild(optionElement);

					}

				}

			}

		}

	 }

///////////////////////////////////////////////////////////////////////////////////////////////

	 function parseXML(filename){

		   var xmlDoc;

		   try { //Internet Explorer

				xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

			}

			catch (e) {

				try { //Firefox, Mozilla, Opera, etc.

					xmlDoc = document.implementation.createDocument("", "", null);

				}

				catch (e) {

				}

			}

			//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行。

			xmlDoc.async=false;

			//解析器加载名为 "xxx.xml" 的 XML 文档

			xmlDoc.load(filename);

			return xmlDoc;

    }

  </script>

</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. Oracle的聚合函数group by结合CUBE和ROLLUP的使用

    转自:https://docs.oracle.com/cd/E11882_01/server.112/e25554/aggreg.htm#DWHSG8618 CUBE Syntax CUBE appe ...

  2. 爬虫实战【13】获取自己的动态代理ip池

    在爬取一些比较友好的网站时,仍然有可能因为单位时间内访问次数过多,使服务器认定为机器访问,导致访问失败或者被封.如果我们使用不同的ip来访问网站的话,就可以绕过服务器的重复验证,使服务器以为使不同的人 ...

  3. Python全栈day24-25（面向对象编程）

    参考文档: http://www.cnblogs.com/linhaifeng/articles/6182264.html# 类:把一类事物的相同的特征和动作整合到一起就是类,类是抽象的概练 对象:就 ...

  4. MySQL 索引设计概要

    在关系型数据库中设计索引其实并不是复杂的事情,很多开发者都觉得设计索引能够提升数据库的性能,相关的知识一定非常复杂. 然而这种想法是不正确的,索引其实并不是一个多么高深莫测的东西,只要我们掌握一定的方 ...

  5. 14.wamp自定义网站根目录

    1.首先打开Apache 中的配置文件httpd.conf crtl+f 搜索  documentroot  ,在找到的目录中将目录修改自己的网站的目录,注意\ 与/ 2.在向下移动,找到<Di ...

  6. 《深入理解Linux网络技术内幕》阅读笔记 --- 路由基本概念

    一.路由的基本概念 1.一条路由就是一组参数,这些参数存储了往一个给定目的地转发流量所需的信息,而一条路由所需的最少的参数集合为:(1)目的网络,(2)出口设备,(3)下一跳网关 2.路由中的相关术语 ...

  7. Python知识点复习之__call__

    一个对象实例可以有自己的属性和方法,当我们调用实例方法时,我们用instance.method()来调用.能不能直接在实例本身上调用呢?在Python中,答案是肯定的. 任何类,只需要定义一个__ca ...

  8. 我的Android进阶之旅------>Android编译错误java.util.zip.ZipException: duplicate entry的解决方法

    今天在Android Studio中把另外一个项目引入当前项目,编译的时候出现了java.util.zip.ZipException: duplicate entry错误. 错误如下所示: FAILU ...

  9. 七牛云　如何配置域名的 CNAME

    CNAME 简介 CNAME 即指别名记录,也被称为规范名字.这种记录允你将多个名字映射到同一台计算机. 当需要将域名指向另一个域名,再由另一个域名提供 ip地址,就需要添加 CNAME 记录. 为什 ...

  10. WireShark告诉你ping百度时都发生了什么

    备注:  测试机器为Mac 重点展示本机发出icmp的过程(dns-->arp-->icmp) 本机默认网关 ->route -n get e -n get default rout ...