具体是使用oracle中的表coutry,当选中国家后会自动过滤这个国家对应的城市:
menu.jsp页面内容:
<%@page language="java" import="java.util.*,java.sql.*" contentType = "text/html;charset=gb2312"%>
<jsp:directive.page import="com.co.DBConnect"/>
<jsp:useBean id="db" scope="page" class="com.co.DBConnect"/>
<html>
<head>
<!--LINK href="images/css.css" type=text/css rel=stylesheet-->
</head>
<%List cit = new ArrayList();%>
<%
//String driver = "jdbc.oracle.driver.OracleDriver";
Connection conn = null;
Statement st = null;
ResultSet rs1 = null;
ResultSet rs2 = null;
System.out.println("bb");
String sql = "SELECT distinct cout_name FROM coutry";//distinct cout_name
System.out.println("aaa");
rs1 = db.getConnection(sql);
while (rs1.next())
{
cit.add(rs1.getString(1));
}
try{
rs1.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
sql = "SELECT distinct cout_city FROM coutry";//distinct cout_name
System.out.println("aaa");
rs2 = db.getConnection(sql);
%>
<body>
<script language="javascript">
var XMLHttpReq;
var currentSort;
//创建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 sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (true) { // 信息已经成功返回,开始处理信息XMLHttpReq.status == 200
updateMenu();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateMenu() {
var res=XMLHttpReq.responseXML.getElementsByTagName("res") ;
alert("res===="+res[0].firstChild.nodeValue);
/**下面是用innerHTML输出控件内容的一般用法**/
//var subMenu = "";
//for(var i = 0; i < res.length; i++) {
// subMenu = subMenu + " " + res[i].firstChild.data + "";
//}
//currentSort.innerHTML = subMenu;
var list = document.all.list;
list.options.length=0;
list.add(new Option("---请选择---",""));
for(var i=0;i<res.length;i++){
list.add(new Option(res[i].firstChild.nodeValue,res[i].firstChild.nodeValue));
}
}
// 创建级联菜单函数
function showSubMenu(obj) {
//currentSort =document.getElementById(obj);
//currentSort.parentNode.style.display = "";
sendRequest("menujsp.jsp?sort=" + obj);
/**下面这一句的作用是:每次选择后回到第一个选项**/
//document.all.mli.options[0].selected=true;
}
</script>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="mli" style="width:150px">
<option value=''>---bbb---</option>
<%
for(int i=0;i<cit.size();i++)
{
out.println("<option value='"+cit.get(i)+"'>"+cit.get(i)+"</option>");
}
%>
</select>
<select name="list" onchange="if(this.selectedIndex)alert(this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---aaa---</option>
<%
while(rs2.next())
{
out.println("<option value='"+rs2.getString("cout_city")+"'>"+rs2.getString("cout_city")+"</option>");
}
%>
</select>
</body>
</html>
menujsp.jsp页面内容:
<%@ page contentType="text/html; charset=gb2312" import="java.util.*,java.sql.*" %>
<jsp:useBean id="db" scope="page" class="com.co.DBConnect" />
<%
String sort=request.getParameter("sort");
ResultSet rs = null;
List cities = new ArrayList();
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
try {
String sql = "SELECT cout_city FROM coutry where cout_name='"+sort+"'";
System.out.println("SQL="+sql);
rs=db.getConnection1(sql);
while (rs.next())
{
cities.add(rs.getString(1));
}
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
out.println("<response>");
for(int i=0;i<cities.size();i++)
{
out.println("<res>" + cities.get(i).toString() + "</res>");
System.out.println("ss");
}
out.println("</response>");
%>
jsp使用的bean,访问数据库的java程序
package com.co;
import java.sql.*;
public class DBConnect {
//一个静态方法,返回一个数据库连接,这样达到了对数据库连接统一控制的目的。
public ResultSet getConnection(String sql)throws Exception{
String url = "jdbc:oracle:thin:@localhost:1521:oradb";//数据库url
String db_name = "wang";//数据库用户名
String db_password = "wangch";//数据库密码
Connection conn = null;
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(url,db_name,db_password);
} catch (SQLException e) {
e.printStackTrace();
}
Statement stat = conn.createStatement();
return stat.executeQuery(sql);
}
public ResultSet getConnection1(String sql)throws Exception{
String url = "jdbc:oracle:thin:@localhost:1521:oradb";
String db_name = "wang";
String db_password = "wangch";
Connection conn = null;
try {
Class.forName("oracle.jdbc.driver.OracleDriver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(url,db_name,db_password);
} catch (SQLException e) {
e.printStackTrace();
}
Statement stat = conn.createStatement();
return stat.executeQuery(sql);
}
}
数据库表创建sql:
create table coutry(cout_name varchar2[20] not null,cout_city varchar2[20] not null)
insert into coutry values('china','shanghai')
insert into coutry values('china','beijing')
insert into coutry values('american','ne')
insert into coutry values('american','hh')