Javascript 调用XML制作连动下拉框代码实例详解

互联网 17-3-7

传统的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分开，但,公开数据库的连接，从安全角度说，没有多少实用价值。

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 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="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>  <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="通讯">  <subclass display_name="1156030001-1156080000">tongxun</subclass>   </class>  </item>

以上就是Javascript 调用XML制作连动下拉框代码实例详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： Javascript，XML，下拉框