Javascript 调用XML制作连动下拉框代码实例详解-XML/RSS教程-PHP中文网

首页

后端开发

XML/RSS教程

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

黄舟

Mar 07, 2017 pm 04:29 PM

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

<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; c
harset=gb2312">
<script LANGUAGE="javascript">
<!--
var onecount;
onecount=0;
subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");
onecount=6;
function changelocation(locationid)
{
document.myform.smalllocation.length = 0;
var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option(&#39;====所有地区====&#39;,&#39;&#39;);
for (i=0;i <onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length]
= new Option(subcat[i][0], subcat[i][2]);
}
}
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>

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

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

HTML 文件如下：

<!-- myfile.html -->
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
var subclass_name="";
loadXML();
function loadXML(){
xmlDoc.async="false";
xmlDoc.load("account.xml");
xmlObj=xmlDoc.documentElement; 
nodes = xmlDoc.documentElement.childNodes;
document.frm.mainclass.options.length = 0; 
document.frm.subclass.options.length = 0;
for (i=0;i<xmlObj.childNodes.length;i++){
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
document.frm.mainclass.add(document.createElement("OPTION"));
document.frm.mainclass.options[i].text=labels; 
document.frm.mainclass.options[i].value=values;
}
}

</script>
<script language="JavaScript" >
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
function deleteOption() {
    
}
function setsubclass(main){
var is_selected="N";
if (document.frm.subclass.options.length!=0) { 
for (i=0;i<=document.frm.subclass.options.length;i++)
document.frm.subclass.options[i]=null ;
}
//重复才有效
if (document.frm.subclass.options.length!=0) { 
for (i=0;i<=document.frm.subclass.options.length;i++){
document.frm.subclass.options[i]=null ;
document.frm.subclass.options.remove(i);
}
}

for (i=0;i<xmlObj.childNodes.length;i++){
var values="";
var lables="";
if (is_selected=="Y") return;
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
//alert(labels+ " | "+main);
if (labels==main){
is_selected="Y";
for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){
//subclass_name="document.frm.subclass";
labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name");
values=xmlObj.childNodes(i).childNodes(j).text;
//alert(values); 
document.frm.subclass.add(document.createElement("OPTION"));
document.frm.subclass.options[j].text=labels; 
document.frm.subclass.options[j].value=values;
}
}
}
}
</script>
<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm"> 
类型<SELECT NAME="mainclass" OnChange=&#39;setsubclass(this[selectedIndex].text)&#39;></SELECT>
<option selected value=""  ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>
account.xml 如下：

<?xml version="1.0" encoding="GB2312"?>
<item>
<class display_name="未选定">
<subclass display_name="">Not Available</subclass> 
</class>
<class display_name="95788主叫卡">
<subclass display_name="1152069589-1152069638">dangdang1</subclass> 
<subclass display_name="1152081031-1152081080">dangdang2</subclass>
<subclass display_name="1152547201-1105254750">dangdang3</subclass>
<subclass display_name="1152548401-1152548700">dangdang4</subclass>
<subclass display_name="1152548701-1152549000">dangdang5</subclass>
<subclass display_name="1156000001-1156010000">dangdang6</subclass>
</class>
<class display_name="网上注册">
<subclass display_name="1152000001-1152001000">zhuce_user1</subclass> 
<subclass display_name="1151001000-1151005000">zhuce_user2</subclass>
</class>
<class display_name="通讯">
<subclass display_name="1156030001-1156080000">tongxun</subclass> 
</class>
</item>

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

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

用XML建造供稿：RSS的动手指南Apr 14, 2025 am 12:17 AM

使用XML构建RSSfeed的步骤如下：1.创建根元素并设置版本；2.添加channel元素及其基本信息；3.添加条目（item）元素，包括标题、链接和描述；4.转换XML结构为字符串并输出。通过这些步骤，你可以从零开始创建一个有效的RSSfeed，并通过添加额外的元素如发布日期和作者信息来增强其功能。

创建RSS文档：逐步教程Apr 13, 2025 am 12:10 AM

创建RSS文档的步骤如下：1.使用XML格式编写，根元素为，包含元素。2.在内添加、、等元素描述频道信息。3.添加元素，每个代表一个内容条目，包含、、、等。4.可选地添加和元素，丰富内容。5.确保XML格式正确，使用在线工具验证，优化性能并保持内容更新。

XML在RSS中的作用：联合内容的基础Apr 12, 2025 am 12:17 AM

XML在RSS中的核心作用是提供一种标准化和灵活的数据格式。1.XML的结构和标记语言特性使其适合数据交换和存储。2.RSS利用XML创建标准化格式，方便内容共享。3.XML在RSS中的应用包括定义feed内容的元素，如标题和发布日期。4.优势包括标准化和可扩展性，挑战包括文件冗长和严格语法要求。5.最佳实践包括验证XML有效性、保持简洁、使用CDATA和定期更新。

从XML到可读的内容：揭开RSS feed的神秘面纱Apr 11, 2025 am 12:03 AM

rssfeedsarexmldocuments usedforcontentAggregation and distribution.totransformthemintoreadableContent：1）parsethethexmlusinglibrarieslibrariesliblarieslikeparserinparserinpython.2）andledifferentifferentrssssssssssssssssssssssssssssssssssssssssssssssersions andpotentionparsingrorS.3）

是否有基于JSON的RSS替代方案？Apr 10, 2025 am 09:31 AM

JSONFeed是一种基于JSON的RSS替代方案，其优势在于简洁性和易用性。1)JSONFeed使用JSON格式，易于生成和解析。2)它支持动态生成，适用于现代Web开发。3)使用JSONFeed可以提升内容管理效率和用户体验。

RSS文档工具：构建，验证和发布提要Apr 09, 2025 am 12:10 AM

如何构建、验证和发布RSSfeeds？1.构建：使用Python脚本生成RSSfeed，包含标题、链接、描述和发布日期。2.验证：使用FeedValidator.org或Python脚本检查RSSfeed是否符合RSS2.0标准。3.发布：将RSS文件上传到服务器，或使用Flask动态生成并发布RSSfeed。通过这些步骤，你可以有效管理和分享内容。

确保您的XML/RSS提要：全面的安全清单Apr 08, 2025 am 12:06 AM

确保XML/RSSfeeds安全性的方法包括：1.数据验证，2.加密传输，3.访问控制，4.日志和监控。这些措施通过网络安全协议、数据加密算法和访问控制机制来保护数据的完整性和机密性。

XML/RSS面试问题和答案：提高您的专业知识Apr 07, 2025 am 12:19 AM

XML是一种标记语言，用于存储和传输数据，RSS是一种基于XML的格式，用于发布频繁更新的内容。1）XML通过标签和属性描述数据结构，2）RSS定义特定标签发布和订阅内容，3）使用Python的xml.etree.ElementTree模块可以创建和解析XML，4）XPath表达式可查询XML节点，5）feedparser库可解析RSSfeed，6）常见错误包括标签不匹配和编码问题，可用xmllint验证，7）使用SAX解析器处理大型XML文件可优化性能。

See all articles