原创力文档- 1、本文档共6页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
整体效果如下：
在选择一级列表时，二级列表会根据一级类别的内容选择相应的数据。用ajax实现，页面不刷新。
注意：常见两张数据库表，设置表之间的关联（FK），导入sql包到工程。
表如下：父表id和子表parentId都是int
index.jsp 如下：
////////////////////////////////////////////////
%@ page language=java contentType=text/html; charset=UTF-8
pageEncoding=UTF-8%
%@ page import=java.sql.*,java.io.*%
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd
html
head
meta http-equiv=Content-Type content=text/html; charset=UTF-8
titleAjax级联菜单实现/title
script language=JavaScript type=text/javascript
!--
var cache = [];
function getLevel2() {
if (document.forms.LevelMenu.select1.selectedIndex == 0) {
//当一级菜单未被选中时，二级菜单保持初始状态
document.forms.LevelMenu.select2.length = 1;
return;
}
//如果当前二级分类没有缓存时，则从服务器获取数据
if (!cache[document.forms.LevelMenu.select1.selectedIndex]) {
//创建跨浏览器的XMLHttpRequest对象
var xmlhttp;
try {
//IE 5.0
xmlhttp = new ActiveXObject(Msxm12.XMLHTTP);
} catch (e) {
try {
//IE 5.5 及更高版本
xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
} catch (e) {
try {
//其他浏览器
xmlhttp = new XMLHttpRequest();
} catch (e) {
}
}
}
xmlhttp.open(get, do.jsp?id=
+ document.forms.LevelMenu.select1.value);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
cache[document.forms.LevelMenu.select1.selectedIndex] = eval((
+ xmlhttp.responseText + ));
getLevel2();
}
}
};
xmlhttp.send(null);
return;
}
document.forms.LevelMenu.select2.length = 1;
var _arr = cache[document.forms.LevelMenu.select1.selectedIndex];
for ( var i = 0; i _arr.length - 1; i += 2) {
with (document.forms.LevelMenu.select2) {
options[options.length] = new Option(_arr[i], _arr[i + 1]);
}
}
}
//--
/script
/head
body
%
//驱动器名
//数据库用户名和密码
String userName = sa;
String userPasswd = 123456;
String url = jdbc:sqlserver://localhost:1433;databaseName=demo;
//需要连接的数据库名
//String dbNa
文档评论（0）