java AJAX实现级联下拉框

 更新时间:2008年09月14日 20:52:22   作者:  
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(" ");
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='"+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>

相关文章

  • JSP中实现判断客户端手机类型并跳转到app下载页面

    JSP中实现判断客户端手机类型并跳转到app下载页面

    这篇文章主要介绍了JSP中实现判断客户端手机类型并跳转到app下载页面,实现的原理,是检测浏览器的 USER-AGENT 这个header,然后根据正则表达式来确定客户端类型,需要的朋友可以参考下
    2014-09-09
  • JSP中EL表达式的用法详解(必看篇)

    JSP中EL表达式的用法详解(必看篇)

    下面小编就为大家带来一篇JSP中EL表达式的用法详解(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • jsp页面数据分页模仿百度分页效果(实例讲解)

    jsp页面数据分页模仿百度分页效果(实例讲解)

    下面小编就为大家带来一篇jsp页面数据分页模仿百度分页效果(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 基于JSP 自定义标签使用实例介绍

    基于JSP 自定义标签使用实例介绍

    本篇文章小编为大家介绍,基于JSP 自定义标签使用实例介绍,需要的朋友参考下
    2013-04-04
  • JSP之EL表达式基础详解

    JSP之EL表达式基础详解

    这篇文章主要介绍了JSP之EL表达式基础详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JSP动态网页开发原理详解

    JSP动态网页开发原理详解

    这篇文章主要介绍了JSP动态网页开发原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • JSP实用教程之简易文件上传组件的实现方法(附源码)

    JSP实用教程之简易文件上传组件的实现方法(附源码)

    文件上传是我们在日常开发中经常遇到的一个功能,下面这篇文章主要给大家介绍了关于JSP实用教程之简易文件上传组件的实现方法,文中通过示例代码介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-07-07
  • JSP开发之hibernate之单向多对一关联的实例

    JSP开发之hibernate之单向多对一关联的实例

    这篇文章主要介绍了JSP开发之hibernate之单向多对一关联的实例的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下
    2017-09-09
  • JavaScript实现城市选择控件的效果

    JavaScript实现城市选择控件的效果

    本文介绍了JavaScript实现城市选择控件的效果,支持直接输入城市名称,拼音首字母,全拼,有需要的朋友可以了解一下。
    2016-10-10
  • 详解Spring Controller autowired Request变量

    详解Spring Controller autowired Request变量

    这篇文章主要介绍了详解Spring Controller autowired Request变量的相关资料,通过此文希望能帮助到大家,需要的朋友可以参考下
    2017-08-08

最新评论