今天做关于用解析xml的方法实现二级菜单级联的时候,出现了浏览器不统一的问题,在IE浏览器中ok,在火狐浏览器中不行,后来发现,火狐浏览器在解析xml的时候出现了空格和换行,所以做了更改,代码如下:
-----------------------
.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city1.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>
<h1> 用解析xml的方法实现省市二级菜单的级联 </h1>
<div> <span>
<select id="province" name="province">
<option> 请选择省 </option>
</select>
</span> <span>
<select id="cities" name="city">
<option> 请选择相应省下面的市 </option>
</select>
</span> </div>
</body>
</html>
<script>
window.onload = function() {
var xmlDom;
var bool_IE = (window.ActiveXObject ? true : false);
//因为在除ie的浏览器以外的浏览器在加载的时候不会去除空格和换行,所以要判断
if (bool_IE) {
//针对的是IE浏览器 创建一个空的微软 XML 文档对象
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
} else {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
}
//关闭异步加载,这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async = false;
//解析器加载名为 "xxx.xml" 的 XML 文档、
xmlDom.load("city.xml");
//获取xml文件的根节点
var root = xmlDom.documentElement;
//获取根节点下面的省节点
var provinces = root.childNodes;
var province = document.getElementById("province");
for ( var i = 0; i < provinces.length; i++) {
//获取省节点的name属性的值
//为了兼容火狐浏览器 判断=====>provinces[i].nodeType==1
if (provinces[i].nodeType == 1) {
var name = provinces[i].getAttribute("name");
//创建一个option
var opt = document.createElement("option");
//为option添加文本
opt.appendChild(document.createTextNode(name));
//添加到父节点中
province.appendChild(opt);
}
}
//获取cities节点
var cities = document.getElementById("cities");
province.onchange = function() {
//获取province节点
var pce = document.getElementById("province");
//获取province节点下的option节点
var opts = pce.options;
//获取选中省的下标
var opt1 = opts[pce.selectedIndex];
//获取选中省的name
var name = opt1.innerHTML;
for ( var i = 0; i < provinces.length; i++) {
//获取省节点的name属性的值
var name1 = "";
if (provinces[i].nodeType == 1) {
name1 = provinces[i].getAttribute("name");
if (name == name1) {
cities.length = 1;//每次改变的时候清空
var pros = provinces[i];
var citys = pros.childNodes;
for ( var j = 0; j < citys.length; j++) {
//创建一个option
if (citys[j].nodeType == 1) {
var opt1 = document.createElement("option");
//为option添加文本
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
//添加到父节点中
cities.appendChild(opt1);
}
}
}
}
}
}
}
</script>
------------------------------------------------------
.xml
<?xml version="1.0" encoding="UTF-8"?>
<cities>
<province name="北京">
<city>大兴</city>
<city>昌平</city>
<city>朝阳</city>
<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>
<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>
<city>三门峡市</city>
<city>信阳市</city>
<city>南阳市</city>
<city>周口市</city>
<city>新乡市</city>
<city>济源市</city>
<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>
<city>曲靖市</city>
<city>玉溪市</city>
</province>
</cities>
分享到:
相关推荐
【PHP+Ajax实现二级联动菜单】是Web开发中常见的交互功能,主要应用于下拉菜单的选择,如省份选择后自动更新对应的城市列表。这种技术利用了JavaScript的Ajax(Asynchronous JavaScript and XML)局部刷新特性,避免...
尽管AJAX带来了诸多优势,但它也有一定的局限性和缺点,如SEO问题、浏览器兼容性问题以及安全性问题等。开发者在使用AJAX时需要注意这些问题,确保Web应用的安全性和可用性。 #### 七、AJAX开发 ##### 7.1、AJAX...
总之,AJAX通过结合多种技术,实现了Web应用的异步交互,极大地提升了用户体验,但同时也带来了新的挑战,如SEO、安全性和浏览器兼容性等问题。开发者需要在享受AJAX带来的便利的同时,谨慎处理这些问题,确保应用的...
**B、级联菜单**: 用户选择某个选项时,通过AJAX请求获取下一级菜单,并动态添加到页面中。 ##### 7.4 文档对象模型(DOM) DOM是一种处理HTML或XML文档的标准方法,可以动态地访问和修改文档内容。 - **7.4.1 ...
- **浏览器兼容性**:不同的浏览器对JavaScript和DOM的支持程度不一,可能导致跨浏览器的问题。 - **安全问题**:AJAX应用增加了客户端和服务器端的交互次数,也增加了安全漏洞的风险。 #### 七、AJAX开发 ##### ...
- **兼容性:** HTML具有良好的浏览器兼容性,几乎所有的现代浏览器都能很好地解析HTML文档。 - **扩展性:** 可以通过引入CSS和JavaScript来增强HTML文档的表现力和交互性。 #### 二、微机电系统(MEMS) **定义...