昨天用dom解析xml实现了二级菜单级联，今天用dom解析xml的方法实现省市县三级菜单级联
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
<div>
<span> <select id="sheng" style="width: 100px;">
</select> </span>
<span> <select id="shi" style="width: 100px;">
</select> </span>
<span> <select id="xian" style="width: 100px;">
</select> </span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//获取xmldom对象
function getXmlDom(){
var xmlDom;
try{
//IE浏览器
xmlDom=new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//firefox其他浏览器
xmlDom=document.implementation.createDocument("","",null);
}catch(e){
alert("您的浏览器不支持xmlHTTPrequest......")
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async=false;
//转载xml文件
xmlDom.load("city.xml");
return xmlDom;
}
window.onload=function(){
//通过方法获取对象
var xmlDom=getXmlDom();
//获取xml文件的根节点
var root=xmlDom.documentElement;
//获取所有的省节点
var provinces=root.childNodes;
//获取页面中要显示的省的控件都dom对象
var sheng=document.getElementById("sheng");
//获取页面中要显示的市的控件都dom对象
var shi=document.getElementById("shi");
//获取页面中要显示的县的控件都dom对象
var xian=document.getElementById("xian");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
// 查看该节点是否是元素节点
if(provinces[i].nodeType==1){
//创建option节点对象
var shengopt=document.createElement("option");
//为省节点添加文本节点
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//为省节点添加属性
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
//添加省到页面dom中
sheng.appendChild(shengopt);
}
}
//当省节点发生改变时，触发事件
sheng.onchange=function(){
//获取省节点中所有的option对象集合
var shengs=sheng.options;
//获取选中的option对象的节点下标(selectedIndex)
var num=shengs.selectedIndex;
/*//清空市区
shi.length=0;
xian.length=0; */
//根据选中的省的下标获取它的value值的内容，即xml文件中的postcode对应的值
var ppostcode=shengs[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点
if(provinces[i].nodeType==1){
//获取provinces的postcode属性值
var postcode=provinces[i].getAttribute("postcode");
alert(postcode);
//如果相同
if(postcode==ppostcode){
//获取选中省下的所有市的节点
var cities=provinces[i].childNodes;
//清空市
shi.length=0;
//遍历省下的所有市
for(var i=0;i<cities.length;i++){
//查看该节点是否是元素节点
if(cities[i].nodeType==1){
//创建option节点对象
var shiopt=document.createElement("option");
//为其添加文本节点
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
//为其设置value属性
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
//将option节点添加到市节点上
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
//当市节点发生改变时，触发的事件
shi.onchange = function(){
//获取市节点的所有option对象
var shis = shi.options;
//获取选中市的下标值
var num = shis.selectedIndex;
//获取选中市的value值
var spostcode = shis[num].getAttribute("value");
//遍历所有的省
for(var i=0;i<provinces.length;i++){
//查看该节点是否是元素节点
if(provinces[i].nodeType==1){
//获取选中的省下的所有的市的集合
var cities = provinces[i].childNodes;
//遍历选中的省下的所有的市
for(var j=0;j<cities.length;j++){
//查看该节点是否是元素节点
if(cities[j].nodeType==1){
//获取cities的postcode属性值
var postcode = cities[j].getAttribute("postcode");
//如果相同
if(postcode == spostcode){
////清空县
xian.length=0;
//获取选中市下的所有县的集合
var areas = cities[j].childNodes;
//遍历这些县
for(var k=0;k<areas.length;k++){
//查看该节点是否是元素节点
if(areas[k].nodeType == 1){
//创建option节点对象
var xianopt = document.createElement("option");
//为其添加文本节点
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
//为其设置value属性
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
//将option节点添加到县节点上
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
/*
备注说明：不能把 getxmlDom()方法中的代码放入到window.onload事件函数中
因为在opera11.01版本中会出现xmlDom.async<window.onload的异常信息
XMLHttpRequest to files is disabled for security reasons.
==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
//为了支持opera11.01必须在服务器页面中访问.
*/
</script>
/*
备注说明：不能把 getXmlDoc()方法中的代码放入到window.onload事件函数中
因为在opera11.01版本中会出现xmlDoc.async<window.onload的异常信息
XMLHttpRequest to files is disabled for security reasons.
==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
//为了支持opera11.01必须在服务器页面中访问.
注意：要想在opera浏览器中本地访问，要配置你的opera浏览器：
首先，打开opera浏览器，在地址栏输入about：config
然后进入：首选项编辑器===》User Prefs===》Allow File XMLHttpRequest选中保存，重启opera浏览器即可
*/
--------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
<province name="请选择省" postcode="100000" >
<city name="请选择市" postcode="100100" >
<area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市辖区" postcode="110100" >
<area name="东城区" postcode="110101" />
<area name="西城区" postcode="110102" />
<area name="崇文区" postcode="110103" />
<area name="宣武区" postcode="110104" />
<area name="朝阳区" postcode="110105" />
<area name="丰台区" postcode="110106" />
<area name="石景山区" postcode="110107" />
<area name="海淀区" postcode="110108" />
<area name="门头沟区" postcode="110109" />
<area name="房山区" postcode="110111" />
<area name="通州区" postcode="110112" />
<area name="顺义区" postcode="110113" />
<area name="昌平区" postcode="110114" />
<area name="大兴区" postcode="110115" />
<area name="怀柔区" postcode="110116" />
<area name="平谷区" postcode="110117" />
</city>
<city name="县" postcode="110200" >
<area name="密云县" postcode="110228" />
<area name="延庆县" postcode="110229" />
</city>
</province>
<province name="天津市" postcode="120000" >
<city name="市辖区" postcode="120100" >
<area name="和平区" postcode="120101" />
<area name="河东区" postcode="120102" />
<area name="河西区" postcode="120103" />
<area name="南开区" postcode="120104" />
<area name="河北区" postcode="120105" />
<area name="红桥区" postcode="120106" />
<area name="塘沽区" postcode="120107" />
<area name="汉沽区" postcode="120108" />
<area name="大港区" postcode="120109" />
<area name="东丽区" postcode="120110" />
<area name="西青区" postcode="120111" />
<area name="津南区" postcode="120112" />
<area name="北辰区" postcode="120113" />
<area name="武清区" postcode="120114" />
<area name="宝坻区" postcode="120115" />
</city>
<city name="县" postcode="120200" >
<area name="宁河县" postcode="120221" />
<area name="静海县" postcode="120223" />
<area name="蓟县" postcode="120225" />
</city>
</province>
.
.
.
</root>
分享到：
相关推荐
在JavaScript（JS）中解析XML文件来实现省市县三级级联下拉菜单是一种常见的前端开发技术，主要用于构建交互式Web应用程序。这篇博文链接提供了一个具体的示例，通过XML数据存储省市县信息，然后使用JavaScript进行...
省市县三级级联菜单省市县三级级联菜单省市县三级级联菜单
在本文中，我们将深入探讨如何使用Windows Presentation Foundation (WPF) 和 Prism 框架来实现ComboBox的省市县三级级联效果。WPF是.NET Framework的一部分，提供了丰富的用户界面（UI）设计工具，而Prism则是一个...
中国省市县多级联动菜单省份城市县区三级级联菜单，主要使用JAVASCRIPT编写，方便使用，其中在后台调用前台的菜单内容时，可以用Request["ID"] 来获取前台的值。
级联菜单，也称为下拉菜单或嵌套菜单，是一种常见的...通过上述技术，我们可以创建出一个功能完备且易用的全国省市县三级导航级联菜单。在实际应用中，还可以结合后台数据库动态获取数据，提供更灵活的扩展性和维护性。
在省市县三级级联的XML文件中，每个省市县信息可以被封装为一个独立的节点，如`<province>`, `<city>`, 和 `<county>`，并按照层级关系嵌套。例如： ```xml 省份1"> 城市1"> 县/区1"/> 县/区2"/> 城市2"> ...
本资源提供了一个“超漂亮的基于jquery的H5省市区县三级地区级联选择菜单”，它专为wap和HTML5页面设计，具有良好的视觉效果和出色的兼容性。 首先，我们要理解什么是jQuery。jQuery是一个快速、简洁的JavaScript库...
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...
本文将详细介绍如何使用JavaScript和jQuery来实现省市县三级级联下拉框。 #### 关键概念 1. **动态加载**：通过AJAX技术实现实时从服务器获取数据。 2. **级联逻辑**：当前一级选择变化时，下一级的数据需要随之...
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
在实际应用中，省市县三级联动的实现还可以结合前端组件库，如Element UI、Ant Design等，它们提供了现成的级联选择器组件，简化了开发过程。同时，为了优化用户体验，还可以加入搜索功能，让用户可以快速找到目标...
在这个名为“省市县三级级联js+xml”的压缩包中，我们主要会探讨如何使用JavaScript和XML来实现这样的功能。 JavaScript是一种广泛使用的客户端脚本语言，它可以在用户的浏览器上运行，用于增强网页的交互性和动态...
现成的省市区三级地区级联json数据，json代码格式工整简明，便于开发者阅读和使用，开箱即用！ 现成的省市区三级地区级联json数据，json代码格式工整简明，便于开发者阅读和使用，开箱即用！
在这个场景中，我们将探讨两个具体的应用：一是如何使用Ajax实现省市县三级级联，二是如何用Ajax判断登录时账号是否已被注册。 首先，我们来看“省市县三级级联”的实现。在网页设计中，级联下拉框常用于地理信息的...
在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
例如，在省市县三级级联中，当用户在省级下拉菜单中选定一个省份时，市级下拉菜单会更新为对应省份的城市，同样，选定城市后，县级下拉菜单则展示该城市下属的县或区。 JavaScript是实现这种动态交互的关键技术。它...
在"echart3 地图数据省市区三级级联demo"中，开发者已经实现了一个省份-城市-区县的三级联动效果，用户可以通过选择省份来筛选对应的城市，进一步选择城市后，再显示相应的区县。这种功能在地理分布、销售统计等场景...
这个“Ajax实现省市区三级级联Demo”是一个典型的前端与后端交互的实例，它展示了如何利用Ajax技术从MySQL数据库动态获取并显示省级、市级、区县级的数据，实现联动选择的效果。下面我们将详细探讨这一知识点。 ...
"使用XML文件实现3级下拉框级联"是一种有效的方法，尤其当数据量适中时。这种方法允许我们通过结构化的XML文件来存储和管理级联下拉框的数据，便于读取和更新。 首先，我们需要理解XML（eXtensible Markup Language...
使用js+xmldom+xpath实现的三级联动菜单， 以一个国标的行政区划码的xml文件为例子，展示省市县三级联动，菜单的初始值在html的hidden字段设置了山东省-青岛市-平度市。 你可以把他换成你需要xml文件，或者xml字符...