我跟你说说三级联动的大概流程吧。
首先页面接受第一层下拉框数据。这个应该不难。
然后通过Change_Select()来调用xmlrequest，到后台取第二个下拉框的数据，并且在callback函数中用js完成对第二个下拉框的填充。
第三个下拉框的实现也是一样，当第二个下拉框触发Change_Select2()时，再次从数据库获得第三个下拉框的数据，再在callback2函数中用js完成对第三个下拉框的填充。
三级联动分：AJAX版和JS版
AJAX版-----------------------------------------------------------------------
index.jsp
<%@ page contentType="text/html;charset=gb2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
创建下拉框函数： function BuildSel(str,sel){
sel.options.length=0;
var arrstr = new Array();
arrstr = str.split("|"); //回调数据被拆分成下拉项的字符数组
sel.options.add(new Option( "-----请选择-----",""));
if(str.length>0){
for(var i=0;i<arrstr.length;i++){
var subarrstr=new Array();
subarrstr=arrstr[i].split(","); //每项再次被拆分成下拉项的value,name对数组
if(subarrstr[1]!=" "&&subarrstr[1]!=null)
sel.options.add(new Option(subarrstr[1],subarrstr[0]));
}
sel.options[0].selected=true;
}
}
function GetResult(typeStr,dropid){ //创建Ajax对象
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送Ajax请求
var linkurl="dropData.jsp?typeStr="+typeStr+"&numValue="+dropid;
http_request.open("GET",linkurl,false);
http_request.send(null);
//获取回调数据
var returntxt=unescape(http_request.responseText.replace(" "));//空值转换
if(returntxt.length>0){
//document.all.ajax.innerHTML="服务器返回结果：<font color='red'>"+returntxt+"</font> [Powered by AJAX]"
if(typeStr=="wx") BuildSel(returntxt,document.getElementById('sel2'));
if(typeStr=="khdb") BuildSel(returntxt,document.getElementById('sel3'));
}else{document.all.ajax.innerHTML=""}
}
</script>
<form name="form1" method="post" action="">
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center">琥珀无限级联动菜单-AJAX版 [睿翔网络科技修改]</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="12%" height="24" align="center">行区:</td>
<td>sel1" onChange="GetResult('wx',this.value)">
<option value="" selected>-----请选择-----</option>
</select> <input type=text name=txt1 id=txt1 size=10>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">外县:</td>
<td>sel2" onChange="GetResult('khdb',this.value)"">
<option value="" selected>-----请选择-----</option>
</select> <input type=text name=txt2 id=txt2 size=10>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">客户代表:</td>
<td>sel3">
<option value="" selected>-----请选择-----</option>
</select> <input type=text name=txt3 id=txt3 size=10>
</td>
</tr>
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center" id="ajax"> </td>
</tr>
</table> <script language="JavaScript">
if (window.XMLHttpRequest) {
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} var linkurl="dropData.jsp?typeStr=xq";
http_request.open("GET",linkurl,false);
http_request.send(null); var returntxt=unescape(http_request.responseText)
BuildSel(returntxt,document.getElementById('sel1'));
</script>
</form>
</body>
</html>
//*********************************************************
dropData.jsp(连接数据库的JSP页面)
<%@ page contentType="text/html;charset=gb2312"%>
<% response.addHeader("Cache-Control","no-cache"); %>
<%@ page import="java.sql.*"%>
<%Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
String url="jdbc:oracle:thin:@130.36.30.209:1521:crm";
String user="crm";
String password="crmrnd";
String sqlStr="11";
Connection conn= DriverManager.getConnection(url,user,password);
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String typeStr = request.getParameter("typeStr");
String numValue = request.getParameter("numValue");
if(typeStr.equalsIgnoreCase("xq"))
sqlStr = "select * from crm_tbm_xq";
else if(typeStr.equalsIgnoreCase("wx"))
sqlStr = "select * from crm_tbm_wx where xq = '"+numValue+"'";
else if(typeStr.equalsIgnoreCase("khdb"))
sqlStr = "select * from crm_user_name Where wx = '"+numValue+"'";
ResultSet rs=stmt.executeQuery(sqlStr);
while(rs.next()){%><%=rs.getString(1) %>,<%=rs.getString(3) %>|<%}%> //"value,name | value,name"
<%rs.close();
stmt.close();
conn.close();
%>
js版----------------------------------------------------------------------------
<html>
<!--级联下拉列表-->
<head>
<script src="prototype-1.6.0.3.js"></script>
<script>
function doAction(index){
var arr = new Array;
arr[0] =[new Option('--研究方向--','-1')];
arr[1] =[new Option('商务英语','english1'),new Option('英美文学','english2')];
arr[2] =[new Option('网格计算','computer1'),new Option('计算机软件','computer2'),
new Option('图形计算','computer3')]; //$('s2').length = 0;
$('s2').innerHTML = '';
for(i=0;i<arr[index].length;i++){
$('s2').options[i] =arr[index][i];
} }
</script>
</head>
<body style="font-size:30px;">
<div id="d1">
<div id="d1_head">专业选择</div>
<div id="d1_content">
<form>
<select name="s1" id="s1" οnchange="doAction(this.selectedIndex);">
<option value="-1">--专业--</option>
<option value="english">英语</option>
<option value="computer">计算机</option>
</select>
<select name="s2" id="s2" style="width:120px;">
<option value="-1">--研究方向--</option>
</select>
<input type="submit" value="确认"/>
</form>
</div>
</div>
</body>
</html>
