index.jsp
Java代码
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="gb2312"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="javascript">
var XMLHttpReq;
//创建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 (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
updateMenu();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateMenu() {
var res=XMLHttpReq.responseXML.getElementsByTagName("res")
/**下面是用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.data,res[i].firstChild.data));
}
}
// 创建级联菜单函数
function showSubMenu(obj) {
sendRequest("menu.jsp?sort=" + obj );
/**下面这一句的作用是:每次选择后回到第一个选项**/
// document.all.mli.options[0].selected=true;
}
</script>
</head>
<body>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="select1" style="width:150px">
//下面由于数据库结构不一样,我直接写上的,也可以从数据库中取出
<option value=''>---请选择---</option>
<option value='古遗址'>古遗址</option>
<option value='古墓葬'>古墓葬</option>
<option value='古建筑'>古建筑</option>
<option value='石窟寺及石刻'>石窟寺及石刻</option>
<option value='近现代重要史迹及代表性建筑'>近现代重要史迹及代表性建筑</option>
</select>
<select name="list" onchange="if(this.selectedIndex)alert('您选择的是:'+this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---请选择---</option>
</select>
</body>
</html>
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="gb2312"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
<script language="javascript">
var XMLHttpReq;
//创建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 (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
updateMenu();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateMenu() {
var res=XMLHttpReq.responseXML.getElementsByTagName("res")
/**下面是用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.data,res[i].firstChild.data));
}
}
// 创建级联菜单函数
function showSubMenu(obj) {
sendRequest("menu.jsp?sort=" + obj );
/**下面这一句的作用是:每次选择后回到第一个选项**/
// document.all.mli.options[0].selected=true;
}
</script>
</head>
<body>
<select onchange="showSubMenu(this.options[this.options.selectedIndex].value)" name="select1" style="width:150px">
//下面由于数据库结构不一样,我直接写上的,也可以从数据库中取出
<option value=''>---请选择---</option>
<option value='古遗址'>古遗址</option>
<option value='古墓葬'>古墓葬</option>
<option value='古建筑'>古建筑</option>
<option value='石窟寺及石刻'>石窟寺及石刻</option>
<option value='近现代重要史迹及代表性建筑'>近现代重要史迹及代表性建筑</option>
</select>
<select name="list" onchange="if(this.selectedIndex)alert('您选择的是:'+this.options[this.options.selectedIndex].value)" style="width:100px">
<option name="">---请选择---</option>
</select>
</body>
</html>
menu.jsp:
Java代码
<%@ page contentType="text/html; charset=GB2312" import="java.util.*,java.sql.*" %>
<%
String sort=new String(request.getParameter("sort").getBytes("iso-8859-1"),"GB2312");
System.out.print("sort="+sort);
String dbDriver = "com.microsoft.jdbc.sqlserver.SQLServerDriver"; //连接sql数据库的方法
String url = "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=test";
String userName = "数据库用户名";
String password = "数据库密码";
Connection conn = null;
Statement st = null;
ResultSet rs = null;
List lists = new ArrayList();
try{
Class.forName(dbDriver);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(url,userName,password);
st=conn.createStatement();
rs=st.executeQuery("SELECT 要选择的字段 FROM 表名 where 条件='"+sort+"'");
while (rs.next())
{
lists.add(rs.getString(1));
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
response.setContentType("text/xml; charset=gb2312");
response.setHeader("Cache-Control", "no-cache");
//必须要写下面这一行,不然取出的XML长度为0
response.getWriter().write("<?xml version=\"1.0\" encoding=\"gb2312\"?>");
out.println("<response>");
for(int i=0;i<lists.size();i++)
{
out.println("<res>" + lists.get(i).toString() + "</res>");
}
out.println("</response>");
%>
<%@ page contentType="text/html; charset=GB2312" import="java.util.*,java.sql.*" %>
<%
String sort=new String(request.getParameter("sort").getBytes("iso-8859-1"),"GB2312");
System.out.print("sort="+sort);
String dbDriver = "com.microsoft.jdbc.sqlserver.SQLServerDriver"; //连接sql数据库的方法
String url = "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=test";
String userName = "数据库用户名";
String password = "数据库密码";
Connection conn = null;
Statement st = null;
ResultSet rs = null;
List lists = new ArrayList();
try{
Class.forName(dbDriver);
} catch(java.lang.ClassNotFoundException e) {
e.printStackTrace();
}
try {
conn = DriverManager.getConnection(url,userName,password);
st=conn.createStatement();
rs=st.executeQuery("SELECT 要选择的字段 FROM 表名 where 条件='"+sort+"'");
while (rs.next())
{
lists.add(rs.getString(1));
}
rs.close();
st.close();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
response.setContentType("text/xml; charset=gb2312");
response.setHeader("Cache-Control", "no-cache");
//必须要写下面这一行,不然取出的XML长度为0
response.getWriter().write("<?xml version=\"1.0\" encoding=\"gb2312\"?>");
out.println("<response>");
for(int i=0;i<lists.size();i++)
{
out.println("<res>" + lists.get(i).toString() + "</res>");
}
out.println("</response>");
%>
效果如,选择省份自动更换城市
分享到:
相关推荐
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单...
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单jsp实现级联菜单
级联菜单 动态级联菜单 可能动态取数据
菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联
级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单级联菜单
仿系统的级联菜单功能,也就是鼠标放上去会自动显示第二级菜单的内容,看起来很专业。
这是js控制的html网页的级联菜单,与数据库相连,从数据库中读取内容。
网上找了很久这种菜单,浪费了很多时间,实在没办法,只好老老实实去官网上按说明弄了一个,并更新了,jquery1.5.2, 希望给有需要的朋友可以节约一点时间,欢迎交流,qq:170262
级联菜单DropDownList 级联菜单DropDownList 级联菜单DropDownList 级联菜单DropDownList 级联菜单DropDownList 级联菜单DropDownList 级联菜单DropDownList
实现级联菜单的功能,运行程序,选择编辑查找和替换功能,可以看到下级菜单显示出来
级联菜单,多级菜单。自定义封装包可直接引用。
菜单 menu JavaScript css js div 下拉级联菜单 菜单 menu JavaScript css js div 下拉级联菜单
异步的级联菜单实现了无级限制的下拉菜单,通过更改部分代码可以实现不同菜单的级联。本示例需要后台配合数据的传送。请注意示例的AjaxMultiMenu.html页面源代码注释。
AJAX实例的级联菜单,初学AJAX。
使用Ajax实现级联菜单,采取XML响应方式实现,非常好用!
excel功能强大,可以做级联菜单功能。适用于web项目导入exel文件。
最简单的C#窗体级联菜单源码示例
级联菜单有一个div简单实现,对于初学者很适合哟,相信我,你一定不会失望的