jsp级联列表读取数据库..docVIP

整体效果如下： 在选择一级列表时，二级列表会根据一级类别的内容选择相应的数据。用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; //需要连接的数据库名 //Strin