js 解析xml文件实现省市级联下拉菜单
写一个省市的XML文档
city.xml
<!--EndFragment-->
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<province name="北京">
<city>大兴</city>
<city>海淀</city>
<city>沙河</city>
<city>朝阳</city>
<city>昌平</city>
<city>西单</city>
<city>中关村</city>
</province>
<province name="河北">
<city>石家庄</city>
<city>保定</city>
<city>承德</city>
<city>邢台</city>
<city>邯郸</city>
<city>廊坊</city>
<city>唐山</city>
</province>
<province name="陕西">
<city>西安</city>
<city>咸阳</city>
<city>铜川</city>
<city>渭南</city>
<city>汉中</city>
<city>商洛</city>
<city>延安</city>
</province>
</cities>
city.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>city.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<h1>
解析xml文件实现省市级联下拉单
</h1>
<div>
<span> <select id="province" name="province">
<option>
请选择省
</option>
</select> </span>
<span> <select id="cities" name="city">
<option>请选择相应省下面的市
</option>
</select> </span>
<span> <select id="counties" name="county">
<option>请选择相应市下面的县
</option>
</select> </span>
</div>
</body>
</html>
javascript
<script>
window.onload = function() {
var xmlDom;
try {
//针对的是IE浏览器 创建一个空的微软
XML 文档对象
xmlDom = new ActiveXObject
("Microsoft.XMLDOM");
} catch (err) {
try {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
} catch (e) {
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async = "false";
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDom.load("city.xml");
//获取xml文件的根节点
var root = xmlDom.documentElement;
//获取根节点下面的省节点
var provinces = root.childNodes;
var province = document.getElementById("province");
for ( var i = 0; i < provinces.length; i++)
{
//获取省节点的name属性的值
var name = provinces[i].getAttribute("name");
//创建一个option
var opt = document.createElement("option");
//为option添加文本
opt.appendChild(document.createTextNode(name));
//添加到父节点中
province.appendChild(opt);
}
var cities = document.getElementById("cities");
province.onchange = function() {
var pce = document.getElementById("province");
var opts = pce.options;
var opt1 = opts[pce.selectedIndex];
var name = opt1.innerHTML;
for ( var i = 0; i <
provinces.length; i++) {
//获取省节点的name属性的值
var name1 = provinces
[i].getAttribute("name");
if (name == name1) {
cities.length=1;//每次改变的时候清空
var pros = provinces[i];
var citys = pros.childNodes;
for ( var j = 0; j < citys.length; j++) {
//创建一个option
var opt1 = document.createElement("option");
//为option添加文本
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
//添加到父节点中
cities.appendChild(opt1);
}
}
}
}
}
</script>
**存在的问题是 ，只能在IE浏览器中打开，望哪位高手解决兼容性！
<!--EndFragment-->
分享到：
相关推荐
最后，JavaScript会更新市的下拉菜单，展示相应的选项。 为了使这个系统正常工作，还需要考虑一些关键点，比如错误处理、数据缓存和性能优化。错误处理确保在数据加载失败或用户选择非法值时，能够给出适当的反馈。...
2. **JavaScript处理XML**：在前端，使用JavaScript来解析XML文件并动态地生成下拉菜单。DOM（Document Object Model）接口允许我们查找、遍历和修改XML文档。例如，我们可能使用`XMLHttpRequest`对象加载XML文件，...
客户端的JavaScript代码接收到响应后，解析JSON或XML数据，根据数据更新市级下拉菜单的选项。这种级联效果使得用户在选择省份后，市一级的选项能立即更新，无需等待整个页面刷新。 对于数据库设计，通常会有一个...
由于XML与JS的良好兼容性，我们可以利用JS来读取XML文件，实现动态的数据操作，例如创建省市级联的下拉菜单。下面将详细解释这一过程中的关键知识点。 1. **XML基本概念**： - XML是一种用于标记数据的语言，其...
这个标题"省市级联Ajax"表明我们正在讨论如何利用Ajax技术来实现省级、市级和县级之间的联动下拉菜单。Ajax，全称Asynchronous JavaScript and XML，是一种在不重新加载整个网页的情况下更新部分网页内容的技术，...
通过解析XML文件，我们可以获取这些数据并用于填充前端的下拉菜单。 JavaScript是实现这种联动效果的关键技术。文件中提供的JavaScript脚本很可能是用来处理XML数据、动态更新下拉菜单以及处理用户选择事件的。...
- **JavaScript**：实现动态交互，如省级选择后自动更新市级下拉菜单，以及获取和展示天气数据。 - **AJAX**：异步JavaScript和XML，用于在不刷新整个页面的情况下，向服务器请求并更新市级天气数据。 - **jQuery...
在IT行业中，Ajax（异步JavaScript和XML）与JSON（JavaScript Object Notation）结合使用时，可以实现丰富的前端交互功能，比如省市级联选择效果、用户唯一性检测以及图片点击事件处理。以下将详细讲解这些知识点。 ...
这个功能利用JavaScript（JS）和Extensible Markup Language（XML）来实现省级、市级和县级的下拉菜单联动效果。当用户在一级菜单（省）中选择一个选项时，二级菜单（市）会根据所选省份动态加载对应的城市数据，...
【标题】"省市级联动(Ajax+Struts2+SQLServer2008)"是一个典型的Web应用程序开发案例，主要用于实现用户在选择省份时，下拉菜单动态加载对应的城市列表。这个系统利用了Ajax技术进行异步数据交互，Struts2框架进行...
这个项目利用JavaScript来实现在网页上创建一个联动的省市下拉菜单，用户在选择省份后，城市下拉菜单会自动填充与该省份相关的城市数据。 JavaScript是一种轻量级的脚本语言，广泛应用于网页的客户端交互。在这个...
在IT行业中，级联（Cascading）是一种常见的前端交互设计模式，特别是在处理地理区域选择时，如省、市、区等多级下拉菜单。本文将深入探讨标题中的"省级市级联Demo及数据库"，并结合描述中的两种技术实现方案——ASP...
本案例中提到的"省市三级联动（XML）"是一个基于XML（eXtensible Markup Language）的数据结构，用于存储和处理省级、市级和区县级的地理信息，以便在网页应用中创建动态的、交互式的下拉菜单。XML是一种标记语言，...
”意味着可能有三个独立的XML文件分别对应省级、市级和县级数据，或者一个XML文件中包含这三个级别的数据，通过编程的方式实现数据的联动查询。在Web开发中，这种联动查询常见于下拉菜单选择，用户选择一个省份后，...
在实现省市级联功能时，通常会涉及到多级下拉菜单的联动效果。在Spring MVC中，可以创建一个控制器方法，该方法根据父级（例如省份）的ID返回子级（例如城市）的数据。DWR可以在这个过程中发挥作用，前端JavaScript...
在网页开发中，JavaScript（简称JS）和Ajax（异步JavaScript和XML）是两种非常重要的技术，用于创建动态和交互性的用户体验。在这个“js和ajax实现三级联动.zip”压缩包中，包含了一个实现三级联动（省市区选择）的...
三级联动的效果意味着用户首先选择省份，然后在二级下拉菜单中看到与所选省份对应的城市，最后在三级菜单中选择具体的区县。这种设计减少了用户输入，提高了数据准确性，同时减轻了服务器负担。 项目的描述中提到，...
描述中提到“省市级联有全部的省和市”，这意味着这个压缩包文件包含了中国所有省份和下属城市的完整数据，这些数据可能是以某种格式（如JSON、CSV或XML）存储，以便于开发者进行二次开发。这种数据结构在各种Web...
在网页上，三级联动指的是三个下拉菜单（通常是省、市、县/区）之间通过JavaScript进行联动，当用户在一个下拉菜单中选择一个选项时，其他两个下拉菜单会自动更新其选项，展示与当前选中项相关联的数据。这种设计...
然后，通过解析XML文档，获取到各个级别的数据，如`<province>`、`<city>`和`<county>`元素，分别对应省、市、县。这些数据可以被存储在JavaScript对象中，以便后续使用。 当用户在界面中选择一个省份时，应用程序...