html5中文学习网

您的位置: 首页 > 网站及特效实例 > jquery特效 » 正文

AJAX级联下拉框的简单实现案例_编程语言综合

2014-02-26 13:03:17 [小 大] 已经帮助：人解决问题

 本篇文章主要是对AJAX级联下拉框的简单实现案例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助y2CHTML5中文学习网 - HTML5先行者学习网

需要的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>
 
赞
    相关文章
    （责任编辑：）
    推荐书籍
    推荐资讯
    关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助

    CopyRight © 2011-2018 html5中文学习网 html5cn.Com.cn, All Rights Reserved. 京ICP备18048875号