用解析xml的方法实现二级菜单级联及他们中出现的浏览器兼容问题 -

yinghuayu1324117

浏览: 67235 次
性别:
来自: 保定

最近访客更多访客>>

Johnnie1986

knight_black_bob

xingyunmail

wangwen135

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (59)

社区版块

存档分类

用解析xml的方法实现二级菜单级联及他们中出现的浏览器兼容问题

浏览器 XML IE CSS Firefox

今天做关于用解析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">

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