级联下拉框

级联下拉框 需要的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" οnchange="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" οnchange="doChange2(this.value)"> <option value="">请选择分类二</option> </select> <select name="select13" id="select13"> <option value="">请选择分类三</option> </select> </form> </center></body> </html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于 PHP 技术实现的级联下拉框的示例代码,其中包含三个下拉框。 HTML 代码: ```html <select id="category1" onchange="getCategory2()"> <option value="">请选择分类1</option> <option value="1">分类1-1</option> <option value="2">分类1-2</option> <option value="3">分类1-3</option> </select> <select id="category2" onchange="getCategory3()"> <option value="">请选择分类2</option> </select> <select id="category3"> <option value="">请选择分类3</option> </select> ``` JavaScript 代码: ```javascript function getCategory2() { var category1 = document.getElementById("category1").value; if (category1 != '') { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var category2 = document.getElementById("category2"); category2.innerHTML = "<option value=''>请选择分类2</option>" + xhr.responseText; document.getElementById("category3").innerHTML = "<option value=''>请选择分类3</option>"; } }; xhr.open("GET", "getCategory2.php?category1=" + category1, true); xhr.send(); } else { document.getElementById("category2").innerHTML = "<option value=''>请选择分类2</option>"; document.getElementById("category3").innerHTML = "<option value=''>请选择分类3</option>"; } } function getCategory3() { var category2 = document.getElementById("category2").value; if (category2 != '') { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var category3 = document.getElementById("category3"); category3.innerHTML = "<option value=''>请选择分类3</option>" + xhr.responseText; } }; xhr.open("GET", "getCategory3.php?category2=" + category2, true); xhr.send(); } else { document.getElementById("category3").innerHTML = "<option value=''>请选择分类3</option>"; } } ``` PHP 代码(getCategory2.php): ```php <?php $category1 = $_GET["category1"]; if ($category1 == "1") { echo "<option value='1-1'>分类1-1-1</option><option value='1-2'>分类1-1-2</option>"; } else if ($category1 == "2") { echo "<option value='2-1'>分类1-2-1</option><option value='2-2'>分类1-2-2</option>"; } else if ($category1 == "3") { echo "<option value='3-1'>分类1-3-1</option><option value='3-2'>分类1-3-2</option>"; } ?> ``` PHP 代码(getCategory3.php): ```php <?php $category2 = $_GET["category2"]; if ($category2 == "1-1") { echo "<option value='1-1-1'>分类1-1-1-1</option><option value='1-1-2'>分类1-1-1-2</option>"; } else if ($category2 == "1-2") { echo "<option value='1-2-1'>分类1-1-2-1</option><option value='1-2-2'>分类1-1-2-2</option>"; } else if ($category2 == "2-1") { echo "<option value='2-1-1'>分类1-2-1-1</option><option value='2-1-2'>分类1-2-1-2</option>"; } else if ($category2 == "2-2") { echo "<option value='2-2-1'>分类1-2-2-1</option><option value='2-2-2'>分类1-2-2-2</option>"; } else if ($category2 == "3-1") { echo "<option value='3-1-1'>分类1-3-1-1</option><option value='3-1-2'>分类1-3-1-2</option>"; } else if ($category2 == "3-2") { echo "<option value='3-2-1'>分类1-3-2-1</option><option value='3-2-2'>分类1-3-2-2</option>"; } ?> ``` 在这个示例中,我们使用了三个下拉框,其中第一个下拉框的选项会影响第二个下拉框的选项,第二个下拉框的选项则会影响第三个下拉框的选项。在选择第一个下拉框的选项时,会通过 PHP 脚本获取第二个下拉框的选项数据,并更新第二个下拉框的选项。在选择第二个下拉框的选项时,会通过 PHP 脚本获取第三个下拉框的选项数据,并更新第三个下拉框的选项。希望这个示例对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值