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 meta http-equiv Content-Type content text/html; charset UTF-8 Ajax级联菜单实现 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] ; //-- % //驱动器名 //数据库用户名和密码 String userName sa; String userPasswd 123456; String url jdbc:sqlserver://localhost:1433;databaseName demo; //需要连接的数据库名 //String dbName Demo; //表名 String tableName t_firmenu; //创建连接并执行查询操作 Class.forName com.microsoft.sqlserver.jdbc.SQLServerDriver .newInstance ; Connection conn DriverManager.getConnection url, userName, userPasswd ; Statement statement conn.createStatem