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


Posted in Javascript onJune 25, 2006

传统的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>

Javascript 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
vue实现图片上传到后台
Jun 29 Javascript
网页里控制图片大小的相关代码
Jun 25 #Javascript
如何取得中文输入的真实长度?
Jun 24 #Javascript
快速保存网页中所有图片的方法
Jun 23 #Javascript
网页常用特效代码整理
Jun 23 #Javascript
文本加密解密
Jun 23 #Javascript
解密效果
Jun 23 #Javascript
CheckBox 如何实现全选?
Jun 23 #Javascript
You might like
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python中每次处理一个字符的5种方法
2015/05/21 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python实现控制台进度条功能
2016/01/04 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python导入库的具体方法
2020/06/18 Python
2014年上半年工作自我评价
2014/01/18 职场文书
网络工程师职业规划
2014/02/10 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
化工实习心得体会
2014/09/09 职场文书
家长会开场白和结束语
2015/05/29 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Python实现智慧校园自动评教全新版
2021/06/18 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android