网站建设企通互联Javascript调用XML制作连动下拉框_网站制作 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

顶级网页配色教程(连载4)网页配色与网页布...
网页设计常用的XHTML标签的使用技巧介绍
 网站制作IIS站点建立
 网站建设Dreamweaver经典问题大搜罗(二)
北京网站制作第十一节超级链接
 网站设计Dreamweaver MX 2004 CSS列表属性
 网页设计Dreamweaver MX 2004从零开始(5)
网站制作dreamweaver中网页折叠菜单的制作
 北京网站制作Flash MX 2004编程教程(三)
北京网站制作FrontPage10全透视教程(16)

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网站制作 >> 网站建设企通互联Javascript调用XML制作连动下拉框

网站建设企通互联Javascript调用XML制作连动下拉框

作者：北京网站建设日期：2008-03-27 06:03:35 来源： http://www.qitongnet.com

资深北京网站建设公司企通互联,专业致力于北京网站建设, 网站建设北京网站制作,北京网站设计,北京网页设计领域,千余网站建设案例，公司拥有国内一流的网站建设、网站制作、网页设计团队，如果您已经有网站的,看看我们精美的网站建设案例也无妨.北京网站建设网址：http://www.qitongnet.com =======================================================================================

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

以下是引用片段：北京网页设计
<html> 企通互联
<head> 网站建设
<title>List</title> 网站制作
<meta http-equiv="Content-Type" content="text/html; c 北京网站制作
harset=gb2312"> www.qitongnet.com
<script LANGUAGE="javascript"> 企通互联
 北京网页设计
</script> 网页设计
</head> 网站建设
<body> 企通互联
<form method="post"> 北京网站制作
<select 企通互联
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)"> www.qitongnet.com
<option value="01" selected>上海</option> 北京网站设计
<option value="02">江西</option> 北京网站设计
</select> 网站建设
<select > 北京网站设计
<option selected value="">==所有地区==</option> 北京网站建设
</select> 网站建设
</form> 网站制作
<script LANGUAGE="javascript"> 北京网站制作
 企通互联
</script> www.qitongnet.com
</body> 北京网站设计
</html

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

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=""; www.qitongnet.com
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++){ www.qitongnet.com
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"); 网站设计 www.qitongnet.com
var i=0; 网站设计
var j=0; 北京网站设计
function deleteOption() { 北京网页设计
网站设计
} 北京网站设计
function setsubclass(main){ 网站设计
var is_selected="N"; www.qitongnet.com
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); www.qitongnet.com
} 北京网站设计
} 网站建设
北京网站设计网站设计
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){ www.qitongnet.com
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 > 北京网站制作
类型<SELECT ></SELECT> 网页设计
<option selected value="" ></option> 北京网站制作
子类<SELECT ></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> www.qitongnet.com
<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="通讯"> www.qitongnet.com
<subclass display_name="1156030001-1156080000">tongxun</subclass> 北京网站制作
</class> 网站设计
</item>

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

北京网站设计

网页设计

字体：【大】【中】【小】

上一篇：www.qitongnet.com简单form标准化实例——语义结构

下一篇：网站设计简易实现DIV圆角的JavaScript代码

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

网站建设企通互联Javascript调用XML制作连动下拉框