`

js 解析xml 实现二级联动 已经解决浏览器差异问题

浏览器XMLFirefoxIECSS 
阅读更多

city.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>

 

 

select.html 文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>select.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><br>
    <span>
    <select id="province">
    <option> 
     请选择省
    </option>
    </select></span>
   
    <span>
    <select id="cities">
    <option>
  请选择相应省下面的市
 </option>
    </select>
    </span>
  </body>
</html>
<script type="text/javascript">

  function getXmlDoc() {
   var xmlDoc ;
  try{
  //针对的是IE浏览器 创建一个空的微软 XML 文档对象
  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  }catch(e){
   try{
    //在 Firefox 及其他浏览器中的 XML 解析器
   //创建一个空的 XML 文档对象。
    xmlDoc = document.implementation.createDocument("","",null);
    
   }catch(er){
   }
  }
  //关闭异步加载，这样确保在文档完全加载之前解析器不会继续脚本的执行
  xmlDoc.async = false;
  //解析器加载名为 "xxx.xml" 的 XML 文档、
  xmlDoc.load("city.xml");
  return xmlDoc;
  }
  window.onload = function() {
 var xmlDoc = getXmlDoc();
  //获得根节点
 var root = xmlDoc.documentElement;
  //获得省节点
 var provinces = root.childNodes;
  //获得第一个下拉框对象
  var province = document.getElementById("province");
  //把XML省节点的值添加到省下拉列表中
  for(var i=0;i<provinces.length;i++) {
   //兼容问题解决方法
   if(provinces[i].nodeType==1) {
   //获得省节点的属性为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");
   //获取下拉框对象的所有OPTION
   var opts = pce.options;
   //获取被选中的下拉对象
   var opt1 = opts[pce.selectedIndex];
   //获取被选中的下拉文本对象的值（OPTION中间的文本）
   var name = opt1.text;   //opt1.innerHTML
   for(var i=0;i<provinces.length;i++) {
    if(provinces[i].nodeType == 1) {
    //获取省节点的name属性值
    var name1 = provinces[i].getAttribute("name");
    //判断如果选中文本本的值，等于<province>属性值就把这个属性值的city值添加到第二个下拉列表中
    if(name = name1) {
     //清空下拉列表的值
     cities.length = 1;
     //得到当前选中的<province>对象
     var pros = provinces[i];
     //得到当前选中的<province>的子节点
     var citys = pros.childNodes;
     for (var j=0;j<citys.length;j++) {
      //兼容问题解决方法
      if(citys[j].nodeType == 1) {
      //创建option对象
      var opt1 = document.createElement("option");
      alert(citys[j].nodeType);
      opt1.appendChild(document.createTextNode(citys[j].firstChild.nodeValue));
      //把创建的option对象添加到第二个下拉列表中
      cities.appendChild(opt1);
     }
     }
    }
   }
  }
}
 }

</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){//在这里判断该节点是否是元素节点
          }
    }

-->

 

分享到：
| js解析XML实现省市二级联动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics