<!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">
<!--
//获取xmlDoc对象
function getXmlDoc(){
var xmlDoc;
try{
//IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//firefox 其他浏览器
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
alert("您的浏览器实在是太低........");
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//转载xml文件
xmlDoc.load("city.xml");
return xmlDoc;
}
/*
备注说明：不能把 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必须在服务器页面中访问.
*/
window.onload = function (){
//通过方法获取对象
var xmlDoc = getXmlDoc();
//获取xml文件的根节点
var root = xmlDoc.documentElement;
//获得所有的省节点
var provinces = root.childNodes;
//获取页面中要显示的省的控件dom对象
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
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 ){
var postcode = provinces[i].getAttribute("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){
var shiopt = document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange = function(){
var shis = shi.options;
var num = shis.selectedIndex;
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){
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){
var xianopt = document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}
//-->
</script>
<!--
DOM 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。
重要的区别有两点：
1、加载 XML 的方式
//IE浏览器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//firefox 其他浏览器
var xmlDoc = document.implementation.createDocument("","",null);
2、处理空白和换行的方式
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
思考: 那么怎么解决这种差异呢？
for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候
if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点
}
}
-->
附件为xml文档
分享到：
相关推荐
在IT行业中，开发一个能够实现省市县三级联动的系统是一项常见的需求，特别是在处理地理信息或者地址选择时。这个"php+ajax+mysql省市县三级联动"的资源提供了一个基于PHP、Ajax和MySQL实现的示例，它可以帮助初学者...
在网页开发中，实现省市县三级联动是一种常见的交互功能，主要用于动态更新下拉菜单选项，让用户根据选择的上级地区自动筛选出相应的下级地区。在这个过程中，jQuery、AJAX 和 XML 技术起到了关键作用。下面我们将...
在IT行业中，"js+xml省市县三级联动实现【完成重构】"是一个常见的前端开发任务，主要涉及JavaScript（js）和XML（eXtensible Markup Language）技术，用于创建具有交互性的省市县三级联动选择功能。这种功能常见于...
这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信，以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说，这是一个很好的实践案例，有助于深入理解Web开发中的异步交互和...
在HTML中，我们经常需要实现省市县三级联动的效果，即在一个下拉菜单选择省后，第二个下拉菜单自动填充该省的城市，再选择城市后，第三个下拉菜单显示对应城市的县或区。这种功能在诸如地址选择、订单填写等场景中...
本主题“基于xml数据的省市区三级联动”关注的是如何利用JavaScript和XML数据来实现这一功能。 XML（Extensible Markup Language）是一种用于存储和传输数据的格式，它结构清晰，易于解析，并且与平台和语言无关。...
在IT行业中，省市区三级联动是一种常见的前端交互功能，它用于在用户选择省份时自动更新市、区下拉框的内容，以实现动态筛选。这个压缩包文件“php+mysql+jquery省市区三级联动+2014省市数据库”提供了一个完整的...
在这个"jsp+servlet+ajax省市区三级联动"项目中，我们将探讨如何利用这三种技术协同工作来实现这一功能。 首先，JSP（JavaServer Pages）是一种动态网页技术，允许开发者在HTML代码中嵌入Java代码，以服务器端脚本...
"Xml+JS省市县三级联动(兼容IE FF)"就是一个这样的解决方案，它利用JavaScript（JS）语言处理XML文件，实现了在不同浏览器（如Internet Explorer和Firefox）中都可正常运行的联动效果。 XML（Extensible Markup ...
总结来说，这个项目展示了如何使用PHP、JavaScript和AJAX实现省市县三级联动列表。PHP处理服务器端逻辑，JavaScript处理客户端交互，AJAX则作为两者之间的桥梁，实现了数据的实时交换。这种技术组合在Web开发中非常...
本资源包提供了一个实现省市县三级联动的示例，这种功能通常用于地址选择或者区域筛选等场景。现在，我们将深入探讨这个组合中的每个部分及其在实际应用中的作用。 **PHP（Hypertext Preprocessor）** 是一种服务器...
在IT行业中，尤其是在Web开发领域，"Java+Ajax无刷新实现省市县三级联动"是一个常见的需求，主要用于提高用户体验，使得用户在选择地理位置时无需多次点击提交按钮，而是通过异步方式实时更新数据。这个实例是一个...
在网页开发中，实现省市区三级联动是一种常见的需求，它能帮助用户快速选择地理位置。这里我们探讨的主题是“jquery+ajax+json省市区三级联动”，这个功能利用jQuery库的便捷性，结合AJAX异步数据交换，以及JSON数据...
总的来说，“JS省市区三级联动.htm+xml”是一个结合了JavaScript、XML和HTML技术的解决方案，实现了动态的省市区选择功能。开发者可以根据自己的需求，如数据来源（可能是动态从服务器获取而非静态XML文件）、样式...
通过以上步骤，我们就完成了HTML+CSS+JS实现省市县三级联动的基本框架。在实际项目中，可能还需要处理更多细节，如错误处理、数据加载优化、用户输入验证等。同时，为了提高用户体验，可以考虑使用现代前端框架（如...
在网页设计中，三级联动通常用于地区选择，如省、市、县的逐级筛选。这个功能能够提高用户界面的交互性和用户体验。本示例主要介绍如何使用Ajax和XML来实现这种联动效果。 Ajax（Asynchronous JavaScript and XML）...
在网页开发中，三级联动是一种常见的交互设计，用于实现如省市县选择的下拉菜单功能。这个"jquery+php+mysql省市县Ajax三级联动代码"是实现这种功能的一个实例，结合了前端JavaScript库jQuery、后端PHP编程语言以及...
在网页开发中，实现省市区三级联动显示是一个常见的需求，特别是在用户填写地址或者选择服务区域时。本项目利用Ajax、MySQL数据库和Java Server Pages（JSP）技术来完成这一功能，提供了一个动态交互的用户体验。 ...
在省市县三级联动的XML实现中，数据会以XML文档的形式存储，每个省、市、县作为XML节点。JavaScript可以解析XML文档，提取所需数据并填充到页面的下拉列表中。这种方式使得数据与代码分离，方便管理和更新，但解析...