使用网上的一个例子，结合自已的实践，还没有做出来，先放在这里，慢慢的改进~~原来网页的链接没看到了~~
第一个页面：menu.jsp
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
%>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<!--LINK href="images/css.css" type=text/css rel=stylesheet-->
<title>级联菜单</title>
</head>
<%
//连接到数据库，并且得到一个List，作为第一个select控件的数据源
String CLASSNANE = "com.microsoft.jdbc.sqlserver.SQLServerDriver";
String URL = "jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
String USER = "sa";
String PASSWORD = "";
Connection conn = null;
Statement st = null;
ResultSet rs = null;
List college = new ArrayList();
try{
Class.forName(CLASSNANE);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(URL,USER,PASSWORD);
st=conn.createStatement();
String sql = "select sname from 表名";
rs=st.executeQuery(sql);
while (rs.next())
{
college.add(rs.getString(1));
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
%>
<body>
<script language="javascript">
var XMLHttpReq;//这个例子里面只用到一个XMLHttpRequest对象，用于获取服务端返回的XML序列
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest1(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse1;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse1() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateList1();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateList1() {
var country=XMLHttpReq.responseXML.getElementsByTagName("major");
var list = document.all.list1;
for(var i=0;i<country.length;i++){
list.add(new Option(country[i].firstChild.data,country[i].firstChild.data));
}
}
//发送请求函数
function sendRequest2(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse2;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse2() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
updateList2();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function updateList2() {
var city=XMLHttpReq.responseXML.getElementsByTagName("classname");
var list = document.all.list2;
for(var i=0;i<city.length;i++){
list.add(new Option(city[i].firstChild.data,city[i].firstChild.data));
}
}
// 创建级联菜单函数
function showList1(obj) {
clearList1();
clearList2();
sendRequest1("menujsp.jsp?college=" + obj);
}
function showList2(obj) {
clearList2();
sendRequest2("menujsp.jsp?classname="+obj);
}
function clearList1()
{
var list = document.all.list1;
list.options.length=0;
list.add(new Option("---请选择---",""));
}
function clearList2()
{
var list = document.all.list2;
list.options.length=0;
list.add(new Option("---请选择---",""));
}
</script>
<select onchange="showList1(this.options[this.options.selectedIndex].value)" name="collegeselect" style="width:150px">
<option value=''>---请选择---</option>
<%
for(int i=0;i<college.size();i++)
{
out.println("<option value='"+college.get(i)+"'>"+college.get(i)+"</option>");
}
%>
</select>
<select name="list1" onchange="showList2(this.options[this.options.selectedIndex].value)" style="width:150px">
<option name="">---请选择---</option>
</select>
<select name="list2" onchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:150px">
<option name="">---请选择---</option>
</select>
</body>
</html>
第二个页面，用来接受请求：
menujsp.jsp
<%@ page contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*" %>
<%
String college=request.getParameter("college");
String classname = request.getParameter("classname");
college = new String(college.getBytes("ISO-8859-1"),"GBK");
System.out.println("学院"+college);
String CLASSNANE = "com.microsoft.jdbc.sqlserver.SQLServerDriver";
String URL = "jdbc:microsoft:sqlserver://localhost:1433;databasename=数据库名";
String USER = "sa";
String PASSWORD = "";
Connection conn = null;
Statement st = null;
ResultSet rs = null;
List major = new ArrayList();
List classes = new ArrayList();
try{
Class.forName(CLASSNANE);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(URL,USER,PASSWORD);
st=conn.createStatement();
if(college != null)
{
String sql = "select mname from tb_major m inner join (select * from tb_school where sname='"
+ college + "')" + " e on m.msid=e.sid";
System.out.println(sql);
rs=st.executeQuery(sql);
while (rs.next())
{
major.add(rs.getString(1));
}
}
if(classname != null)
{
//这里做的是一个内联接查询
String sql2 = "select mname from tb_major m inner join (select * from tb_school where sname='"
+ classname + "')" + " e on m.msid=e.sid";
System.out.println(sql2);
rs=st.executeQuery(sql2);
while (rs.next())
{
classes.add(rs.getString(1));
}
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
for(int i=0;i<major.size();i++)
{
out.println("<major>" + major.get(i).toString() + "</major>");
}
for(int i=0;i<classes.size();i++)
{
out.println("<classname>" + classes.get(i).toString() + "</classname>");
}
out.println("</response>");
out.flush();
%>
从网上参考时遇到的问题：
1.编码的问题，虽然页面上都是UTF-8，但是转过来的是GBK
用上一句
college = new String(college.getBytes("ISO-8859-1"),"GBK");
得以解决，但因为还没看AJAX,所以还搞不清楚，先实现吧
2.参数传值的问题。第一个下拉框选中之后，第二个下拉框出现内容，但是在第二个下拉框选中内容之后，
参数值传不过去，是传值的问题，还是其它 ，，还在研究中....晕~~
分享到：
相关推荐
这个名为“JSP+AJAX三级级联及更多级的实现.rar”的压缩包文件，显然是一个关于如何在Web应用中实现多级级联选择功能的教学资源。这种功能常见于地址选择、部门结构展示等场景，用户在一个下拉菜单的选择会影响到下...
综上所述，《精通Java Web整合开发(Jsp+Ajax+Struts+Hibernate)(第2版)》这本书主要介绍了如何使用JSP、Ajax、Struts、Hibernate以及Spring等技术进行Web应用的开发，涵盖了这些技术的基本概念、核心功能及实际应用...
8. **扩展应用**：此技术还可以应用于多级级联，如三级、四级甚至更多，只需在Servlet中处理更复杂的逻辑，前端相应地增加更多的监听和更新操作。 总的来说，“ajax + servlet 两级动态级联下拉框”项目展示了Web...
在"echart3 地图数据省市区三级级联demo"中，开发者已经实现了一个省份-城市-区县的三级联动效果，用户可以通过选择省份来筛选对应的城市，进一步选择城市后，再显示相应的区县。这种功能在地理分布、销售统计等场景...
总的来说，这个项目展示了如何使用Hibernate、Ajax和DWR来实现一个高效、用户友好的省市县三级级联选择功能。开发过程中涉及了ORM、MVC架构、数据库操作以及前端交互等多个方面，是学习和实践Web开发技能的好实例。
在网页开发中，有时我们需要创建具有级联效果的下拉框，这在用户界面设计中很常见，特别是在处理多层级分类或选择时。"使用XML文件实现3级下拉框级联"是一种有效的方法，尤其当数据量适中时。这种方法允许我们通过...
在IT行业中，"省市县三级级联select"是一种常见的前端交互设计，主要应用于地理信息的选择，比如用户在填写地址时需要依次选择省、市、县（区）。这种设计能够简化用户操作，提高用户体验，同时也方便后台处理数据。...
在这个小demo中，它被用来实现一个用户登录系统，并结合AJAX技术实现了省市区三级联动的效果。下面将详细讲解SSH框架的核心概念以及在本项目中的应用。 1. **Spring框架**： Spring是Java企业级应用的核心框架，...
对于“三级级联”，这通常意味着用户在选择时会经历三个步骤，每个步骤都基于前一步的选择进一步细化。例如，首先选择大类，然后是中类，最后是小类。这种分级方式有助于减少用户在大量选项中寻找的困扰，提升用户...
总结起来，"struts2+oracle三级联动菜单"实例展示了如何结合Struts2框架、Oracle数据库和前端技术实现动态的级联下拉菜单。它涉及到Action的处理逻辑、DAO的数据库操作、JSP的页面渲染以及JavaScript的前端交互。...
在IT行业中，"三级联动"通常指的是在一个应用中，三个或更多下拉列表框之间存在联动关系，即一个下拉框的选择会影响到下一个下拉框的数据加载。这种技术常见于地域选择、产品分类等场景，提供了良好的用户体验。在这...
在级联下拉列表中，我们主要利用jQuery的`change()`事件监听用户在第一个下拉列表中的选择，并触发AJAX请求获取相应的二级数据。 1. **HTML结构**： 创建两个`<select>`元素，分别代表主级和子级的下拉列表。每个`...
使用MyBatis或JPA等持久层框架，编写对应的Mapper或Repository接口及实现，用于数据库操作，如查询所有省份和根据省份ID获取城市。 ```java public interface ProvinceDao { List<Province> getAllProvinces(); ...
本文将详细介绍如何利用AJAX技术实现字符串的异步获取，并展示一个具体的示例——通过AJAX实现无刷新页面，返回字符串进行三级级联。 #### 二、AJAX基础知识 1. **概念简介**： - AJAX是一种用于创建更快响应的...
例如，一级选择可能是国家，二级选择是城市，三级可能是具体的区域。当用户在一级选择中选定一个国家，Ajax会发送一个请求到服务器，获取与该国相关的城市列表，然后更新二级选择的选项。同样的，当用户在二级选择中...
综上所述，Java Select与两级级联下拉菜单的实现涉及到了Java后端处理、Ajax前端交互以及JSP页面集成等多个方面的知识，是Web开发中常见的需求场景。通过理解上述知识点，开发者可以更好地掌握如何在实际项目中实现...
"第三季"可能是在前两季基础上的进阶教程，包含更多复杂的效果和技巧；而"第二季(1)"则可能是某个系列教程的一部分，专注于某个特定主题或技能。 总结来说，"jQuery实例演示及动态效果"是一份全面的jQuery学习资源...