JavaScript在Web中深受程序员的青睐，不仅因为它可以制作很多绚丽的HTML页面特效，而且JavaScript结合HTML DOM在解析HTML、XML等文件方面更是强悍！在某些情况下，我们甚至可以完全撇开数据库，而使用XML文档作为数据存储介质开发一个网站，这样即快速又省事。
以下是我写的一个使用JS解析XML文件并实现两级下拉菜单的选择的案例。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>xmlDom.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">
<script type="text/javascript">
<!--
window.onload = function() {
var xmlDom;
try {
//创建一个空的微软XML文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
} catch (err1) {
try {
//创建一个空的其他浏览器厂商XML文档对象
xmlDom = document.implementation.createDocument("", "", null);
} catch (err2) {
alert(err2.message);
}
}
//关闭异步加载
xmlDom.async = false;
//加载xml文件
xmlDom.load("city.xml");
//获取XML文件的根节点
var root = xmlDom.documentElement;
//获取XML文件根节点的所有子节点
var x_province = root.childNodes;
var s_province = document.getElementById("province");
for ( var i = 0; i < x_province.length; i++) {
//获取属性值
var x_pname = x_province[i].getAttribute("name");
//创建option对象
var option = document.createElement("option");
option.appendChild(document.createTextNode(x_pname));
s_province.appendChild(option);
}
var s_city = document.getElementById("city");
s_province.onchange = function() {
var opts = s_province.options;
//获取下拉菜单中被选中项的下标(索引值)
var opt = opts[s_province.selectedIndex];
//获取option中的文本内容
var s_pname = opt.innerHTML;
for ( var j = 0; j < x_province.length; j++) {
var x_pname = x_province[j].getAttribute("name");
if (s_pname == x_pname) {
s_city.length = 1;
var x_pe = x_province[j];
var x_city = x_pe.childNodes;
for ( var k = 0; k < x_city.length; k++) {
var ot = document.createElement("option");
ot.appendChild(document
.createTextNode(x_city[k].firstChild.nodeValue));
s_city.appendChild(ot);
}
}
}
}
}
-->
</script>
</head>
<body>
<h2>
JS解析XML文件实现两级下拉菜单的选择
</h2>
<div>
<span> <select name="province" id="province">
<option>
--请选择--
</option>
</select> 省 </span>
<span> <select name="city" id="city">
<option>
--请选择--
</option>
</select> 市</span>
</div>
</body>
</html>
city.xml 代码清单：
<?xml version="1.0" encoding="UTF-8"?>
<china>
<province name="北京">
<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>
</province>
<province name="河南">
<city>郑州</city>
<city>安阳</city>
<city>平顶山</city>
<city>开封</city>
<city>商丘</city>
<city>洛阳</city>
</province>
</china>
分享到：
相关推荐
这种功能常见于地理选择，用户在选择省份后，下拉菜单会自动更新展示对应省份的城市选项。 首先，我们需要理解XML（Extensible Markup Language）是一种用于存储和传输结构化数据的标准格式。XML文件通常包含元素、...
实现这种效果，JavaScript需要监听第一个下拉列表的“onchange”事件，当选择改变时，根据选中的省份值动态请求或解析XML数据，然后更新城市列表。 总结来说，这个案例中涉及的关键技术有： 1. JSP：用于生成动态...
总之，解决JavaScript解析XML的浏览器兼容问题需要对不同解析方法有深入了解，并采用适当的兼容策略。而实现省市区三级联动，则需要熟练掌握DOM操作和事件监听，以及从XML数据中提取和组织信息。通过这些技术，我们...
通常，一级下拉列表的初始值可以通过JavaScript动态填充，二级下拉列表的值根据一级的选择动态加载。 2. **编写JavaScript代码**：使用JavaScript（如jQuery库）监听一级下拉列表的`change`事件。当用户更改一级...
本案例中，开发人员选择使用 **JavaScript (JS)** 和 **XML** 来实现省市二级联动下拉框功能。这种方式的优点是不需要服务器端的支持，只需要前端技术就可以完成，因此具有很好的灵活性和轻量性。 #### 三、XML文件...
本示例资源"melist多级联动下拉菜单可中文检索.rar"提供了一种实现高效、易用的多级联动下拉菜单的方法，特别适合需要层级结构选择的场景，如导航菜单、地区选择等。下面将详细介绍这个解决方案的关键知识点。 首先...
这种联动是通过JavaScript监听选择事件并动态改变下拉菜单选项来实现的。 4. **HTML（Area.html）**：HTML文件是网页的基础结构，可能包含了用于展示省市县选择的HTML元素，如`<select>`标签，以及JavaScript代码...
6. **响应（Response）**：控制器处理完请求后，应返回JSON格式的数据，这样前端可以方便地解析并填充到二级下拉菜单。 示例代码片段： ```javascript // 前端JavaScript $("#province").change(function() { var...
在网页中，联动菜单通常指的是当用户在一个下拉菜单中选择一个选项时，另一个相关的下拉菜单会根据前者的选中项动态更新其显示内容。如果存在3级，那么这将涉及到一个菜单项的选择影响两个或更多个后续菜单的状态。...
在这个案例中，JavaScript被用来动态地创建和更新菜单项，根据用户的操作加载并解析XML文件，展示相应的子菜单。"jquery-1.3.2.min.js" 是一个古老的jQuery库版本，jQuery是一个流行的JS库，它简化了DOM操作、事件...
5. 客户端的JavaScript接收到响应，解析JSON数据，更新第二个下拉菜单的选项。 这个项目展示了如何结合JavaDB、JSP和AJAX来实现动态的Web交互，对于学习Web开发的初学者来说，是一个很好的实践案例。同时，理解这个...
JS将读取并解析这个XML文件，获取到所有省市区的信息，然后用于构建和更新下拉菜单。 两种绑定方式指的是如何将数据与界面元素关联起来。一种是通过城市代码绑定，这种情况下，每个省市区都有一个唯一的数字代码，...
3. 如果使用JavaScript解析XML，需确保浏览器兼容性，考虑使用DOM解析器或jQuery的`$.parseXML()`方法。 4. 考虑菜单的响应式设计，使菜单在不同设备和屏幕尺寸上都能良好地展现。 总之，XML配置的QQ菜单程序是一种...
当用户在第一级下拉菜单中做出选择时，触发一个事件，该事件会更新第二级下拉菜单的内容，以此类推。这通常涉及到DOM操作，包括`document.getElementById`、`querySelector`等方法来获取和修改HTML元素。 例如，在`...
在级联下拉菜单的实现中，.ashx文件将作为服务器端的数据提供者，接收Ajax请求，处理业务逻辑，然后以Json格式返回关联数据。 Ajax，即异步JavaScript和XML，是实现网页无刷新更新的关键技术。在级联下拉菜单中，当...
它是指在三个下拉菜单之间建立联动关系，当用户在一个下拉菜单中选择一项时，其他两个下拉菜单的内容会相应地更新。例如，当用户在“省份”下拉框中选择一个省份时，“城市”下拉框会显示该省份下的所有城市，再选择...
通过JavaScript解析XML文件，可以实现省市二级联动的效果。首先加载XML文件，然后根据选择的省份动态加载对应的城市数据。 **JavaScript（JS）** 是网页开发中的主要脚本语言，用于处理客户端的交互。在省市二级...
本文将深入探讨如何利用XML和JavaScript实现三级联动效果，这是一种常见的前端数据驱动交互设计，通常用于导航菜单、下拉列表等场景。 首先，XML是一种用于存储和传输结构化数据的语言，它具有自解释性，易于读写，...
在三级联动的实现中，当用户在第一级下拉菜单中做出选择时，AJAX会发送请求到服务器，获取与该选择相关的第二级数据，更新第二级下拉菜单；同样的过程也会发生在第二级选择后更新第三级下拉菜单。 实现这个功能的...