AJAX级联下拉框的简单实现案例_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>

时间： 2024-10-31 08:22:00

AJAX级联下拉框的简单实现案例_AJAX相关的相关文章

AJAX级联下拉框的简单实现案例

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

ajax级联下拉框

问题描述 学校已经是动态读取了,根据学校读取年级,根据年级读取到班级!是从数据库里读的!ajax访问即可!求大神指点一二! 解决方案 解决方案二:在学校的onchange事件中,发送ajax请求啊.解决方案三:首先第一个下拉框选中一条数据以后,出发onchange时间,利用Ajax去后台根据你选的数据查询数据,然后拼字符串,再在前台将option拼出来..这是思路,具体的实现代码网上有很多.解决方案四:2楼正解解决方案五:二楼正解解决方案六:楼上都是正解解决方案七:5楼才是正解解决方案八:这就是

ajax 自动完成下拉框 自动提示位置问题_AJAX相关

下拉提示跟着 MOuse 走的..想把他改成在文本框下出来的那种怎么改   日期 制造号码 作业内容  

ASP.NET实现级联下拉框效果实例讲解_实用技巧

用ASP.NET控件实现部门和员工的联动,参考过程如下效果图:  Default.aspx代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/199

jQuery+PHP+MySQL实现无限级联下拉框效果_jquery

 本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下  效果图: 图1 仅下拉框 图2 层级提示+下拉框 图3 存储数据点击响应 主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Conten

Ajax实现简单下拉选项效果【推荐】_AJAX相关

基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作 1.HTML代码里就只有两个SELECT标签如下: <select id="province"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> 2.Javascript中进行创建选项和执行AJAX

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

基于jquery的无限级联下拉框js插件_jquery

灵活性方面考虑了比较多的方面,提供了几个重要的配置方便在各类环境下使用,欢迎各位童鞋使用,源码完全开放.开发这个插件的缘于前段时间维护一个4级级联下拉框被里面200行代码及复杂的结构和bug所郁闷(之所以这么多代码是因为该级联下拉框有时只出现2个或3个),想到这类的需求其实经常都能遇到,jquery里没有这样比较好的插件,索性自己开发个.源代码并不复杂,稍微复杂的地方在第二个插件使用了缓存,造成理解起来十分困难,后面会做些解释. 插件一:适合在不与服务器进行AJAX交互情况使用,需预先将所有下拉

JQuery实现级联下拉框效果实例讲解_jquery

用JQuery和select来实现汽车厂商和汽车类型的联动,参考过程如下效果图:      逻辑分析图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh