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 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 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
php设计模式 Template (模板模式)
2011/06/26 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
python下os模块强大的重命名方法renames详解
2017/03/07 Python
有趣的python小程序分享
2017/12/05 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python路径的写法及目录的获取方式
2019/12/26 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python计算二维矩形IOU实例
2020/01/18 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
自我鉴定范文300字
2013/10/01 职场文书
个人求职信范文分享
2014/01/31 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
给校长的建议书400字
2014/05/15 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
2016党员入党决心书
2015/09/22 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
2019入党申请书格式
2019/06/25 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS