自己寫的一個Ajax連動下拉框組

代碼就真的不怎麼樣,看了都不太爽,之後再改掉.轉貼請註明原著,謝謝.

ajax比較省系統資源.因為這樣總比反覆的DB request好得多.先頂著了.

本來這個還有個和web-service,但出於個人原因,就只放出讀取XML的例子

xml 部分:

 <?xml version="1.0" encoding="utf-8" ?>

- <root> - <Local>   <ID> 1</ID>   <Name> 廣東</Name>   <Parent> 0</Parent>   </Local> - <Local>   <ID> 2</ID>   <Name> 福建</Name>   <Parent> 0</Parent>   </Local> - <Local>   <ID> 3</ID>   <Name> 廣州</Name>   <Parent> 1</Parent>   </Local> - <Local>   <ID> 4</ID>   <Name> 福州</Name>   <Parent> 2</Parent>   </Local> - <Local>   <ID> 5</ID>   <Name> 東山區</Name>   <Parent> 3</Parent>   </Local> - <Local>   <ID> 6</ID>   <Name> 越秀區</Name>   <Parent> 3</Parent>   </Local> - <Local>   <ID> 7</ID>   <Name> 白雲區</Name>   <Parent> 3</Parent>   </Local> - <Local>   <ID> 8</ID>   <Name> 天河區</Name>   <Parent> 3</Parent>   </Local> - <Local>   <ID> 9</ID>   <Name> 福州內區</Name>   <Parent> 4</Parent>   </Local></root>

js部分:<script language="javascript">
var cache;
var cachevalue;
var nownum=1;//hyde.chenvar hyde;

XmlHttp請求-->
function createXMLHttp()
{
    var ret = null;
    try {
        ret = new ActiveXObject('Msxml2.XMLHTTP');
       
    }
    catch (e) {
        try {
            ret = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (ee) {
            ret = null;
        }
    }
    if (!ret && typeof XMLHttpRequest != 'undefined')
        ret = new XMLHttpRequest();
 if (!ret)
 {
  alert("建立XMLHttpRequest失敗！")
 }
    return ret;
}

讀取處理模組

function loadXmlToList(vv,oo,cc)
{
 var xmlhttp = createXMLHttp();
 xmlhttp.onreadystatechange = function()    //ajax回調
  {
   try{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
     
     xmldoc=xmlhttp.responseXML
     if (xmldoc!=null)
     {
      node = xmldoc.lastChild.childNodes;
      for(var i=0; i<node.length; i++){
       node1 = node.item(i).selectSingleNode("ID");
       node2 = node.item(i).selectSingleNode("Name");
       node3= node.item(i).selectSingleNode("Parent");
       if (node3.text==vv)
       {
        var oOption = document.createElement("OPTION");
        oOption.text=node2.text;
        oOption.value=node1.text;
        //if (i==0) oOption.selected=true;
        oo.add(oOption);
       }
       
      }
      if (oo.options.length>0) nownum+=1;
      else return;
       if(nownum<cc.length && oo.options.length>0 && cc.length>2)
       {
        dataBing(nownum,cc);
       }
     }

    }   }
   catch(e)
   {
    //alert("Error："+e.message); 
    //setTimeout("get_list(cache)",10000);
   }
   
  }
  xmlhttp.open("GET", "local.xml",true);
  xmlhttp.send(null);
}

list change 事件

function get_list(aa)
{
 
 var b =getArray(aa)
 //for(i=1;i<b.length;i++)  //因為考慮到連動處理,必須等回呼函數處理完才能進行下一個list的處理
 if (b.length>1)
  {
   dataBing(1,b);
  }
}list清除和調用ajax
function dataBing(i,c)
{
  var listobj = document.getElementById(c[i])
  if(listobj!=null)
  {
   cachevalue=document.getElementById(c[i-1]).options[document.getElementById(c[i-1]).selectedIndex].value;
   cache=c;
   var count=listobj.options.length;
   for(var n=0;n<count;n++)
   {
    listobj.remove(0);
   }
   xmldoc =loadXmlToList(cachevalue,listobj,cache);
  }else
  {
   alert('載入資料不成功！');
  }}

得到list處理數組
function getArray(vv)
{
 nownum=1;
 switch(vv)
 {
  
  case 1:
   var o = new Array('local','area','ring');
   return o;
  case 2:
   var o = new Array('area','ring');
   return o;
  default:
   return null;
 }
}Html部分

<form id="Form1" method="post">
<div id="login">
<SELECT id="local" name="local" onchange="get_list(1)">
</SELECT>
<SELECT id="area" NAME="area" onchange="get_list(2)">
</SELECT>
<SELECT id="ring" NAME="ring">
</SELECT>
</div>
</form>

初始化:

  <script>
   nownum=1;   //計數器,用來計算list個數
   var intobj = document.getElementById("local");  得到第一個下拉框
   var o = new Array('null','local','area','ring');
   loadXmlToList(0,intobj,o)
  </script>

 如果有好的意見,歡迎留言:)