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>