主要学习下javascript对XML的操作
代码如下：
<script type="text/javascript">
window.onload = function() {
var xmlDoc = parseXml("images/cities.xml");
//获取XML的节点
var provinceNodes = xmlDoc.getElementsByTagName("province");
//获取省的节点
var provinceNode = document.getElementById("province");
//获取市的节点
var citiesHtmlNode = document.getElementById("city");
for ( var i = 0; i < provinceNodes.length; i++) {
//创建option 下拉框值
var optionNode = document.createElement("option");
//获取省的名称
var value = provinceNodes[i].getAttribute("name");
//为option添加文本节点 值为省的name属性值
optionNode.appendChild(document.createTextNode(value));
optionNode.setAttribute("value", value); //为添加的option设置值
//添加到provinceNode节点中
provinceNode.appendChild(optionNode);
}
provinceNode.onchange = function() {
//清空原有的的节点
//获取清空的select里面的所有的option对象
var cityHtmlOptionNodes = citiesHtmlNode
.getElementsByTagName("option");//获取的是所有的option
//获取长度
var len = cityHtmlOptionNodes.length;
for ( var m = 0; m < len; m++) {
//看是否有第一个对象，【1】代表的第二个对象，如果不为空
if (cityHtmlOptionNodes[1]) {
//始终移除第二个对象
citiesHtmlNode.remove(cityHtmlOptionNodes[1]);
}
}
for (var i = 0; i < provinceNodes.length; i++) {
//判断点击的是否是value
if (this.value == provinceNodes[i].getAttribute("name")) {
var citiesNode = provinceNodes[i].getElementsByTagName("city");
for (var j = 0; j < citiesNode.length; j++) {
var cityOptionNode = document.createElement("option");
// alert(citiesNode.length);
//为创建的option对象添加文本 citieNode[j].firstChild.value
cityOptionNode.appendChild(document.createTextNode(citiesNode[j].firstChild.nodeValue));
//把创建的对象添加到city中
citiesHtmlNode.appendChild(cityOptionNode);
}
}
}
}
}
//解析xml文档
function parseXml(filename) {
var xmlDoc;
try {
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
//非IE浏览器
xmlDoc = document.implementation.createDocument("", "", null);
}
catch (ex) {
alert("你使用的是不是浏览器呀！");
}
}
//解析的时候是异步还是同步,设置为false，是关闭异步加载，这样确保在文档完全加载之前不会继续脚本的执行
xmlDoc.async = false;
xmlDoc.load(filename);
return xmlDoc;
}
</script>
</head>
<body>
<div align="center">
<div id="data">
<select id="province">
<option>
请选择省
</option>
</select>
<select id="city">
<option>
请选择市
</option>
</select>
<select id="country">
<option>
请选择市
</option>
</select>
</div>
</div>
</body>
</html>
用到的xml文件为：
<?xml version="1.0" encoding="GBK"?>
<china>
<province name="河北">
<city name="石家庄">
</city>
<city name="廊坊">
</city>
<city name="保定">
</city>
<city name="邢台">
</city>
<city name="沧州">
</city>
<city name="衡水">
</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>
<city>郑州</city>
</province>
<province name="安徽">
<city>阜阳</city>
<city>亳州</city>
<city>合肥</city>
</province>
</china>
分享到：
相关推荐
通过以上代码，我们实现了基于jQuery的XML解析和省市二级联动效果。这种方法允许数据动态加载，提高了用户体验，且易于维护和扩展。在实际项目中，可能还需要考虑错误处理、数据缓存、性能优化等问题，确保在不同...
全国地区二级联动和三级联动是网站开发中常见的一种功能，主要应用于用户在填写表单时选择自己所在的省、市或县。在这个压缩包文件中，包含两种格式的数据：json和xml，分别用于表示全国地区的二级联动（省份和城市...
在IT行业中，"js二级和js_xml三级联动"是一个常见的前端开发技术，主要应用于构建具有交互性和动态性的地理信息系统或下拉菜单系统。这个技术利用JavaScript（js）、XML（eXtensible Markup Language）和HTML...
二级联动的基本思想是，当用户选择一个省份时，动态加载并显示该省份下的城市。同样，当选择城市后，会加载并显示对应的城市下的区县。这涉及到事件监听和DOM操作。例如，可以为省份选择器添加`change`事件监听器： ...
在四级联动中，XML 可能被用来存储各级选项的数据，如省、市、区、街道的层级关系和对应值。JavaScript 通过解析 XML 文件来获取这些数据，然后根据需要在页面上动态生成下拉框的选项。 **四级联动** 四级联动指的...
在IT行业中，二级联动是一种常见的交互设计，尤其在网页表单和数据筛选中十分常见。本文将详细讨论“下拉框二级联动”这一主题，以及如何利用AJAX和JSON技术来实现这一功能。 首先，我们要理解什么是二级联动。在...
总之，"city.xml"文件是用于实现省市二级联动的XML数据源，通过解析和处理XML，我们可以构建出交互式的省市选择器，提升用户的输入体验。在实际项目中，根据性能和需求，可以灵活选择XML或JSON作为数据交换格式。
Java 中的二级联动是指在 select 选择框中，选择某个选项后，根据选项的值来动态加载另外一个 select 选择框的选项，这种技术广泛应用于许多 web 应用程序中，以提高用户体验和交互性。 在本例中，我们使用 ...
在IT行业中，二级联动和三级联动是常见的前端交互设计，主要应用于下拉菜单或选择框之间数据的关联性展示。这种设计通常出现在如地区选择、商品分类筛选等场景，用户在选择一级选项后，二级、三级选项会相应更新，...
### dropdownlist&xml二级联动知识点解析 #### 一、知识点概述 在Web开发中，有时我们需要实现一个下拉列表（dropdownlist），并且当用户选择其中一个选项时，另一个下拉列表会根据用户的选择动态地更新其内容。...
综上所述，"dropdownlist 省市二级联动"是利用前端技术实现的一种高效交互方式，通过无刷新的Ajax通信和动态DOM操作，提升了用户的操作便捷性和页面性能。在实际开发中，还需要结合具体业务需求进行定制和优化。
最后，考虑到“国家地区三级联动（xml数据库）”这个文件名，可能包含了一个示例的XML数据库文件和相关的JavaScript代码，供开发者参考和学习。开发者可以通过查看这些文件，了解如何构建和操作XML数据库，以及如何...
总结来说，利用Ajax和DWR框架实现的二级联动下拉列表，使得用户可以在不刷新页面的情况下完成多级选择，提升了用户体验。同时，DWR的使用简化了前后端交互的复杂性，使得开发更为高效。通过阅读和理解提供的源代码，...
这个"jquery+xml城市三级联动"项目是利用jQuery库和XML数据来实现这一功能的示例。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。而XML（Extensible Markup Language）则是...
总的来说，实现"JQuery 解析XML省市区县三级联动"涉及的主要技术包括JQuery的事件处理、XML解析、AJAX通信、DOM操作等，这些是Web开发中的基础技能，对于提升用户交互体验至关重要。在实际开发中，开发者还需要考虑...
在IT行业中，二级联动是一种常见的数据交互和展示方式，尤其在网页设计和前端开发中广泛使用。它通常指的是两个或多个下拉菜单之间存在的联动关系，例如在选择省份后，城市下拉菜单会自动更新为对应省份的城市列表，...
在网页开发中，二级联动是一种常见的交互设计，用于实现下拉菜单之间依赖关系的无刷新更新。例如，选择一个省份后，城市下拉菜单会自动更新为与该省份相关的城市。这种功能通常由Ajax（Asynchronous JavaScript and ...
在IT行业中，"无刷新二级联动"是一种常见的前端交互技术，尤其在网页设计和开发中极为常见。这种技术主要用于提高用户体验，使得用户在选择一级分类后，无需等待页面刷新即可看到与之相关的二级分类，从而实现快速...
总的来说，"asp无刷新二级联动菜单"是结合了ASP、JavaScript和Ajax技术，提供高效、流畅的用户界面，使得用户在选择地区或类别时无需等待整个页面刷新，极大地提升了网页的交互性和效率。这种技术在电商网站、信息...
本篇博客主要探讨如何利用这两者实现二级联动选择，即当用户在一级选择中作出选择时，二级选择会自动更新，以及如何解析XML和JSON数据格式。下面我们将详细探讨这些知识点。 首先，原生AJAX是通过JavaScript直接与...