解决浏览器兼容问题（对上篇文章的补充） -

zpx138332

浏览: 45819 次
性别:
来自: 河北

最近访客更多访客>>

chen_vogue

esxd_2015

li315186166

runmu_79

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

解决浏览器兼容问题（对上篇文章的补充）

浏览器 IE XML Firefox Opera

上篇文章只能使用在IE上，而对火狐，opera不适用，这篇文章为解决这个问题而发

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testcity.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">


<script type="text/javascript">
window.onload = function() {
var xmlDao;
var bool_IE= (window.ActiveXObject ? true : false);
if(bool_IE){
//针对的是IE浏览器创建一个空的微软 XML 文档对象
xmlDao = new ActiveXObject("Microsoft.XMLDOM");
}else{
//在 Firefox 及其他浏览器中的 XML 解析器
//创建一个空的 XML 文档对象。

xmlDom = document.implementation.createDocument("", "", null);
}

//关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
xmlDom.async = false;

//加载city.xml文档
xmlDom.load("city.xml");
//获取xml文档中的跟节点
var root = xmlDom.documentElement;

//获取xml文档中根节点的所有子节点
var sheng = root.childNodes;

//获取Htlm中province标签对象
var province = document.getElementById("province");

for ( var i = 0; i < sheng.length; i++) {
    if(sheng[i].nodeType == 1){//判断是否是空格回车等

//获取xml文档中的省节点的name值
var name = sheng[i].getAttribute("name");

//创建标签option
var op = document.createElement("option");

//创建一个文本节点,文本节点的值为xml文档中的省节点的name值并将文本节点添加到option节点中
op.appendChild(document.createTextNode(name));

//将option节点添加到province节点中
province.appendChild(op);
}
}
//获取Htlm中标签ID为cities的对象
var city = document.getElementById("cities");

//为省创建事件
province.onclick = function() {

//获取Htlm中标签ID为province的对象
var province = document.getElementById("province");

//获取province中所有option标签对象
var pro = province.options;
//获取所选中的标签对象
var opre = pro[province.selectedIndex];

//获取其中文本的值
var name = opre.innerHTML;

for ( var i = 0; i < sheng.length; i++) {
        if(sheng[i].nodeType == 1){//判断是否是空格回车等
//获取省节点中所有的子节点
var name1 = sheng[i].getAttribute("name");
//判断选中的值跟省节点中某一个子节点是否相等
if (name1 == name) {

//每次改变的时候清空
city.length = 1;

//获取xml文档中某一个省节点中所有的子节点
var cit = sheng[i].childNodes;

for ( var j = 0; j < cit.length; j++) {
if(cit[j].nodeType == 1){//判断是否是空格回车等
//创建标签option
var pt = document.createElement("option");

//创建一个文本节点,文本节点的值为xml文档中的省节点中某一个子节点的第一个子节点的name值并将文本节点添加到option节点中
pt.appendChild(document
.createTextNode(cit[j].firstChild.nodeValue));

//将option节点添加到city节点中
city.appendChild(pt);
                   }
}

}
}

}

}
}
</script>

</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>

分享到：