通过JS解析XML动态加载下拉列表框

最新推荐文章于 2018-09-07 11:33:38 发布
最新推荐文章于 2018-09-07 11:33:38 发布
阅读量171 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/wcj12168/archive/2008/12/04/1347559.html
版权

一个很基本的JS解析XML,兼容IE跟FireFox,以下代码在两浏览器下均测试成功。

ContractedBlock.gif ExpandedBlockStart.gif Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type='text/javascript'>
    loadXML = function(xmlFile){
        var xmlDoc=null;
        //判断浏览器的类型
        //支持IE浏览器
        if(!window.DOMParser && window.ActiveXObject){
            var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
            for(var i=0;i<xmlDomVersions.length;i++){
                try{
                    xmlDoc = new ActiveXObject(xmlDomVersions[i]);
                    break;
                }catch(e){
                }
            }
        }
        //支持Mozilla浏览器
        else if(document.implementation && document.implementation.createDocument){
            try{
                /* document.implementation.createDocument('','',null); 方法的三个参数说明
                 * 第一个参数是包含文档所使用的命名空间URI的字符串； 
                 * 第二个参数是包含文档根元素名称的字符串； 
                 * 第三个参数是要创建的文档类型（也称为doctype）
                 */
                xmlDoc = document.implementation.createDocument('','',null);
            }catch(e){
            }
        }
        else{
            return null;
        }

        if(xmlDoc!=null){
            xmlDoc.async = false;
            xmlDoc.load(xmlFile);
        }
        return xmlDoc;
    }

    //对xml对象进行判断
    checkXMLDocObj = function(xmlFile){
        var xmlDoc = loadXML(xmlFile);
        if(xmlDoc==null){
            alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
            //window.location.href='某某地址(比如首页)';
        }
        return xmlDoc;
    }
    
    //参数1:控件id号,参数2:理解为定位节点
    initializeSelect = function(oid,xPath){
        var xmlDoc = checkXMLDocObj('sqlInfo.xml');
        var n;
        var l;
        var e = document.getElementById(oid);//得到下拉列表框控件
        if(e!=null){
            n = xmlDoc.getElementsByTagName(xPath);
            l = n.length;
            //循环添加列表子项
            for(var i=0;i<l;i++){
                e.options.add(new Option(n[i].getElementsByTagName("cNname")[0].firstChild.nodeValue, n[i].getElementsByTagName("cIP")[0].firstChild.nodeValue));
            }
        }
    }

    showValue = function(){
        var oOptions = document.getElementById('company');
        for(var i=0;i<oOptions.length;i++){
            if(oOptions[i].selected==true){
                alert(oOptions.value);
            }
        }
    }
  </script>
 </HEAD>

 <BODY onload="initializeSelect('company','Company')">
  <select id='company' name='company' onChange='showValue()'>
    <option selected='selected'></option>
  </select>
 </BODY>
</HTML>

 

附上XML测试文件

ContractedBlock.gif ExpandedBlockStart.gif Code
<?xml version="1.0" encoding="utf-8" ?>
<DongFang>
  <Company>
    <cNname>1</cNname>
    <cIP>1</cIP>
  </Company>
  <Company>
    <cNname>2</cNname>
    <cIP>2</cIP>
  </Company>    
  <Company>
    <cNname>3</cNname>
    <cIP>3</cIP>
  </Company>
  <Company>
    <cNname>4</cNname>
    <cIP>4</cIP>
  </Company>
  <Company>
    <cNname>5</cNname>
    <cIP>5</cIP>
  </Company>
  <Company>
    <cNname>6</cNname>
    <cIP>6</cIP>
  </Company>
</DongFang>

转载于:https://www.cnblogs.com/wcj12168/archive/2008/12/04/1347559.html

weixin_30449453
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java和js读取xml数据，处理下拉菜单
03-01
JS文件 博文链接：https://gavintang.iteye.com/blog/46401
【ASP.NET编程知识】ASP .NET 可编辑输入自动匹配的下拉框.docx
05-15
在 ASP.NET 中，可以使用 JS 和 JQuery 库来动态添加下拉框的选项，并将其传递给后台处理程序。 八、ASP.NET 实现下拉框只读功能 在 ASP.NET 中，可以使用 Enabled 属性来实现下拉框的只读功能。当 Enabled 属性...
读取xml到下拉列表
Elcaro
03-23 260
在开发节点物流的平台时有一个下拉列表读取xml的东西，虽然后来被用其他的东西换掉了，可是还要来说一说这个小东东。 首先是根据一个下拉列表的选择：A，货源，B、车源，C、其它 货源对应goods 车源对应truck 其它为others，下面是xml文件 [code] 钢铁 煤炭 电力 吨 立方米 ...
JS解析XML文件实现两级下拉菜单的选择
sxpgog
03-21 143
        JavaScript在Web中深受程序员的青睐，不仅因为它可以制作很多绚丽的HTML页面特效，而且JavaScript结合HTML DOM在解析HTML、XML等文件方面更是强悍！在某些情况下，我们甚至可以完全撇开数据库，而使用XML文档作为数据存储介质开发一个网站，这样即快速又省事。         以下是我写的一个使用JS解析XML文件并实现两级下拉菜单的选择的案例。 &l...
js中加载并解析xml文件， 动态添加标签，控件
huachao1的专栏
06-28 4876
js中加载一个xml文件，并获得该xml文件的根元素document： function loadxml(xmlFile){ var xmlDoc;    if(window.ActiveXObject)    {        xmlDoc    = new ActiveXObject(Microsoft.XMLDOM);        xmlDoc.async    = fal
Road-Trip-Mileage-Calculator:Github上的第一个项目
05-24
公路旅行里程计算器 这是一个简单的Web应用程序，它需要几个用户输入（来源城市，汽车燃料类型，汽车里程，... 注意-目标下拉列表列出了多个数组，这些数组将馈入单个代码块，该代码块计算并返回结果表。 没有目的地的
《javaScrip开发技术大全》源代码
04-07
• sample09.htm 边加载边解析的JavaScript代码 • sample10.htm 先加载后解析的JavaScript代码 • sample11.htm 单行注释语句 • sample12.htm 多行注释语句 • sample13....
c实现无刷新dropdownlist联动效果
05-11
2. 使用XML文档来存储返回结果，并使用JS来解析XML文档。 3. 使用ClientScriptManager来注册JS函数，以便在客户端执行。 4. 使用DOM方法来动态添加选项到DropdownList中。 通过这种方法，我们可以实现无刷新...
PHP开发实战1200例源码
09-22
实例183 通过下拉列表选择头像 220 3.5 CSS+DIV页面布局 222 实例184 应用CSS+DIV实现无边框窗口 222 实例185 设置表格样式 224 实例186 设置图片的样式 225 实例187 滚动条样式 226 实例188 设置表单样式 227 实例...
Javascript调用XML制作连动下拉列表框
12-12
传统的HTML页面中连动下拉框采用了两种方法：1）直接将下拉框中的内容hardcode于html的javascript中，调用javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。 <html><head><title>List</title><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>[removed]<!–var onecount;onecount=0; subcat = ne
as3.0下拉菜单(主菜单全xml控制)
05-07
这个demo是我修改过的，改成了全xml控制的，可以自定义增加菜单个数以及下拉菜单的个数，动画效果和上次发那个一样的.对于新手这是很好的学习案例！
JavaScript+xml实现下拉二级联动菜单
04-15
JavaScript+xml实现下拉二级联动菜单 JavaScript+xml实现下拉二级联动菜单
基于XML的下拉菜单（源代码）
weixin_33735077的博客
12-30 256
以前曾看到过有人写出这样的菜单，可是自己却没有源代码，放假的时候，闲着没事，就自己写了一个，并把它制成了服务器控件。这里我用到了六个文件，当然你可以把某些文件合并，以减少耦合，我的用意是将各种不同的代码分离。在写的过程中，遇到了很多问题，不知道大家又没有碰到过，希望各位注意。好了，下面切入正题！1、服务器控件制作：基于Xml的下拉菜单xml文件为：&lt;?xml version="1.0" en...
JavaScript解析XML实现多级级联下拉列表
流浪狗的专栏
12-12 830
1.创建XML文档:cascaded_select.xmlxml version="1.0" encoding="GBK"?>select>    province key="sx" value="陕西">        city key="xa" value="西安"/>        city key="bj" value="宝鸡"/>        city key="wn" value
js 解析xml文件实现省市级联下拉菜单
03-21 153
  js 解析xml文件实现省市级联下拉菜单   写一个省市的XML文档   city.xml    &lt;!--EndFragment--&gt; &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;cities&gt; &lt;province name="北京"&gt; &lt;ci
js读取xml文件并引用到下拉选择选项
c4each的博客
09-07 824
表单经常用到下拉框，除了在option标签写死，从数据库动态载入，这里将选项写到xml文件内，并在js中读取到页面上。 首先xml文件随便来几个选项： &lt;sels&gt; &lt;!--支出类别--&gt; &lt;zclb&gt;食品&lt;/zclb&gt; &lt;zclb&gt;衣着&lt;/zclb&gt; &lt;zclb&gt;居住&amp
android studio下拉列表框
最新发布
09-23
通过Spinner的setAdapter()方法，你可以为下拉列表框添加适配器。适配器可以是ArrayAdapter或SimpleAdapter。如果你选择使用ArrayAdapter，需要指定一个布局文件来定义单个列表项目的样式。可以创建一个名为activity...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值