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>

 

 

JavaScript实现下拉列表的级联

New Document body{font-family:Courier New, Courier}select{font-size:8pt;font-family:Courier New, Co...
  • mengxin846
  • mengxin846
  • 2007年04月27日 10:23
  • 772

使用Backbone.js实现级联选择框

我最近有机会参与了一个有一定规模的Backbone.js应用程序的开发。在这篇文章中,我会演示一个比单一模型和视图大一点的例子。此外,我会用迭代的方式来演示,而不是一下子把所有的都展示给你。你将会看到...
  • WeLoveSunFlower
  • WeLoveSunFlower
  • 2015年10月18日 11:07
  • 1237

实现一个简单的Javascript级联下拉菜单

var arr = new Array(); arr["张小飞"] =["语文80","数学60","英语78","化学40","物理78","地理50"]; arr["黄晓明"] =["语文70...
  • ganshengcai
  • ganshengcai
  • 2016年05月11日 08:46
  • 247

城市地区级联二级下拉选择菜单js特效

城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 var pc = new Array(); //pc[0]= new Array("请选择省份名","请选择...
  • lianchao668
  • lianchao668
  • 2013年06月20日 15:02
  • 1693

Struts2.2配置json+ajax实现三级联(任意级联)下拉列表框。

前言:折腾了两天终于实现了ajax的局部刷新,级联下拉列表框。
  • ahhmdwg
  • ahhmdwg
  • 2014年11月22日 10:01
  • 2188

js实现下拉框三级级联

         var citys=new Array(47);        citys[0]="北京市|海淀区";        citys[1]="北京市|朝阳区";        citys...
  • tangyajun_168
  • tangyajun_168
  • 2008年05月16日 17:19
  • 3482

通过JavaScript脚本创建级联下拉列表框

本模块通过JavaScript技术判断搜索条件是否为空及根据用户选择的数据更改相应列表中的数据。当用户在第一个列表中选择搜索条件后,第二个列表中的数据也将随之改变,并与第一个列表中的数据相对应,关键代...
  • xiuxianyule001
  • xiuxianyule001
  • 2015年01月25日 03:23
  • 108

JSP 下拉框实现值联动实例

下拉框值联动测试 var fjyt=[["NCR","DC","OTHER"], ["NCR","DC","OTHER"], ["NCR","DC","OTHER"],...
  • wanglei880526
  • wanglei880526
  • 2014年04月15日 14:16
  • 8037

【JSP案例】无限级联|下拉列表

本案例主要通过无限级联的数据结构来设计下拉列表 效果图: 1)设计无限级联数据库,并赋值 设计Id和ParentId字段,根类Id通过子类的ParentId来寻找,比如计算机是根类,他的...
  • czk_love_wyq
  • czk_love_wyq
  • 2014年12月22日 11:00
  • 1050

js 动态生成下拉列表 下拉列表级联

简单的动态生成下拉列表 并且 带有级联操作 根据父级节点的值来组织子级下拉列表的值 无标题文档 function changeF(fatherValue) { if(...
  • getdate
  • getdate
  • 2012年02月02日 14:17
  • 1395
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js技术实现html页面解析xml文档的级联下拉列表操作
举报原因:
原因补充:

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