一、初始化工作：
1.一个封装了数据查询的JavaBean(当前为SqlDispose)
2.数据库的结构（及数据）如下：
id name spec model place
----------- ---------- ---------- ---------- ----------
1 电脑 IBM 台式机 1#
2 电脑 IBM 笔记本 1#
3 电脑 IBM 服务器 1#
4 电脑 联想 台式机 1#
5 电脑 联想 笔记本 1#
6 电脑 联想 服务器 1#
7 电脑 宏基 平板电脑 1#
8 机械 小松 挖掘机 1#
9 电脑 IBM 台式机 2#
当然，如上的数据库结构可以改成一对多关系的多个关（仅需要修改部分内容）。
二、两个关键文件（changeSelect.js,xml.jsp）
//changeSelect.js
/*--得到远程数据--*/
var oReq;
x = new ActiveXObject("Microsoft.XMLDOM");
function getRemoteData(field1,field2,option)
{
var strA = "";
oReq = new ActiveXObject("Microsoft.XMLHTTP");
oReq.open("POST","xml.jsp?field1="+field1+"&field2="+field2+option,false);
oReq.setRequestHeader("Content-Length",strA.length);
oReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oReq.send(strA);
}
/*--重画下拉框--*/
function changeSelect(select,source,target,option)
{
getRemoteData(target,option,"&"+source+"="+select.options[select.selectedIndex].value);
clearSelect(eval("form1."+target));
fillSelect(eval("form1."+target));
}
/*--清空下拉框--*/
function clearSelect(select)
{
select.options.length = 0;
select.options[select.options.length]= new Option("--请选择--","");
}
/*--填充下拉框--*/
function fillSelect(select)
{
x.loadXML(oReq.responseText);
n=x.selectNodes("/root/id");
if(n!=null)
{
for(i=0;i<n.length;i++)
{
select.options[select.options.length]=new Option(n(i).text,n(i).text);
}
}
}
//xml.jsp
<%@ page import="java.sql.*"%>
<%@ page contentType="text/html;charset=GBK"%>
<jsp:useBean id="operate" scope="page" class="SqlDispose"/>
<root>
<%
ResultSet rs;
String sql;
String temp;
String field1,field2;
field1 = request.getParameter("field1");
field2 = request.getParameter("field2");
temp = new String(request.getParameter(field2).getBytes("ISO8859-1"),"GBK");
sql = "select "+field1+" from product where "+field2+"='"+temp+"' group by "+field1;
rs = operate.rs(sql);
while(rs.next())
{
out.println("<id>"+rs.getString(1)+"</id>");
}
%>
</root>
三、演示文件(demo.jsp)
<%@ page import="java.sql.*" contentType="text/html;charset=GBK"%>
<jsp:useBean id="operate" scope="page" class="SqlDispose"/>
<head>
<script language="JavaScript" src="changeSelect.js"></script>
</head>
<form name="form1">
<select name="name" onchange="clearSelect(form1.model),clearSelect(form1.place),changeSelect(this,'name','spec','name')">
<option>--请选择--</option>
<%
ResultSet rs;
rs = operate.rs("select name from product group by name");
while(rs.next())
{
out.print("<option value=");
out.print(rs.getString("name")+">");
out.print(rs.getString("name"));
out.println("</option>");
}
%>
</select>
<select name="spec" onchange="clearSelect(form1.place),changeSelect(this,'spec','model','spec')"></select>
<select name="model" onchange=changeSelect(this,"model","place","model")></select>
<select name="place"></select>
</form>
四、最后说明
以上提供了一个不刷新当前页，各个下拉框就可以联动，而且支持无限扩展（相对）。由于是GET方法传值，所以传值字符需要进行处理，
本文是在假定十分正常的条件下运行。由于HTTP的请求资料标识符的长度有限，所以当下拉框的个数受请求资料标识符的长度限制。如果数据
结构改用一对多的关系表，用ID传值，效果会有所好转。
以上部分逻辑如果再进行封装，或者以标签的形式来运行，效果会更好。由于其不涉及到这里的内容，所以未加介绍。
|
本类阅读TOP10