用户名: 密码: 免费注册 忘记密码? 网站地图 | 加入收藏 | 设为首页
首页 | 新闻 | 工具 | 系统 | 办公 | 聊天 | 多媒体 | 网页 | 运营 | 平面 | 欣赏 | 数据库 | 程序 | 服务器 | 组网
网页 | 3dmax | Ghost | Windows Xp| Dreamweaver | photoshop | Flash | office | Alexa | Css | QQ | Asp | PHP | Jsp | Access
Flash MX 2004入门 | 网站推广策略 | CorelDRAW入门 | ASP学习 | 网站建设大师功 | Word入门
  iTbulo.com > 学院 > 网页制作教程 > Javascript教程 > 正文
Javascript调用XML制作连动下拉框
iTbulo.COM 2007-3-1 天极()

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 > 
类型<SELECT ></SELECT>
<option selected value=""  ></option>
子类<SELECT ></SELECT>
</form>
</body>
</html>

上一页  [1] [2] [3] 下一页

文章搜索
相关资讯
相关文章 相关下载
用来实现Web页面图片移动托拽的代码段
开发跨浏览器JavaScript时要注意的问题
javascript分页
JavaScript技巧:让网页自动穿上外套
实例:使用Javascript制作声音按钮
焦点信息