原javascript代码:
<SCRIPT language=javascript>
<!--
var subcat = new Array();
subcat[0] = new Array('no','大类','12')
subcat[1] = new Array('pinp','楼宇包装','louy')
subcat[2] = new Array('pinp','会场布置','meet')
subcat[3] = new Array('pinp','开日庆典','kai')
subcat[4] = new Array('pinp','婚庆礼仪','hun')
<!--changeselect1(5)-->
function changeselect1(locationid)
{
form1.smallclass.length = 0; //初始化下拉列表 清空下拉数据
for (i=0; i<subcat.length; i++) //legth=20
{
if (subcat[i][0] == locationid) //[0] [1] 第一列 第二列 subcat[i][2]为s2的value值
{
form1.smallclass.options[form1.smallclass.length] = new Option(subcat[i][1], subcat[i][2]);//建立option
}
}
}
//-->
</SCRIPT>
一级分类:
<SELECT onChange="changeselect1(this.options[this.selectedIndex].value)" name="bigclass">
<OPTION>=请选择=</OPTION>
<OPTION value="pinp">品牌策划</OPTION>
<OPTION value="design">设计印刷</OPTION>
<OPTION value="media">户外传媒</OPTION>
<OPTION value="jiag">工艺加工</OPTION>
</SELECT>
二级分类:
<SELECT id="smallclass" name="smallclass">
</SELECT>
----------------------------------------------------
数据库中大类:bigclass:pid,pName
小类:smallclass:psid,pscName,pid
我的思路是:从数据库中取出大类与小类的值,填充在javascript里,这样只须读取一次数据,剩下的事就交给js去处理了.
定义两个ResultSet 对象rssml rsbig.上面JS代码更改后,
<SCRIPT language=javascript>
<!--
var subcat = new Array();
<% int h=0;
while(rssml.next())
{ %>
subcat[<%=h%>] = new Array('<%= rssml.getInt("pcid")%>','<%= rssml.getString("pscName") %>','<%= rssml.getInt("psid") %>'); <%h++; } %>
<!--changeselect1(5)-->
function changeselect1(locationid)
{
form1.smallclass.length = 0; //初始化下拉列表 清空下拉数据
for (i=0; i<subcat.length; i++) //legth=20
{
if (subcat[i][0] == locationid) //[0] [1] 第一列 第二列 subcat[i][2]为s2的value值
{
form1.smallclass.options[form1.smallclass.length] = new Option(subcat[i][1], subcat[i][2]);//建立option
}
}
}
//-->
</SCRIPT>
<select name="bigclass" onChange="changeselect1(this.options[this.selectedIndex].value)">
<option>请选择大类</option>
<% while(rsbig.next())
{%>
<option value='<%= rsbig.getInt("pcid") %>'><%= rsbig.getString("pcName") %></option>
<%} %>
</select>
<select name="smallclass" id="smallclass">
<option>请选择小类</option>
</select>
发现速度确实快了,不过有个缺点就是但查看源代码时,很容易发现你数据库字段的一些对应值.
JavaScript对下拉菜单的基本操作:
1.获取一个下拉菜单对象
1. var select = document.getElementByIdx_x("selectid");
var select = document.getElementByIdx_x("selectid");
2.在下拉菜单中添加一个选项
1. var option = new Option("value","text");//第一项为值,第二项为文本域
var option = new Option("value","text");//第一项为值,第二项为文本域
3.把选项加入到下拉菜单中
1. select.options.add(option);
select.options.add(option);
4.获取被选择的选项的索引
1. var index = select.selectedIndex;
var index = select.selectedIndex;
5.获得某个选项的文本域
1. var text = select.options[index].text;
var text = select.options[index].text;
6.获得某个选项的值域
1. var value = select.options[index].value;
var value = select.options[index].value;
7.获得选中的值
1. var value = select.vlaue;
var value = select.vlaue;
以下为实现下拉菜单联动的jsp上的代码
1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head><title>二级联动下拉菜单</title>
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. </head>
7. //这里jsp调用了bean用来从数据库读出用户需要的内容,并已string类型
8. //放在list中
9. <% Type type = new Type(1); List select1 = traintype.getSelectFirst();
10. List select2 = traintype.getSelectSecond();%>
11. <script type="text/javascript" language="javascript">
12. //二级联动菜单
13. function Select1()
14. {
15. //动态生成js数组
16. var arry1 = new Array(<%for(int i=0;i<select1.size();i++)
17. {if(i<select1.size()-1)out.print("\""+select1.get(i)+"\",");else out.print("\""+select1.get(i)+"\"");}%>);
18. var type = document.getElementByIdx_x("type");
19. for(var i=0;i<arry1.length;i++)
20. {
21. var op = new Option(arry1[i],arry1[i]);
22. type.options.add(op);
23. }
24.
25. }
26.
27. function Select2()
28. {
29. var arry2 = new Array();
30. <% for(int j=0;j<select2.size();j++)
31. {
32. List templist = (List)select2.get(j);
33. %>
34. arry2[<%=j%>]=new Array(<%for(int k=0;k<templist.size();k++)
35. {if(k<templist.size()-1)out.print("\""+templist.get(k)+"\",");else out.print("\""+templist.get(k)+"\"");}%>);
36. <%
37. }
38. %>
39. var type = document.getElementByIdx_x("type");
40. var id = traintype.selectedIndex-1;
41. var name = document.getElementByIdx_x("name");
42. name.innerHTML="";
43. var top = new Option("--请选择--","");
44. orgname.options.add(top);
45. var temparry = arry2[id];
46. for(var i=0;i<temparry.length;i++)
47. {
48. var op = new Option(temparry[i],temparry[i]);
49. orgname.options.add(op);
50. }
51. }
52. <body οnlοad="Select()">
53. <select id="type" name="type" οnchange="Select2()" >
54. <option value="">--请选择--</option></select>
55. <select id="type" name="type" >
56. <option value="">--请选择--</option></select>
57. </body>
58. <html>
说明:
一级栏目表。这里是硬编码在文件中了。
二级栏目表ablum,里面有员工的信息:姓名(albuj_name),id(album_id),所属部门id(type_id)
<%@ include file="../data.jsp" %>
<%@ page contentType="text/html;charset=gb2312" %>
<% request.setCharacterEncoding("gb2312"); %>
<html>
<head>
<title>添加个人资源</title>
<head>
<body bgcolor="#ffffff" text="#000000">
<%
Rst=null;
String sql="select * from ablum order by type_id asc";
Rst=Stmt.executeQuery(sql);
%>
<script type="text/javascript">
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(Rst.next()){
%>
subcat["<%=count%>"] = new Array('<%=Rst.getString("album_name")%>','<%=Rst.getString("album_id")%>','<%=Rst.getString("type_id")%>');
<%
count++;
}
Rst.close();
%>
onecount="<%=count%>";
function change(locationid){
document.myform.albumid.length = 0;
var location_id=locationid;
var length=0;
var i;
for(i=0;i<onecount;i++){
if (subcat[i][2] == location_id) {
document.myform.albumid.options[length++] = new Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<%=count %>
<form method="POST" name="myform" action="adminsave.jsp">
<table>
<tr> <td>一级分类</td>
<TD> <select name="typeId" onChange="change(document.myform.typeId.options[document.myform.typeId.selectedIndex].value);" size=1>
<option selected>==请选一级分类==</option>
<option value="1">经理室</option>;
<option value="2">经理室1</option>;
<option value="3">经理室2</option>;
<option value="4">经理室3</option>;
<option value="5">经理室4</option>;
<option value="6">经理室5</option>;
<option value="17">经理室6</option>;
<option value="7">经理室7</option>;
<option value="8">经理室8</option>;
<option value="9">经理室9</option>;
<option value="10">经理室10</option>;
<option value="11">经理室11</option>;
<option value="12">经理室12</option>
<option value="13">经理室13</option>;
<option value="14">经理室14</option>;
<option value="15">经理室15</option>;
<option value="16">经理室16</option>;
<option value="18">经理室17</option>;
</select> </TD>
<TD>选择二级分类</TD> <TD>
<select name="albumid">
<option selected>==请选二级分类==</option>
</select>
</td></tr></table></forum>
</html>
这两天接到一个项目,要求是这样的;
菜单只有二级,但是菜单的内容全部是放在mysql数据库的一个菜单中,
字段如下
id menu1 menu2
1 k1 hhh
2 k5 dddd
3 bc dddl
4 k5 lldkd
那么我们首先要取的是一级菜单,k1,k5,bc 有重复的就必须得去掉,
如果采用普通的校验方法,机器肯定要搞死
下面是一级菜单
<select name="menu1" id="menu1" οnchange="choosemenu2(this, document.getElementById(menu2))">
<option value="n">请选择</option>
<%
String str="select *,count(distinct menu1) from menu1 group by menu1";
ResultSet rs=connbean.executeQuery(str);//connbean是一个javabean,如果不会请不要问我,请去看看书。
while(rs.next()){
out.println("<option value='"+rs.getString("menu1")+"'>"+ rs.getString("menu1")+"</option>");
}
%>
</select>
<select name="menu2" id="menu2">
<option value="n">请选择</option>
</select>
//OK 一级菜单出来了
再看看二级菜单怎么做;大家都知道js是在客户端上运行的,而jsp是在服务器上运行的,如果要将js的参数传递到jsp页面上运行,一般采用浏览器传递,一个菜单是通过浏览器来传递,那么就不友好了。
现在我们再说说怎么调用二级菜单。
<script language = "JavaScript">
type2s=new Object();
<%
String str1="select *,count(distinct menu1) from classify group by menu1";
ResultSet rs1=connbean.executeQuery(str1);
while(rs1.next()){
str1="select*from classify where menu1='"+rs1.getString("menu1")+"'";
ResultSet rs2=connbean.executeQuery(str1);
if(rs2.next()){
rs2.last();
int rowcount=rs2.getRow();
String sz="type2s['"+rs1.getString("menu1")+"']=new Array(";
for(int k=1;k<=rowcount;k++){
rs2.absolute(k);
if(k<rowcount){
sz+="'"+rs2.getString("menu2")+"',";
}else {
sz+="'"+rs2.getString("menu2")+"');";
}
}
out.println(sz);
}
}
%>
function choosetype2(type1,type2){
var t1,t2;
var i,ii;
t1=type1.value;
t2=type2.value;
type2.length=1;
if(t1=='0') return;
if(typeof(type2s[t1])=='undefined') return;
for(i=0; i<type2s[t1].length; i++)
{
ii = i+1;
type2.options[ii] = new Option();
type2.options[ii].text = type2s[t1][i];
type2.options[ii].value = type2s[t1][i];
}
}
</script>
class(一级栏目信息):classId(自动编号),className(栏目名称), Nclass(二级栏目信息), NclassId(自动编号),NclassName(栏目名称),parentId(一级栏目id,与class表中的classId关联)
<%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.jsp %>
<%@ include file=../conn.jsp%>
<%@ include file=../ds.jsp%>
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312); %>
<HTML><HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>级联菜单</TITLE>
<LINK rel=stylesheet type=text/css href=style.css>
</HEAD>
<!--从数据库中得到二级栏目信息-->
<%String sql=select * from Nclass order by NclassId asc;
ResultSet rs=stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
<script type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>);
<%
count++;
}
rs.close();
%>
onecount=<%=count%>;
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.NclassId.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.NclassId.options[document.myform.NclassId.length] = new
Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method=POST name=myform action=adminsave.jsp?action=add>
<TABLE>
<TR>
<TD>一级分类</TD>
<TD>
<SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1>
<OPTION selected value>==请选一级分类==</OPTION>
<sql:query var=query dataSource=$>
SELECT * FROM class
</sql:query>
<c:forEach var=row items=$>
<option value=$>$</option>
</c:forEach>
</select>
</TD>
<TD>选择二级分类</TD>
<TD>
<SELECT name=NclassId>
<OPTION selected value>==请选二级分类==</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<%@ page contentType=text/html; charset=GB2312 language=java errorPage=../error.jsp %>
<%@ include file=../conn.jsp%>
<%@ include file=../ds.jsp%>
<%@ taglib uri=http://java.sun.com/jsp/jstl/sql divfix=sql %>
<%request.setCharacterEncoding(gb2312); %>
<HTML><HEAD>
<META http-equiv=Content-Type content=text/html; charset=gb2312>
<TITLE>级联菜单</TITLE>
<LINK rel=stylesheet type=text/css href=style.css>
</HEAD>
<!--从数据库中得到二级栏目信息-->
<%String sql=select * from Nclass order by NclassId asc;
ResultSet rs=stmt.executeQuery(sql);
%>
<!--将二级栏目信息保存到数组subcat中-->
<script type=text/javascript>
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(rs.next()){
%>
subcat[<%=count%>] = new Array(<%=rs.getString(NclassName)%>,
<%=rs.getString(NclassId)%>,<%=rs.getString(parentId)%>);
<%
count++;
}
rs.close();
%>
onecount=<%=count%>;
<!--决定select显示的函数-->
function changelocation(locationid)
{
document.myform.NclassId.length = 0;
var locationid=locationid;
var i;
for (i=0;i < onecount; i++)
{
if (subcat[i][2] == locationid)
{
document.myform.NclassId.options[document.myform.NclassId.length] = new
Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<FORM method=POST name=myform action=adminsave.jsp?action=add>
<TABLE>
<TR>
<TD>一级分类</TD>
<TD>
<SELECT name=classId onChange=changelocation(document.myform.classId.options
[document.myform.classId.selectedIndex].value) size=1>
<OPTION selected value>==请选一级分类==</OPTION>
<sql:query var=query dataSource=$>
SELECT * FROM class
</sql:query>
<c:forEach var=row items=$>
<option value=$>$</option>
</c:forEach>
</select>
</TD>
<TD>选择二级分类</TD>
<TD>
<SELECT name=NclassId>
<OPTION selected value>==请选二级分类==</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
这是我给学校做数字迎新系统的其中一个页面,用到的是二级联动菜单对数据库的操作,因为网上没有相关的代码,所以传上来给大家共享,如果有任何不明白的问题,请联系QQ:78579056
说明:页面里我用的都是数据库连接池方法,返回的值都是ResultSet结果集,方法我都封装在class文件里面了,不明白数据库连接池的朋友,可以用以下方法初始化一个RS结果集:
别忘了把我导入的包都删掉哦!!!
第一个select是各个院系的名称
第二个select是院系下专业的名称,根据第一个select的结果动态变化。
其中用到的两个表如下:
yx_depart 院系表
字段1:id varchar 10
字段2:department varcher 50
yx_subject 专业表
字段1:id varchar 10
字段2:name varchar 50
字段3:departmentid varchar 10
yx.depart.id=yx_subject.departmentid
在jsp页面中加入这段代码就可以了:
try{
String mySqlDriver="org.git.mm.mysql.Driver";
String url="jdbc:mysql://localhost:3306/数据库名?user=用户名;password=密码";
Connection conn=null;
Class.ForName(mySqlDriver);
conn=DriverManager.getConnection(url,"","");
Statement stmt=conn.CreateStatement();
ResultSet rs=stmt.executeQuery("select * from yx_subject");
ResultSet rss=stmt.executeQuery("select * from yx_depart");
}catch(SQLException e){
out.print(e);
}
原始页面如下,感兴趣的朋友自己改吧:
再强调一次,一定要把我的包删除,你们没有,不删除会出错。
<%@ page contentType="text/html;charset=gb2312" language="java" %>
<%@ page import = "java.util.*" %>
<%@ page import ="java.sql.*" %>
<%@ page import="javax.servlet.ServletContext"%>
<%@ page import = "javax.sql.*" %>
<%@ page import="sso.yx.*" %> //这个是我的包
<%
int startnum=(request.getParameter("startnum")==null)?0:Integer.parseInt(request.getParameter("startnum"));
int endnum=3;//每页显示的记录数;
request.setCharacterEncoding("gb2312");
response.setCharacterEncoding("gb2312");
DormBean dormbean=new DormBean();
DormMgr dormmgr=new DormMgr(dormbean);
ResultSet rss=dormmgr.selectdepartment();
%>
<html>
<head>
<title>内蒙古财经学院数字化迎新网</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body class="mainbody">
<form name="common" method="post" action="selectcommon.jsp" target="_top">
<table width="98%"
border=0 align=center cellpadding=2 cellspacing=0>
<tbody>
<tr bgcolor=#ffffff>
<td bgcolor="#E5F1B6"><b>选择院系查询</b></td>
<td bgcolor="#E5F1B6">选择后点击查询</td>
<td bgcolor="#E5F1B6">
<select name="xueyuan" size="1" οnchange="makeshi(options.selectedIndex)">
<option>----请选择----</option>
<%
while(rss.next()){
%>
<option value=<%=rss.getString(1)%>><%=rss.getString(2)%></option>
<%} %>
</select></td></tr>
<tr bgcolor=#ffffff>
<td bgcolor="#E5F1B6"><b>选择专业查询</b></td>
<td bgcolor="#E5F1B6">选择后点击查询</td>
<td bgcolor="#E5F1B6">
<select name="zhuanye">
<option>----请选择----</option>
</select></td></tr>
<tr bgcolor=#ffffff>
<td width="17%" bgcolor="#E5F1B6"><b>请输入要查询的宿舍号</b></td>
<td width="27%" bgcolor="#E5F1B6">格式为:*-***</td>
<td width="56%" bgcolor="#E5F1B6"><input name="dormid" type="text" id="dormid" />
<input type="submit" name="submit" value="查询"></td>
</tr>
<tr bgcolor=#ffffff>
<td bgcolor="#E5F1B6"><b>关键词位置</b></td>
<td bgcolor="#E5F1B6">查询关键词位于</td>
<td bgcolor="#E5F1B6">
<input type=radio checked value=3 name=notfull>
无条件查询
<input type=radio value=2 name=notfull>
查询混合宿舍
<input type=radio value=1 name=notfull>查询人数未满宿舍</td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
</body>
</html>
<script language="javascript">
//下面函数是演示二,联动菜单的处理代码
function makeshi(x){
var form2=document.common.xueyuan.options.length;//这句解释同上
var diqul=new Array(form2)//新建一个数组,项数为第一个下拉列表的项数
var currSelectValue = document.common.xueyuan.value
for(i=0;i<form2;i++)//循环第一个下拉列表的项数那么多次
diqul[i]=new Array();//子循环
//下面是给每个循环赋值
for(j=0;j<form2;j++){
i=0;
<%
ResultSet rs=dormmgr.selectzhuanye();
while(rs.next()){
%>
if(<%=rs.getString(3)%>==currSelectValue){
diqul[j][i]=new Option("<%=rs.getString(2)%>",<%=rs.getString(1)%>);
i=i+1
}
<%}%>
}
var zhuanye=document.common.zhuanye; //方便引用
for(m=zhuanye.options.length-1;m>0;m--)
//这个要看清楚,因为要重新填充下拉列表的话必须先清除里面原有的项,清除和增加当然是有区别的了,所以用递减
zhuanye.options[m]=null;//将该项设置为空,也就等于清除了
for(j=0;j<diqul[x].length;j++){//这个循环是填充下拉列表
zhuanye.options[j]=new Option(diqul[x][j].text,diqul[x][j].value);
//注意上面这据,列表的当前项等于新项(数组对象的x,j项的文本为文本,)
}
zhuanye.options[0].selected=true;//设置被选中的初始值
}
</script>
本代码通过测试
说明:
一级栏目表。这里是硬编码在文件中了。
二级栏目表ablum,里面有员工的信息:姓名(albuj_name),id(album_id),所属部门id(type_id)
<%@ include file="../data.jsp" %>
<%@ page contentType="text/html;charset=gb2312" %>
<% request.setCharacterEncoding("gb2312"); %>
<html>
<head>
<title>添加个人资源</title>
<head>
<body bgcolor="#ffffff" text="#000000">
<%
Rst=null;
String sql="select * from ablum order by type_id asc";
Rst=Stmt.executeQuery(sql);
%>
<script type="text/javascript">
var onecount;
onecount=0;
subcat = new Array();
<%
int count = 0;
while(Rst.next()){
%>
subcat["<%=count%>"] = new Array('<%=Rst.getString("album_name")%>','<%=Rst.getString("album_id")%>','<%=Rst.getString("type_id")%>');
<%
count++;
}
Rst.close();
%>
onecount="<%=count%>";
function change(locationid){
document.myform.albumid.length = 0;
var location_id=locationid;
var length=0;
var i;
for(i=0;i<onecount;i++){
if (subcat[i][2] == location_id) {
document.myform.albumid.options[length++] = new Option(subcat[i][0], subcat[i][1]);
}
}
}
</script>
<%=count %>
<form method="POST" name="myform" action="adminsave.jsp">
<table>
<tr> <td>一级分类</td>
<TD> <select name="typeId" onChange="change(document.myform.typeId.options[document.myform.typeId.selectedIndex].value);" size=1>
<option selected>==请选一级分类==</option>
<option value="1">经理室</option>;
<option value="2">经理室1</option>;
<option value="3">经理室2</option>;
<option value="4">经理室3</option>;
<option value="5">经理室4</option>;
<option value="6">经理室5</option>;
<option value="17">经理室6</option>;
<option value="7">经理室7</option>;
<option value="8">经理室8</option>;
<option value="9">经理室9</option>;
<option value="10">经理室10</option>;
<option value="11">经理室11</option>;
<option value="12">经理室12</option>
<option value="13">经理室13</option>;
<option value="14">经理室14</option>;
<option value="15">经理室15</option>;
<option value="16">经理室16</option>;
<option value="18">经理室17</option>;
</select> </TD>
<TD>选择二级分类</TD> <TD>
<select name="albumid">
<option selected>==请选二级分类==</option>
</select>
</td></tr></table></forum>
</html>