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

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