js技术实现html页面解析xml文档的级联下拉列表操作

原创 2011年03月21日 15:30:00

实现效果:

   点击北京,出现的是北京的各个区,点击河北省出现河北省的各个市...

详细解析如下:

案例:

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>

 

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

 

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

 

       </div>

    </body>

</html>

 

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

              alert(citys.length+"====================");

              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>

 

 

js解析XML文件,并将城市显示在下拉列表,选中城市后出现城市介绍

在群上看到有人问问题,就闲着没事做了一下

js操作xml实现下拉框联动

好久没写啦,懒啊。今天写点吧,希望对需要的人有帮助 http://www.w3.org/1999/xhtml" >    Untitled Page        var oSelProvince; ...
  • qqlxx
  • qqlxx
  • 2008年03月27日 16:49
  • 1718

js解析XML文件,并将城市显示在下拉列表,选中城市后出现城市介绍

在群上看到有人问问题,就闲着没事做了一下

XML保存HTML页面的下拉列表内容

HTML代码: menu2level.html function loadXML(){ var xmlDoc; ...

\t\t数据岛把XML文档引入HTML页面

数据岛把XML文档引入HTML页面通过数据岛,可以把XML文档引入到HTML页面中。数据岛可以访问XML文件。(如上面代码,可把xmldso.xml文件载入一个叫"xmldso"的数据岛中。属性asy...

JAVA EE 项目常用知识 之AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)

AJAX技术实现select下拉列表联动的两种用法(让你真正理解ajax)

js级联下拉列表(日历控件)

  • 2008年12月18日 15:38
  • 3KB
  • 下载

原生js实现下拉级联操作+通过disabled对下拉框不使用

原生js实现下拉级联操作                             --请选择省--                         ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js技术实现html页面解析xml文档的级联下拉列表操作
举报原因:
原因补充:

(最多只允许输入30个字)