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

2019-09-14 07:10:59刘景俊

     </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];