本篇文章主要是對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>
