jsp+js实现的二级联动菜单

来源：互联网发布：小伙舍妻先救妈知乎编辑：程序博客网时间：2024/04/29 20:54

原javascript代码:

<SCRIPT language=javascript>

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>

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.获取一个下拉菜单对象

Js代码

1. var select = document.getElementByIdx_x("selectid");

var select = document.getElementByIdx_x("selectid");

2.在下拉菜单中添加一个选项

Js代码

1. var option = new Option("value","text");//第一项为值，第二项为文本域

var option = new Option("value","text");//第一项为值，第二项为文本域

3.把选项加入到下拉菜单中

Js代码

1. select.options.add(option);

select.options.add(option);

4.获取被选择的选项的索引

Js代码

1. var index = select.selectedIndex;

var index = select.selectedIndex;

5.获得某个选项的文本域

Js代码

1. var text = select.options[index].text;

var text = select.options[index].text;

6.获得某个选项的值域

Js代码

1. var value = select.options[index].value;

var value = select.options[index].value;

7.获得选中的值

Js代码

1. var value = select.vlaue;

var value = select.vlaue;

以下为实现下拉菜单联动的jsp上的代码

Js代码

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 onload="Select()">

53. <select id="type" name="type" onchange="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>

<%
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 有重复的就必须得去掉，

如果采用普通的校验方法，机器肯定要搞死

下面是一级菜单

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>

　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); %>

</HEAD>

<%String sql=select * from Nclass order by NclassId asc;

ResultSet rs=stmt.executeQuery(sql);

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%>;

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>

<TABLE>

<TR>

<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=$>

</c:forEach>

</select>

</TD>

<TD>选择二级分类</TD>

<TD>

<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); %>

</HEAD>

<%String sql=select * from Nclass order by NclassId asc;

ResultSet rs=stmt.executeQuery(sql);

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%>;

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>

<TABLE>

<TR>

<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=$>

</c:forEach>

</select>

</TD>

<TD>选择二级分类</TD>

<TD>

<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"  onchange="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>

本代码通过测试

<%
Rst=null;
String sql="select * from ablum order by type_id asc";

</td></tr></table></forum>
</html>