Javascript调用XML制作连动下拉框代码实例详解

作者：Tibetan-妍自_557 | 来源：互联网 | 2017-05-14 02:24

传统的HTML页面中连动下拉框采用了两种方法：1）直接将下拉框中的内容hardcode于html的javascript中，调用Javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和javascript程序写死在同一页面。

传统的HTML页面中连动下拉框采用了两种方法：
1）直接将下拉框中的内容hardcode于html的Javascript中，调用Javascript函数循环写入下拉框中。这种方法不适用于下拉框内容经常改变的情况。因为数据源和Javascript程序写死在同一页面。

2）Javascript 直接读取数据库，取数据库中的记录写入Javascript中，然后和第一种方法一样，调用Javascript函数循环写入下拉框中。此方法将数据源与Javascript分开，但,公开数据库的连接，从安全角度说，没有多少实用价值。

我的方法是将下拉框中的数据放在xml文件中，用Javascript读XML文件，取得下拉框中的内容。

HTML 文件如下：








 
类型

子类



account.xml 如下：




Not Available 


dangdang1 
dangdang2
dangdang3
dangdang4
dangdang5
dangdang6


zhuce_user1 
zhuce_user2


tongxun

此方法将数据源与Javascript程序分开，适合经常变化的数据源。xmlDoc.load中可以直接调用URL参数,读取远程XML，实现松耦合。以上应用在IE6.0中通过。不足之处是在去除下拉框列表内容时需要
重复执行删除操作，否则会有明显的bug.希望有读者能给指正。

以上就是Javascript 调用XML制作连动下拉框代码实例详解的内容，更多相关内容请关注PHP中文网（www.php1.cn）！

推荐阅读

web
Java序列化对象传给PHP的方法及原理解析

本文介绍了Java序列化对象传给PHP的方法及原理，包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用，以及代码执行序列化所需要的权限。最后指出，序列化会将对象实例的所有字段都进行序列化，使得数据能够被表示为实例的序列化数据，但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]

蜡笔小新 2023-12-14 15:25:15
web
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
java
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
java
SpringBoot集成前端模版（thymeleaf）的配置步骤

本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]

蜡笔小新 2023-12-14 10:11:46
web
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
web
南邮ctf-web的writeup

本文介绍了南邮ctf-web的writeup，包括签到题和md5 collision。在CTF比赛和渗透测试中，可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型，可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]

蜡笔小新 2023-12-13 10:58:55
web
CentOS 7部署KVM虚拟化环境之一架构介绍

本文介绍了CentOS 7部署KVM虚拟化环境的架构，详细解释了虚拟化技术的概念和原理，包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]

蜡笔小新 2023-12-12 21:38:57
ip
使用cacti监控mssql 2005运行资源情况的操作步骤

本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤，包括安装必要的工具和驱动，测试mssql的连接，配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值，实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]

蜡笔小新 2023-12-12 13:57:58
ip
javascript入门·表单与表单元素总结（表单验证）

表单提交前的最后验证：通常在表单提交前，我们必须确认用户是否都把必须填选的做了，如果没有，就不能被提交到服务器，这里我们用到表单的formname.submit()看演示，其实这个对于我们修炼道 ... [详细]

蜡笔小新 2023-10-15 18:44:55
ip
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

但有时候，需要当某事件触发时，我们先做一些操作，然后再跳转，这时，就要用JAVASCRIPT来实现这一跳转功能。下面是具体的做法：一：跳转到新页面，并且是在新窗口中打开时:复制代码代码如下:fu ... [详细]

蜡笔小新 2023-10-13 12:25:13
ip
如何实现织梦DedeCms全站伪静态

本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态，以提高管理和SEO效果。全站伪静态可以避免重复URL的问题，同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式，可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具，如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]

蜡笔小新 2023-12-14 19:45:47
ip
iOS超签签名服务器搭建及其优劣势

本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]

蜡笔小新 2023-12-11 20:23:23
ip
JavaScript - let和var区别

前提ES5只有函数作用域和全局作用域，var属于ES5。let属于ES6，新增块级作用域。目的是可以写更安全的代码。Theletstatementdeclaresablocks ... [详细]

蜡笔小新 2023-10-13 18:33:54
ip
用JavaScript实现的太空人手表

用JavaScript实现的太空人手表-JS写的太空人手表，没有用canvas、svg。主要用几个大的函数来动态显示时间、天气这些。天气的获取用到了AJAX请求。代码中有详细的注释 ... [详细]

蜡笔小新 2023-10-13 17:21:38
ip
使用粘性页眉和页脚切换侧栏 - Toggle Sidebar with sticky header and footer

Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]

蜡笔小新 2023-10-13 12:28:22

Tibetan-妍自_557

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章