AJAX级联下拉框的简单实现案例

需要的java类

package com.ajaxlab.ajax;
import java.util.arraylist;
import java.util.collection;
import java.util.iterator;
import org.jdom.document;
import org.jdom.element;
import org.jdom.input.saxbuilder;
import com.ajaxlab.ajax.productclass;

public class classservice {
   private document dom;
   public classservice(){
    try{
     saxbuilder builder=new saxbuilder();
     this.dom=builder.build(classservice.class.getresource("product.xml"));
    }catch(exception e){
    e.printstacktrace();
    }
   }
   public productclass[] getallclass1(){
    collection products=new arraylist();
    iterator iterator=this.dom.getrootelement().getchildren().iterator();
    do{
     element element=(element)iterator.next();
     productclass product=new productclass(element.getattributevalue("id"),
                                     element.getattributevalue("classname"));  
        products.add(product);
    }while(iterator.hasnext());
    return (productclass[])products.toarray(new productclass[0]);

   }

   public productclass[] getallclass2byid(string class1id){
    collection products=new arraylist();
    element classelement=null;
    iterator iterator=this.dom.getrootelement().getchildren().iterator();
    do{
     element element=(element)iterator.next();
     if(class1id.equalsignorecase(element.getattributevalue("id"))){
      classelement=element;
      break;
     }
    }while(iterator.hasnext());

    if(classelement!=null){
     iterator iter=classelement.getchildren().iterator();
     do{
      element element=(element)iter.next();
      productclass product=new productclass(element.getattributevalue("id"),
                                      element.getattributevalue("classname"));
               products.add(product);
     }while(iter.hasnext());
    return (productclass[])products.toarray(new productclass[0]);
    }
    else{
     return null;
    }
   }

 
   public productclass[] getallclass3byid(string class1id,string class2id) {
  collection products = new arraylist();
  element class1element = null;
  element class2element = null;

  iterator iterator = this.dom.getrootelement().getchildren().iterator();
  do {
   element element = (element)iterator.next();
   if(class1id.equalsignorecase(element.getattributevalue("id"))) {
    class1element = element;
    break;
   }
  }while(iterator.hasnext());

  if(class1element!=null) {
   iterator iter = class1element.getchildren().iterator();
   do {
    element element = (element)iter.next();
    if(class2id.equalsignorecase(element.getattributevalue("id"))) {
     class2element = element;
     break;
    }
   }while(iter.hasnext());

   if(class2element!=null) {
    iterator iter2 = class2element.getchildren().iterator();
    do {
     element element = (element)iter2.next();
     productclass product = new productclass(element.getattributevalue("id"),element.getattributevalue("classname"));
     products.add(product);
    }while(iter2.hasnext());
   }
   return (productclass[])products.toarray(new productclass[0]);
  }
  else return null;
}
}

<?xml version="1.0" encoding="utf-8"?>
<!doctype class system "product.dtd" >
<class>
  <class1 classname="电脑配件" id="1">
     <class2 classname="内存" id="1">
       <class3 id="1" classname="kingmax"></class3>
       <class3 id="2" classname="kingston"></class3>
       <class3 id="3" classname="samsung"></class3>
       <class3 id="4" classname="hydadi"></class3>
       <class3 id="5" classname="ibm"></class3> 
     </class2>
     <class2 classname="硬盘" id="2">
       <class3 id="6" classname="hithait"></class3>
       <class3 id="7" classname="ibm"></class3>
       <class3 id="8" classname="samsung"></class3>
       <class3 id="9" classname="westdata"></class3>
     </class2>
  </class1>

  <class1 classname="食品配件" id="2">
     <class2 classname="汉堡包" id="1">
       <class3 id="1" classname="麦当劳"></class3>
       <class3 id="2" classname="肯得基"></class3>
       <class3 id="3" classname="罗杰丝"></class3>
     </class2>
     <class2 classname="饮料" id="2">
       <class3 id="4" classname="cocacola"></class3>
       <class3 id="5" classname="sprite"></class3>
       <class3 id="6" classname="coffee"></class3>
       <class3 id="7" classname="water"></class3>
     </class2>
  </class1>
</class>

<?xml version="1.0" encoding="gb2312" ?>
<!element class (class1+)>
<!element class1 (class2+)>
<!attlist class1 classname nmtoken #required>
<!attlist class1 id nmtoken #required>
<!element class2 (class3+)>
<!attlist class2 classname nmtoken #required>
<!attlist class2 id nmtoken #required>
<!element class3 empty>
<!attlist class3 classname nmtoken #required>
<!attlist class3 id nmtoken #required>

jsp:
(1)getclass.jsp 充当业务层供ajax调用
<%@ page contenttype="text/html; charset=gb2312"%>
<%@ page import="com.ajaxlab.ajax.*"%>
<%
string class1id = request.getparameter("class1id");
string class2id = request.getparameter("class2id");
if("".equals(class1id)) class1id = null;
if("".equals(class2id)) class2id = null;
classservice service = new classservice();
if((class1id!=null)&&(class2id==null)) {
productclass[] classes = service.getallclass2byid(class1id);
if(classes!=null) {
  for(int i=0;i<classes.length;i++) {
   out.print(classes[i].getid()+","+classes[i].getclassname()+"|");
  }
}
}
else if((class1id!=null)&&(class1id!=null)) {
productclass[] classes = service.getallclass3byid(class1id,class2id);
if(classes!=null) {
  for(int i=0;i<classes.length;i++) {
   out.print(classes[i].getid()+","+classes[i].getclassname()+"|");
  }
}
}
%>

(2)divmenu.jsp
<%@ page contenttype="text/html; charset=gb2312"%>
<%@ page import="com.ajaxlab.ajax.*"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<script type="text/javascript" src="ajax_func.js" ></script>
<script type="text/javascript">

function dochange() {
var f = document.forms[0];
send_request("get","getclass.jsp?class1id="+f.select11.value+"&class2id=",null,"text",populateclass2);
}
function dochange2() {
var f = document.forms[0];
send_request("get","getclass.jsp?class1id="+f.select11.value+"&class2id="+f.select12.value,null,"text",populateclass3);
}
function populateclass2(){
     var f=document.forms[0];
     if(http_request.readystate==4){
       if(http_request.status==200){
          var list=http_request.responsetext;
          var classlist=list.split("|");
          f.select12.options.length=1;
          for(var i=0;i<classlist.length-1;i++){
            var temp=trim(classlist[i]).split(",");
            f.select12.add(new option(temp[1],temp[0]));
          }
       }
     }
}

  function populateclass3(){
     var f=document.forms[0];
     if(http_request.readystate==4){
       if(http_request.status==200){
          var list=http_request.responsetext;
          var classlist=list.split("|");
          f.select13.options.length=1;
          for(var i=0;i<classlist.length-1;i++){
            var temp=trim(classlist[i]).split(",");
            f.select13.add(new option(temp[1],temp[0]));
          }
       }
     }
   }
   function ltrim(str)
{
    var whitespace = new string(" /t/n/r");
    var s = new string(str);
    if (whitespace.indexof(s.charat(0)) != -1)
    {
        var j=0, i = s.length;
        while (j < i && whitespace.indexof(s.charat(j)) != -1)
        {
            j++;
        }
        s = s.substring(j, i);
    }
    return s;
}
function rtrim(str)
{
    var whitespace = new string(" /t/n/r");
    var s = new string(str);
    if (whitespace.indexof(s.charat(s.length-1)) != -1)
    {
        var i = s.length - 1;
        while (i >= 0 && whitespace.indexof(s.charat(i)) != -1)
        {
            i--;
        }
        s = s.substring(0, i+1);
    }
    return s;
}
function trim(str)
{
    return rtrim(ltrim(str));
}
</script>
<%
  classservice service = new classservice();
  productclass[] classes = service.getallclass1();
%>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>insert title here</title>
</head>
<body><center>
<form name="classform" method="post" action="">
<select name="select11" id="select11" onchange="dochange(this.value)">
<option value="">请选择分类一</option>
<%
for(int i=0;i<classes.length;i++) {
  out.println("<option value='"+classes[i].getid()+"'>"+classes[i].getclassname()+"</option>");
}
%>
</select>

<select name="select12" id="select12" onchange="dochange2(this.value)">
<option value="">请选择分类二</option>
</select>

<select name="select13" id="select13">
<option value="">请选择分类三</option>
</select>
</form>
</center></body>
</html>