city.xml 文件
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<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>
</cities>
select.html 文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select.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><br>
<span>
<select id="province">
<option>
请选择省
</option>
</select></span>
<span>
<select id="cities">
<option>
请选择相应省下面的市
</option>
</select>
</span>
</body>
</html>
<script type="text/javascript">
function getXmlDoc() {
var xmlDoc ;
try{
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async = false;
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDoc.load("city.xml");
return xmlDoc;
}
window.onload = function() {
var xmlDoc = getXmlDoc();
//获得根节点
var root = xmlDoc.documentElement;
//获得省节点
var provinces = root.childNodes;
//获得第一个下拉框对象
var province = document.getElementById("province");
//把XML省节点的值添加到省下拉列表中
for(var i=0;i<provinces.length;i++) {
//兼容问题解决方法
if(provinces[i].nodeType==1) {
//获得省节点的属性为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");
//获取下拉框对象的所有OPTION
var opts = pce.options;
//获取被选中的下拉对象
var opt1 = opts[pce.selectedIndex];
//获取被选中的下拉文本对象的值（OPTION中间的文本）
var name = opt1.text; //opt1.innerHTML
for(var i=0;i<provinces.length;i++) {
if(provinces[i].nodeType == 1) {
//获取省节点的name属性值
var name1 = provinces[i].getAttribute("name");
//判断如果选中文本本的值，等于<province>属性值就把这个属性值的city值添加到第二个下拉列表中
if(name = name1) {
//清空下拉列表的值
cities.length = 1;
//得到当前选中的<province>对象
var pros = provinces[i];
//得到当前选中的<province>的子节点
var citys = pros.childNodes;
for (var j=0;j<citys.length;j++) {
//兼容问题解决方法
if(citys[j].nodeType == 1) {
//创建option对象
var opt1 = document.createElement("option");
alert(citys[j].nodeType);
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
//把创建的option对象添加到第二个下拉列表中
cities.appendChild(opt1);
}
}
}
}
}
}
}
</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){//在这里判断该节点是否是元素节点
}
}
-->
分享到：
相关推荐
在IT行业中，构建一个兼容各种浏览器的省市二级联动菜单是一项常见的需求，特别是在网页开发中。这个主题涉及到前端技术，特别是JavaScript、HTML和CSS，以及数据处理。以下将详细阐述实现这个功能所需的知识点。 ...
"修正多个Bug优美的jquery+xml城市3级联动效果（放在IIS下）"这个项目正聚焦于实现这样的功能，它是一个基于jQuery和XML的省市区三级联动选择器，优化了用户体验并解决了已知的问题。 jQuery是一个广泛使用的...
通过使用jQuery，开发者可以更轻松地实现页面元素的操控，而无需考虑不同浏览器之间的兼容性问题，因为jQuery已经处理了大部分兼容性难题。 接着，我们来看**XML**（eXtensible Markup Language）。XML是一种标记...
6. **兼容性处理**：由于提到这个解决方案已在IE和Firefox上测试通过，这意味着它考虑了浏览器之间的差异，可能采用了jQuery的跨浏览器兼容性特性。 此示例代码可能包含一个HTML文件，用于展示界面；一个JavaScript...
同时，JavaScript还负责解析返回的服务器数据，更新DOM结构，展示在四级联动的下拉菜单中。 4. **HTML与CSS**：HTML构建了页面的基本结构，定义了联动下拉菜单的各个元素。CSS则负责样式设计，使得菜单看起来美观，...
例如，当一级菜单被选定，通过ASP发送AJAX请求到服务器，服务器执行SQL查询获取二级菜单的选项，然后返回JSON或XML数据，JavaScript函数再解析这些数据并填充到二级菜单中。 5. **跨浏览器测试**：确保在火狐浏览器...
5. **跨浏览器兼容性处理**：由于JavaScript的实现可能存在差异，开发者可能使用了像jQuery这样的库来处理浏览器兼容性问题，或者使用条件语句针对不同浏览器进行优化。 6. **数据绑定**：将XML数据绑定到HTML元素...
6. SimpleXML：轻量级的XML解析库，简化XML处理。 7. XML应用：XML在数据交换、配置文件等方面的应用。 十、JavaScript基础加强 1. JS响应优化：提高JavaScript代码的执行效率。 2. 逻辑运算符应用技巧：掌握逻辑...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题，这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...
-增加中国的省市县三级联动示例(data/shengshixian.aspx)(feedback:Blues T)。 -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题，这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用...