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>