- 浏览: 29939 次
- 性别:
- 来自: 沈阳
文章分类
最新评论
数据库部分:
drop database if exists mydb; create database mydb character set gbk; --多级联动菜单 use mydb; drop table if exists select_menu; create table select_menu( id varchar(255) not null default '', text varchar(255) not null, pid varchar(255) not null, seq int(11) not null default 0, primary key (id) )ENGINE=InnoDB DEFAULT CHARSET=gbk; insert into select_menu values('A1','列表A选项1','INIT',1); insert into select_menu values('A2','列表A选项2','INIT',2); insert into select_menu values('B11','列表B选项11','A1',1); insert into select_menu values('B12','列表B选项12','A1',2); insert into select_menu values('B13','列表B选项13','A1',3); insert into select_menu values('B21','列表B选项21','A2',1); insert into select_menu values('B22','列表B选项22','A2',2); insert into select_menu values('C111','列表C选项111','B11',1); insert into select_menu values('C112','列表C选项112','B11',2); insert into select_menu values('C121','列表C选项121','B12',1); insert into select_menu values('C122','列表C选项122','B12',2); insert into select_menu values('C131','列表C选项131','B13',1); insert into select_menu values('C132','列表C选项132','B13',2); insert into select_menu values('C211','列表C选项211','B21',1); insert into select_menu values('C212','列表C选项212','B21',2); insert into select_menu values('C221','列表C选项221','B22',1); insert into select_menu values('C222','列表C选项222','B22',2)
JDBC的Utils类:
package com.lanp.ajax.db; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; /** * 连接数据库的工具类,被定义成不可继承且是私有访问 * @author lanp * @since 2012-2-29 22:27 */ public final class DBUtils { private static String url = "jdbc:oracle:thin:@127.0.0.1:1521:neusoft"; private static String user = "scott"; private static String psw = "tiger"; private static Connection conn; static { try { Class.forName("oracle.jdbc.driver.OracleDriver"); } catch (ClassNotFoundException e) { e.printStackTrace(); throw new RuntimeException(e); } } private DBUtils() { } /** * 获取数据库的连接 * @return conn */ public static Connection getConnection() { try { conn = DriverManager.getConnection(url, user, psw); } catch (SQLException e) { e.printStackTrace(); throw new RuntimeException(e); } return conn; } /** * 释放资源 * @param conn * @param pstmt * @param rs */ public static void closeResources(Connection conn, PreparedStatement pstmt, ResultSet rs) { if (null != rs) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); throw new RuntimeException(e); } finally { if (null != pstmt) { try { pstmt.close(); } catch (SQLException e) { e.printStackTrace(); throw new RuntimeException(e); } finally { if (null != conn) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); throw new RuntimeException(e); } } } } } } } }
JSP后台:
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <%@ page language="java"%> <%@ page import="java.sql.*"%> <%@ page import="com.lanp.ajax.db.DBUtils;"%> <%! //访问数据库取得下级选项信息 String getOptions(String selectedId) { int counter = 0; //计数器 StringBuffer opts = new StringBuffer("{"); //保存选项信息 String sql = "select * from select_menu where pid = ? order by seq asc";//定义查询数据库的SQL语句 Connection conn = null; //声明Connection对象 PreparedStatement pstmt = null; //声明PreparedStatement对象 ResultSet rs = null; //声明ResultSet对象 try { conn = DBUtils.getConnection(); //获取数据库连接 pstmt = conn.prepareStatement(sql); //根据sql创建PreparedStatement pstmt.setString(1, selectedId); //设置参数 rs = pstmt.executeQuery(); //执行查询,返回结果集 while (rs.next()) { //遍历结果集 //如果不是第一项,追加一个“,”用于分隔选项 if (counter > 0) { opts.append(","); } opts.append("'"); opts.append(rs.getString("id")); opts.append("':'"); opts.append(rs.getString("text")); opts.append("'"); counter++; //计数器加1 } } catch (SQLException e) { System.out.println(e.toString()); } finally { DBUtils.closeResources(conn,pstmt,rs); } opts.append("}"); return opts.toString(); } %> <% out.clear(); //清空当前的输出内容(空格和换行符) String selectedId = request.getParameter("selectedId"); //获取selectedId参数 String optionsInfo = getOptions(selectedId); //调用getOptions方法取得下级选项信息 out.print(optionsInfo); //输出下级选项信息 %>
Html前台:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>多级联动菜单</title> <script type="text/javascript"> var xmlHttp; //用于保存XMLHttpRequest对象的全局变量 var targetSelId; //用于保存要更新选项的列表id var selArray; //用于保存级联菜单id的数组 //用于创建XMLHttpRequest对象 function createXmlHttp() { //根据window.XMLHttpRequest对象是否存在使用不同的创建方式 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式 } } //获取列表选项的调用函数 function buildSelect(selectedId, targetId) { if (selectedId == "") { //selectedId为空串表示选中了默认项 clearSubSel(targetId); //清除目标列表及下级列表中的选项 return; //直接结束函数调用,不必向服务器请求信息 } targetSelId = targetId; //将传入的目标列表id赋值给targetSelId变量 createXmlHttp(); //创建XmlHttpRequest对象 xmlHttp.onreadystatechange = buildSelectCallBack; //设置回调函数 xmlHttp.open("GET", "select_menu.jsp?selectedId=" + selectedId, true); xmlHttp.send(null); } //获取列表选项的回调函数 function buildSelectCallBack() { if (xmlHttp.readyState == 4) { var optionsInfo = eval("("+xmlHttp.responseText+")"); //将从服务器获得的文本转为对象直接量 var targetSelNode = document.getElementById(targetSelId); clearSubSel(targetSelId); //清除目标列表中的选项 //遍历对象直接量中的成员 for (var o in optionsInfo) { targetSelNode.appendChild(createOption(o, optionsInfo[o])); //在目标列表追加新的选项 } } } //根据传入的value和text创建选项 function createOption(value, text) { var opt = document.createElement("option"); //创建一个option节点 opt.setAttribute("value", value); //设置value opt.appendChild(document.createTextNode(text)); //给节点加入文本信息 return opt; } //清除传入的列表节点内所有选项 function clearOptions(selNode) { selNode.length = 1; //设置列表长度为1,仅保留默认选项 selNode.options[0].selected = true; //选中默认选项 } //初始化列表数组(按等级) function initSelArray() { selArray = arguments; //arguments对象包含了传入的所有参数 } //清除下级子列表选项 function clearSubSel(targetId) { var canClear = false; //设置清除开关,初始值为假 for (var i=0; i<selArray.length; i++) { //遍历列表数组 if (selArray[i]==targetId) { //当遍历至目标列表时,打开清除开关 canClear = true; } if (canClear) { //从目标列表开始到最下级列表结束,开关始终保持打开 clearOptions(document.getElementById(selArray[i])); //清除该级列表选项 } } } </script> </head> <!-- 页面加载完毕做两件事:1.初始化列表数组 2.为第一个列表赋值 --> <body onload="initSelArray('selA','selB','selC');buildSelect('INIT', 'selA')"> <h1>多级联动菜单</h1> <table> <tr> <td>列表A</td> <td> <select name="selA" id="selA" onchange="buildSelect(this.value, 'selB')"> <option value="" selected>------请选择------</option> </select> </td> </tr> <tr> <td>列表B</td> <td> <select name="selB" id="selB" onchange="buildSelect(this.value, 'selC')"> <option value="" selected>------请选择------</option> </select> </td> </tr> <tr> <td>列表C</td> <td> <select name="selC" id="selC"> <option value="" selected>------请选择------</option> </select> </td> </tr> </table> </body> </html>
相关推荐
AJAX三级联动菜单 用AJAX和jsp,servlet实现
根据学院 专业 班级三张表的联系做的Ajax三级联动菜单
ajax实现的联动菜单,可直接导入运行
struts2 jquery json ajax 三级联动菜单 可直接部署使用 需添加数据库查询代码
jsp+ajax 数据库自己更改就OK了,很好的一个例子,希望有助于大家的学习
基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar基于Ajax的三级联动下拉菜单.rar
struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp
三级联动Ajax菜单(包含省市数据) ; charset=utf-8" /> var xmlHttp; var requestType=""; function createXMLHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP...
jsp,ajax,java, 实现城市三级联动菜单
纯JSP+DWR实现三级联动下拉选择菜单 实现无刷新联动 DWR判断用户是否存在 ajax二级联动菜单 DWR操作数据库模拟实现Google搜索效果
ajax无刷新三级联动菜单
Ajax省市三级联动菜单支持火狐浏览器,数据库结合,项目整合方便。适合asp ,.net 项目的整合,运行效率高。无刷新。
这是一个简单的二级联动菜单 包括ajax代码的基本框架 .net里纯js实现ajax。对于ajax入门学习相当有用。并可进行稍微的修改实现三级联动。或者其他ajax的功能
PHP+AJAX+PROTOTYPE国省市三级联动菜单原型,从PHP文件中获取数据后加载到菜单中
纯JS的省市县三级联动菜单,没有用到AJAX,直接连接数据库。
JQuery教程实例-Ajax三级省市联动菜单在网上找的还比较好用
看看吧 很经典的文章!
基于Ajax的buffalo技术的helloword和三级联动菜单 包含入门模块:helloword、延伸模块:三级联动菜单 项目已包含所有文件,只需导入myeclipse运行即可。 开发环境:myeclipse6.0、jdk1.5、tomcat5.0 说明:连数据库...
省市县三级菜单联动(mysql+ajax+json+php),很简单易懂的代码,这段代码可以直接拿到项目中使用