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

    原javascript代码:

          

function changeselect1(locationid) 
{ 
 form1.smallclass.length = 0; //初始化下拉列表 清空下拉数据 
 for (i=0; i
 { 
  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 
  } 
 } 
}

//--> 

 

 一级分类：
 
         =请选择=  
         品牌策划
         设计印刷
         户外传媒
         工艺加工

         二级分类：
          
         

 

 

----------------------------------------------------

     数据库中大类:bigclass:pid,pName

                     小类:smallclass:psid,pscName,pid

我的思路是:从数据库中取出大类与小类的值,填充在javascript里,这样只须读取一次数据,剩下的事就交给js去处理了.

定义两个ResultSet 对象rssml rsbig.上面JS代码更改后,

 

 

function changeselect1(locationid) 
{ 
 form1.smallclass.length = 0; //初始化下拉列表 清空下拉数据 
 for (i=0; i
 { 
  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 
  } 
 } 
}

//--> 

 

请选择大类
<% while(rsbig.next())
      {%>
    '><%= rsbig.getString("pcName") %>
  <%} %>

 

请选择小类

 

发现速度确实快了,不过有个缺点就是但查看源代码时,很容易发现你数据库字段的一些对应值.

 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.     

3.     

4.     

5.     

6.     

7. //这里jsp调用了bean用来从数据库读出用户需要的内容，并已string类型    

8. //放在list中    

9. <% Type type = new Type(1); List select1 = traintype.getSelectFirst();    

10.   List select2 = traintype.getSelectSecond();%>    

11.       

12.       //二级联动菜单    

13.       function Select1()    

14.       {    

15. //动态生成js数组    

16.           var arry1 = new Array(<%for(int i=0;i 

17. {if(i);    

18.           var type = document.getElementByIdx_x("type");    

19.           for(var i=0;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 

31.           {    

32.               List templist = (List)select2.get(j);    

33.               %>    

34.         arry2[<%=j%>]=new Array(<%for(int k=0;k 

35. {if(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 

47.           {    

48.               var op = new Option(temparry[i],temparry[i]);    

49.               orgname.options.add(op);    

50.           }    

51.       }    

52.     

53.     

54. --请选择--    

55.     

56. --请选择--    

57.     

58.   

说明：
一级栏目表。这里是硬编码在文件中了。 
二级栏目表ablum,里面有员工的信息：姓名(albuj_name)，id(album_id),所属部门id(type_id)

<%@ include file="../data.jsp" %>
<%@ page contentType="text/html;charset=gb2312" %>
<% request.setCharacterEncoding("gb2312"); %>

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

  Rst=Stmt.executeQuery(sql); 
%>
 
  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
   if (subcat[i][2] == location_id) {
    document.myform.albumid.options[length++] = new Option(subcat[i][0], subcat[i][1]); 
   }
  }

} 

<%=count %>

  

      
        
 

一级分类

==请选一级分类==          经理室;          经理室1;           经理室2;          经理室3;          经理室4;          经理室5;           经理室6;          经理室7;          经理室8;          经理室9;          经理室10;         经理室11;         经理室12         经理室13;         经理室14;         经理室15;         经理室16;         经理室17;

选择二级分类

==请选二级分类==

这两天接到一个项目,要求是这样的;

菜单只有二级,但是菜单的内容全部是放在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(""+ rs.getString("menu1")+"");
   }

%>

    
      请选择
    

//OK 一级菜单出来了

再看看二级菜单怎么做；大家都知道js是在客户端上运行的，而jsp是在服务器上运行的，如果要将js的参数传递到jsp页面上运行，一般采用浏览器传递，一个菜单是通过浏览器来传递，那么就不友好了。

现在我们再说说怎么调用二级菜单。

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
  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
  {
     ii = i+1;
     type2.options[ii] = new Option();
     type2.options[ii].text = type2s[t1][i];
     type2.options[ii].value = type2s[t1][i];
  }

} 

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

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

}

}

}

一级分类

[document.myform.classId.selectedIndex].value) size=1> ==请选一级分类== SELECT * FROM class $

选择二级分类

==请选二级分类==

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

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

}

}

}

一级分类

[document.myform.classId.selectedIndex].value) size=1> ==请选一级分类== SELECT * FROM class $

选择二级分类

==请选二级分类==

这是我给学校做数字迎新系统的其中一个页面，用到的是二级联动菜单对数据库的操作，因为网上没有相关的代码，所以传上来给大家共享，如果有任何不明白的问题，请联系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();
 %>








border=0 align=center cellpadding=2 cellspacing=0>
  
   
      选择院系查询
      选择后点击查询
      
      
      ----请选择----
      <%
     while(rss.next()){
     %>
        ><%=rss.getString(2)%>
        <%} %>
      
      
      选择专业查询
      选择后点击查询
      
      
   ----请选择----
      
    
      请输入要查询的宿舍号
      格式为：*-***
      
      
    
    
      关键词位置
      查询关键词位于
      
      
        无条件查询
        
      查询混合宿舍
      查询人数未满宿舍
    
  
  
  




//下面函数是演示二，联动菜单的处理代码
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
        diqul[i]=new Array();//子循环
        //下面是给每个循环赋值
    for(j=0;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
        zhuanye.options[j]=new Option(diqul[x][j].text,diqul[x][j].value);
        //注意上面这据,列表的当前项等于新项(数组对象的x,j项的文本为文本，)
   }
    zhuanye.options[0].selected=true;//设置被选中的初始值
}

本代码通过测试

说明：
一级栏目表。这里是硬编码在文件中了。 
二级栏目表ablum,里面有员工的信息：姓名(albuj_name)，id(album_id),所属部门id(type_id)

<%@ include file="../data.jsp" %>
<%@ page contentType="text/html;charset=gb2312" %>
<% request.setCharacterEncoding("gb2312"); %>

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

  Rst=Stmt.executeQuery(sql); 
%>
 
  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
   if (subcat[i][2] == location_id) {
    document.myform.albumid.options[length++] = new Option(subcat[i][0], subcat[i][1]); 
   }
  }

} 

<%=count %>

  

      
        
 

一级分类

==请选一级分类==          经理室;          经理室1;           经理室2;          经理室3;          经理室4;          经理室5;           经理室6;          经理室7;          经理室8;          经理室9;          经理室10;         经理室11;         经理室12         经理室13;         经理室14;         经理室15;         经理室16;         经理室17;

选择二级分类

==请选二级分类==