javascript調(diào)用XML制作連動下拉框_Xml教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      推薦：快速通過XSL轉(zhuǎn)換XML文件
      ＸＭＬ可以只注重數(shù)據(jù)與文件格式的描述，而顯示方面的工作就交給排版樣式表。排版樣式表分：CSS和XSL。其中XSL非常適合XML。 

 


　　最近，我喜歡上了ＸＭＬ編程，但又苦于它的美觀程度又
      傳統(tǒng)的HTML頁面中連動下拉框采用了兩種方法：
      

1）直接將下拉框中的內(nèi)容hardcode于html的javascript中，調(diào)用javascript函數(shù)循環(huán)寫入下拉框中。這種方法不適用于下拉框內(nèi)容經(jīng)常改變的情況。因?yàn)閿?shù)據(jù)源和javascript程序?qū)懰涝谕豁撁妗?br />

   
      

<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("徐匯區(qū)","01","001");
      

subcat[1] = new Array("嘉定區(qū)","01","002");
      

subcat[2] = new Array("黃浦區(qū)","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('====所有地區(qū)====',');
      

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="">==所有地區(qū)==</option>
      

</select>
      

</form>
      

<script LANGUAGE="javascript">
      

<!--
      

changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
      

//-->
      

</script>
      

</body>
      

</html>
      


       
      

2）javascript 直接讀取數(shù)據(jù)庫，取數(shù)據(jù)庫中的記錄寫入javascript中，然后和第一種方法一樣，調(diào)用javascript函數(shù)循環(huán)寫入下拉框中。此方法將數(shù)據(jù)源與javascript分開，但,公開數(shù)據(jù)庫的連接，從安全角度說，沒有多少實(shí)用價值。
      





      

我的方法是將下拉框中的數(shù)據(jù)放在XML文件中，用javascript讀XML文件，取得下拉框中的內(nèi)容。
      


      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 ;
      

}
      

//重復(fù)才有效
      

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中調(diào)用XML數(shù)據(jù)</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="網(wǎng)上注冊">
      

<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>
      


      此方法將數(shù)據(jù)源與javascript程序分開，適合經(jīng)常變化的數(shù)據(jù)源。xmlDoc.load中可以直接調(diào)用URL參數(shù),讀取遠(yuǎn)程XML，實(shí)現(xiàn)松耦合。以上應(yīng)用在IE6.0中通過。不足之處是在去除下拉框列表內(nèi)容時需要
      

重復(fù)執(zhí)行刪除操作，否則會有明顯的bug.希望有讀者能給指正。
      


       
      

       
      分享：利用XSL和ASP在線編輯XML文檔
      本文通過一個詳細(xì)的例子，來闡述了在線編輯XML文檔數(shù)據(jù)的方法。由于Netscape對XML的支持比較弱，因此，要實(shí)現(xiàn)跨平臺的數(shù)據(jù)交換，數(shù)據(jù)的處理必須在服務(wù)器端進(jìn)行。要編輯XML文檔，首先要做
      


      

      


      來源：模板無憂//所屬分類：Xml教程/更新時間：2008-08-22


      


      



      


      



      相關(guān)Xml教程：