js解析XML文件实现省市区三级联动兼容fireFox -

Doublecqw

浏览: 37710 次
性别:
来自: 邢台

最近访客更多访客>>

liuqu11

binglang1027

gaoxun1937

0519mch

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js解析XML文件实现省市区三级联动兼容fireFox

Firefox XML 浏览器 IE CSS

city.xml 文件

<?xml version="1.0" encoding="UTF-8"?>
<root name="中国">
<province name="请选择省" postcode="100000" >
    <city name="请选择市" postcode="100100" >
   <area name="请选择区" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
    <city name="市辖区" postcode="110100" >
        <area name="东城区" postcode="110101" />
        <area name="西城区" postcode="110102" />
        <area name="崇文区" postcode="110103" />
        <area name="宣武区" postcode="110104" />
        <area name="朝阳区" postcode="110105" />
        <area name="丰台区" postcode="110106" />
        <area name="石景山区" postcode="110107" />
        <area name="海淀区" postcode="110108" />
        <area name="门头沟区" postcode="110109" />
        <area name="房山区" postcode="110111" />
        <area name="通州区" postcode="110112" />
        <area name="顺义区" postcode="110113" />
        <area name="昌平区" postcode="110114" />
        <area name="大兴区" postcode="110115" />
        <area name="怀柔区" postcode="110116" />
        <area name="平谷区" postcode="110117" />
    </city>
    <city name="县" postcode="110200" >
        <area name="密云县" postcode="110228" />
        <area name="延庆县" postcode="110229" />
    </city>
</province>
<province name="天津市" postcode="120000" >
    <city name="市辖区" postcode="120100" >
        <area name="和平区" postcode="120101" />
        <area name="河东区" postcode="120102" />
        <area name="河西区" postcode="120103" />
        <area name="南开区" postcode="120104" />
        <area name="河北区" postcode="120105" />
        <area name="红桥区" postcode="120106" />
        <area name="塘沽区" postcode="120107" />
        <area name="汉沽区" postcode="120108" />
        <area name="大港区" postcode="120109" />
        <area name="东丽区" postcode="120110" />
        <area name="西青区" postcode="120111" />
        <area name="津南区" postcode="120112" />
        <area name="北辰区" postcode="120113" />
        <area name="武清区" postcode="120114" />
        <area name="宝坻区" postcode="120115" />
    </city>
    <city name="县" postcode="120200" >
        <area name="宁河县" postcode="120221" />
        <area name="静海县" postcode="120223" />
        <area name="蓟县" postcode="120225" />
    </city>
</province>

</root>

由于文件太长这里就写这几个省吧

city.html

<!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">
    
</head>
<body>
    <div>
    <span><select id="sheng" style="width: 100px"><option>
    请选择省
    </option></select></span>
    <span><select id="shi" style="width: 100px">
    <option>
  请选择相应市
</option>
    </select></span>
    <span><select id="xian" style="width: 100px">
    <option>
  请选择相应区
</option>
    </select></span>
    </div>
</body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc() {
var xmldoc;
try{
   //IE浏览器
  xmlDoc = new ActiveXObject("microsoft.XMLDOM");
}catch(e){
  try{
   //firefox 其他浏览器
   xmlDoc = document.implementation.createDocument("","",null);
  }catch(er){
  alert("您的浏览器太低了");
  }
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async = false;
//转载xml文件
xmlDoc.load("city.xml");
return xmlDoc;
}

//-->
</script>
<!--
DOM 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的。
重要的区别有两点：

1、加载 XML 的方式
//IE浏览器
     var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//firefox 其他浏览器
    var xmlDoc = document.implementation.createDocument("","",null);
2、处理空白和换行的方式
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
思考: 那么怎么解决这种差异呢，下面是一种方法：
   for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候
       if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点
          }
    }
要注意的是: xmlDoc.async = false; 写成这样 IE ， fireFox 都可以
   xmlDoc.async = "false"; IE 可以 fireFox 会报错
-->