当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript调用XML制作连动下拉列表框

Javascript
javaScript 数值型和字符串型之间的转换
从父页面读取和操作iframe中内容方法
IE DOM实现存在的部分问题及解决方法
jqPlot Option配置对象详解
jquery JSON的解析方式
JavaScript 捕获窗口关闭事件
xml 封装与解析(javascript和C#中)
JavaScript 设计模式学习 Singleton
JavaScript 设计模式学习 Factory
javascript CSS画图之基础篇
JavaScript 获取事件对象的注意点
JavaScript Konami Code 实现代码
Google Map API更新实现用户自定义标注坐标
JavaScript this 深入理解
javascript EXCEL 操作类代码
window.parent调用父框架时 ie跟火狐不兼容问题
关于取不到由location.href提交而来的上级页面地址的解决办法
JS input 数字验证代码
网页全屏显示代码说明分析
JS 学习笔记 防止发生命名冲突

No. « 149 150 151 152 »

技术文章搜索

关键字

Javascript调用XML制作连动下拉列表框

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 260 ::
收藏到网摘: n/a

传统的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('====所有地区====','');
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 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='setsubclass(this[selectedIndex].text)'></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="推荐网站">
<subclass display_name="看上去很美">www.7say.com</subclass>
<subclass display_name="移动互联">www.xj139.com</subclass>
<subclass display_name="众信实业">www.xjzxsy.com</subclass>
</class>
<class display_name="门户网站">
<subclass display_name="新浪">www.sina.com</subclass>
<subclass display_name="搜狐">www.sohu.com</subclass>
</class>
<class display_name="其它网站">
<subclass display_name="蓝色理想">www.blueidea.com</subclass>
</class>
</item>