java AJAX實作級聯下拉框

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(" "); 
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(" "); 
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=&#39;"+classes[i].getId()+"&#39;>"+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>

更多java AJAX實現級聯下拉框相關文章請關注PHP中文網！