在出ie浏览器之外的浏览器在读取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>
<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);
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);
}
}
var cities = document.getElementById("cities");
province.onchange = function() {
var pce = document.getElementById("province");
var opts = pce.options;
var opt1 = opts[pce.selectedIndex];
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>
</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>
分享到:
相关推荐
js调用本地程序js调用本地程序js调用本地程序js调用本地程序js调用本地程序js调用本地程序
火狐浏览器(Mozilla Firefox)是一款由Mozilla基金会和志愿者共同开发的开源网络浏览器,以其高度定制性、安全性和性能而受到用户欢迎。以下是一份描述: 火狐浏览器是一款跨平台的开源网络浏览器,由Mozilla基金...
火狐浏览器火狐浏览器火狐浏览器火狐浏览器
使用JS实时读取USB串口扫码枪数据,运行环境:龙芯+中标麒麟系统+火狐浏览器 NPAPI插件使用方法: HTML: <object id="plugin" type="application/htkyzplugin" width="0" height="0"></object> JS: ...
js监控IE火狐浏览器关闭、刷新、回退、前进事件.docx
火狐浏览器无法观看视频问题解决方法 火狐浏览器是一个流行的开源浏览器,拥有大量用户基础。然而,在使用火狐浏览器观看视频时,一些用户可能会遇到无法观看视频的问题。这可能是由于插件的原因,或者是浏览器的...
火狐浏览器for linux是火狐浏览器官方推出的火狐浏览器linux版,适用于linux系统。火狐浏览器英文全称Mozilla Firefox,是一个开源网页浏览器,使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。...
延伸了火狐同步的功能用户可以在不同计算机之间来同步...Mozilla基金会是一个非营利性开源软件机构,旗下谋智网络是Mozilla的中国子公司,目前负责在中国运营 Firefox 火狐浏览器以及Firefox Mobile 移动浏览器产品。
火狐浏览器windows安装包
火狐浏览器离线安装包火狐浏览器离线安装包火狐浏览器离线安装包火狐浏览器离线安装包火狐浏览器离线安装包火狐浏览器离线安装包火狐浏览器离线安装包火狐浏览器离线安装包
第二步:删除浏览器安装包中的update.exe更新程序 第三步:浏览器在地址栏中输入about:config,搜索xpinstall.signatures.required并双击禁用(值...第四步:将jsprintsetup-0.9.5.1.xpi文件拖至火狐浏览器页面进行安装即可
这是火狐浏览器支持win7的最后一个版本,欢迎大家下载
支持win2003操作系统的火狐浏览器,亲测能用,最新版火狐已不再支持win2003
解决火狐浏览器占用资源大、启动慢问题方法 Firefox 是一个功能强大且流行的浏览器,但是有一些用户在使用 Firefox 时可能会遇到占用资源大、启动慢的问题,这些问题可能是由于 Firefox 的默认设置不太友善所致。...
火狐浏览器适于与开发人员发现前台页面bug所在,包含debug文件,可方便快速调试项目。
火狐浏览器内核dll 文件欢迎下载!
Firefox 火狐浏览器 21.0中国版离线安装包
兼容火狐浏览器的javascript的中文日历控件
火狐浏览器渗透专版,集成了火狐社区内最新的主流渗透插件,支持sql漏洞检测,sql注入,cookies欺骗,以及提权等插件技术,欢迎交流,下载,使用
火狐浏览器最新官方原版(54)离线安装文件。