自己写的一个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.chen

var 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" οnchange="get_list(1)">
</SELECT>
<SELECT id="area" NAME="area" οnchange="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>

 如果有好的意见,欢迎留言:)