ajax实现动态级联列表框

 这是前台的页面的代码：

< html >
   < head >   
   </ head >
   < script  language ="javascript"  type ="text/javascript" > ...
  var xmlHttp;
  function createXMLHttpRequest()
  ...{
     if(window.ActiveXObject)
     ...{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if(window.XMLHttpRequest)
     ...{
        xmlHttp=new XMLHttpRequest();
     }
  }
  
  function select_change()
  ...{
     var depart=document.getElementById("depart").value;
     if(depart!=null)...{
          createXMLHttpRequest();
          var url="deal.jsp?depart="+depart;
          xmlHttp.open("GET",url,true);
          xmlHttp.onreadystatechange=showMember;
          xmlHttp.send(null);
          }
  }
  
  function showMember()
  ...{
     if(xmlHttp.readyState==4)
     ...{
        if(xmlHttp.status==200)
        ...{
           var membersData=xmlHttp.responseXML.getElementsByTagName("member");
           
           var membersSelect=document.getElementById("member");
           var option=null;
           membersSelect.options.length=0;
           
           for(var i=0;i<membersData.length;i++)
           ...{
             var mdisplay=membersData[i].childNodes[0].firstChild.nodeValue;
             var mvalue=membersData[i].childNodes[1].firstChild.nodeValue;
             var option=new Option(mvalue,mdisplay);
             try
             ...{
                membersSelect.appendChild(option);
             }
             catch(e)
             ...{
                alert(e);
             }
           }
        }
        else
        ...{
           alert("您请求的页面有异常！");
        }
     }
     else
     ...{
     }
  }
   </ script >
   < body > 部门: < select   id ="depart"  onChange ="select_change()" >
< option  value ="null" > --请选择-- </ option >
< option  value ="d1" > 部门1 </ option >
< option  value ="d2" > 部门2 </ option >
< option  value ="d3" > 部门3 </ option >
< option  value ="d4" > 部门4 </ option >
</ select >

职员: < select  id ="member"  multiple ="true"  width =20 ></ select >

   </ body >
</ html >

 

这是后台处理页面的代码：

 

<% @ page language = " java "  contentType = " text/heml;charset=gb2312 " %>
<% @ page  import = " java.util.* "    %>
<%
  String depart = request.getParameter( " depart " );
   if (depart == null ) depart = " d1 " ;
  StringBuffer sb = new  StringBuffer();
  sb.append( " <member> " );
  
  Map map = new  HashMap();
  String d1 = " <member><id>1001</id><name>成员一</name></member><member><id>1002</id><name>成员二</name></member> " ;
  String d2 = " <member><id>1003</id><name>成员三</name></member><member><id>1004</id><name>成员四</name></member> " ;
  String d3 = " <member><id>1005</id><name>成员五</name></member><member><id>1006</id><name>成员六</name></member> " ;
  String d4 = " <member><id>1007</id><name>成员七</name></member><member><id>1008</id><name>成员八</name></member> " ;
  map.put( " d1 " ,d1);
  map.put( " d2 " ,d2);
  map.put( " d3 " ,d3);
  map.put( " d4 " ,d4);
  
  sb.append(map.get(depart).toString());
  sb.append( " </member> " );
  response.setContentType( " text/xml " );
  out.write(sb.toString());
%>

 

    该简单的实例是用一个哈希表模拟了服务器端的数据库。将事先定义好的XML数据直接以部门值为主键存入数据

库中，再从客户端接收到部门值时，再查询哈希表取得对应的值，然后封装好后添加到要显示的列表框中；