浏览 7591 次
|
锁定老帖子 主题：js 解析xml文件实现省市级联下拉菜单
精华帖 (0) :: 良好帖 (0) :: 新手帖 (1) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-03-21
最后修改：2011-03-21
js 解析xml文件实现省市级联下拉菜单
写一个省市的XML文档 city.xml <!--EndFragment--> <?xml version="1.0" encoding="UTF-8"?>
<cities>
<province name="北京">
<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>
</province>
<province name="陕西">
<city>西安</city>
<city>咸阳</city>
<city>铜川</city>
<city>渭南</city>
<city>汉中</city>
<city>商洛</city>
<city>延安</city>
</province>
</cities>
city.html
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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> <span> <select id="counties" name="county"> <option>请选择相应市下面的县 </option> </select> </span> </div> </body> </html>
javascript
<script>
window.onload = function() {
var xmlDom;
try {
//针对的是IE浏览器 创建一个空的微软
XML 文档对象
xmlDom = new ActiveXObject
("Microsoft.XMLDOM");
} catch (err) {
try {
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。
xmlDom = document.implementation.createDocument("", "", null);
} catch (e) {
}
}
//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
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属性的值
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 = 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
var opt1 = document.createElement("option");
//为option添加文本
opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
//添加到父节点中
cities.appendChild(opt1);
}
}
}
}
}
</script>
**存在的问题是 ，只能在IE浏览器中打开，望哪位高手解决兼容性！ <!--EndFragment-->声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2011-03-21
IE和firefox中XML解析的方式是不同的 一样菜鸟 给点意见
|
| 返回顶楼 | |
|
发表时间：2011-03-23
看下这个：http://blog.csdn.net/oxcow/archive/2010/09/12/5878872.aspx
|
| 返回顶楼 | |
|
发表时间：2011-03-23
呵呵，建议将XML换成Json对象，那前台解析起来就方便多了，并且没有游览器限制
多个JS框架都是支持的，如Jquery |
| 返回顶楼 | |
|
发表时间：2011-03-23
创建XML对象前进行判断
if (window.XMLHttpRequest) {// 适用其他浏览器 xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// 适用IE浏览器 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } |
| 返回顶楼 | |
|
发表时间：2011-03-24
FF 取的子节点用的是children，而IE用的是childNodes。
|
| 返回顶楼 | |
|
发表时间：2012-02-17
用json最好。小而兼容。。。
|
| 返回顶楼 | |
