jspjs实现的二级联动菜单.doc

jsp+js实现的二级联动菜单以前看朋友写二级联动菜单思路都是先取得大类的数据,当选择大类后用url传值的方式传给页面一个值,然后根据这个值从数据库取出相应的小类的值.一直觉得这个思路虽然直接,但好像要频繁的读取数据库,而且如果表单里有多个选项的话,有时候似乎并不方便.到网上找了静态的javascript联动菜单.改了改后,感觉还可以: 原javascript代码: !- var subcat = new Array(); subcat0 = new Array(no,大类,12)subcat1 = new Array(pinp,楼宇包装,louy) subcat2 = new Array(pinp,会场布置,meet)subcat3 = new Array(pinp,开日庆典,kai)subcat4 = new Array(pinp,婚庆礼仪,hun)function changeselect1(locationid) form1.smallclass.length = 0; /初始化下拉列表 清空下拉数据 for (i=0; i 一级分类： =请选择= 品牌策划 设计印刷 户外传媒 工艺加工 二级分类： - 数据库中大类:bigclass:pid,pName小类:smallclass:psid,pscName,pid我的思路是:从数据库中取出大类与小类的值,填充在javascript里,这样只须读取一次数据,剩下的事就交给js去处理了.定义两个ResultSet 对象rssml rsbig.上面JS代码更改后, !- var subcat = new Array(); subcat = new Array(,); function changeselect1(locationid) form1.smallclass.length = 0; /初始化下拉列表 清空下拉数据 for (i=0; i 请选择大类 option value= 请选择小类发现速度确实快了,不过有个缺点就是但查看源代码时,很容易发现你数据库字段的一些对应值.JavaScript对下拉菜单的基本操作： 1.获取一个下拉菜单对象Js代码 1. varselect=document.getElementByIdx_x(selectid); var select = document.getElementByIdx_x(selectid);2.在下拉菜单中添加一个选项Js代码 1. varoption=newOption(value,text);/第一项为值，第二项为文本域 var option = new Option(value,text);/第一项为值，第二项为文本域3.把选项加入到下拉菜单中Js代码 1. select.options.add(option); select.options.add(option);4.获取被选择的选项的索引Js代码 1. varindex=select.selectedIndex; var index = select.selectedIndex;5.获得某个选项的文本域Js代码 1. vartext=select.optionsindex.text; var text = select.optionsindex.text;6.获得某个选项的值域Js代码 1. varvalue=select.optionsindex.value; var value = select.optionsindex.value;7.获得选中的值Js代码 1. varvalue=select.vlaue; var value = select.vlaue;以下为实现下拉菜单联动的jsp上的代码Js代码 1. 2. 3. 4. 二级联动下拉菜单 5. 6. 7. /这里jsp调用了bean用来从数据库读出用户需要的内容，并已string类型 8. /放在list中 9. 11. 12. /二级联动菜单 13. functionSelect1() 14. 15. /动态生成js数组 16. vararry1=newArray(%for(inti=0;iselect1.size();i+) 17. if(i); 18. vartype=document.getElementByIdx_x(type); 19. for(vari=0;iarry1.length;i+) 20. 21. varop=newOption(arry1i,arry1i); 22. type.options.add(op); 23. 24. 25. 26. 27. functionSelect2() 28. 29. vararry2=newArray(); 30. %for(intj=0;j 34. arry2=newArray(%for(intk=0;ktemplist.size();k+) 35. if(k); 36. 39. vartype=document.getElementByIdx_x(type); 40. varid=traintype.selectedIndex-1; 41. varname=document.getElementByIdx_x(name); 42. name.innerHTML=; 43. vartop=newOption(-请选择-,); 44. orgname.options.add(top); 45. vartemparry=arry2id; 46. for(vari=0;itemparry.length;i+) 47. 48. varop=newOption(temparryi,temparryi); 49. orgname.options.add(op); 50. 51. 52. 53. 54. -请选择- 55. 56. -请选择- 57. 58. 说明：一级栏目表。这里是硬编码在文件中了。 二级栏目表ablum,里面有员工的信息：姓名(albuj_name)，id(album_id),所属部门id(type_id)添加个人资源 var onecount; onecount=0;subcat = new Array();subcat = new Array(,);onecount=; function change(locationid)document.myform.albumid.length = 0; var location_id=locationid;var length=0;var i; for(i=0;ionecount;i+)if (subcati2 = location_id) document.myform.albumid.optionslength+ = new Option(subcati0, subcati1); 一级分类 =请选一级分类=经理室;经理室1;经理室2;经理室3;经理室4;经理室5;经理室6;经理室7;经理室8;经理室9;经理室10;经理室11;经理室12经理室13;经理室14;经理室15;经理室16;经理室17; 选择二级分类 =请选二级分类= 这两天接到一个项目,要求是这样的;菜单只有二级,但是菜单的内容全部是放在mysql数据库的一个菜单中，字段如下id menu1 menu21 k1 hhh2 k5 dddd3 bc dddl4 k5 lldkd那么我们首先要取的是一级菜单，k1,k5,bc 有重复的就必须得去掉，如果采用普通的校验方法，机器肯定要搞死下面是一级菜单 请选择 %String str=select *,count(distinct menu1) frommenu1 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 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(type2st1)=undefined) return; for(i=0; itype2st1.length; i+) ii = i+1; type2.optionsii = new Option(); type2.optionsii.text = type2st1i; type2.optionsii.value = type2st1i; class(一级栏目信息)：classId(自动编号)，className(栏目名称), Nclass(二级栏目信息), NclassId(自动编号)，NclassName(栏目名称)，parentId(一级栏目id，与class表中的classId关联) 级联菜单var onecount;onecount=0;subcat = new Array();subcat = new Array(,);onecount=;function changelocation(locationid)document.myform.NclassId.length = 0;var locationid=locationid;var i;for (i=0;i onecount; i+)if (subcati2 = locationid)document.myform.NclassId.optionsdocument.myform.NclassId.length = newOption(subcati0, subcati1);一级分类=请选一级分类=SELECT * FROM class$选择二级分类=请选二级分类= 级联菜单var onecount;onecount=0;subcat = new Array();subcat = new Array(,);onecount=;function changelocation(locationid)document.myform.NclassId.length = 0;var locationid=locationid;var i;for (i=0;i onecount; i+)if (subcati2 = locationid)document.myform.NclassId.optionsdocument.myform.NclassId.length = newOption(subcati0, subcati1);一级分类=请选一级分类=SELECT * FROM class$选择二级分类=请选二级分类=这是我给学校做数字迎新系统的其中一个页面，用到的是二级联动菜单对数据库的操作，因为网上没有相关的代码，所以传上来给大家共享，如果有任何不明白的问题，请联系QQ：78579056说明：页面里我用的都是数据库连接池方法，返回的值都是ResultSet结果集，方法我都封装在class文件里面了，不明白数据库连接池的朋友，可以用以下方法初始化一个RS结果集：别忘了把我导入的包都删掉哦！第一个select是各个院系的名称第二个select是院系下专业的名称，根据第一个select的结果动态变化。其中用到的两个表如下：yx_depart 院系表字段1：id varchar 10字段2：department varcher 50yx_subject 专业表字段1：id varchar 10字段2：name varchar 50字段3：departmentid varchar 10yx.depart.id=yx_subject.departmentid在jsp页面中加入这段代码就可以了：tryString 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);原始页面如下，感兴趣的朋友自己改吧：再强调一次，一定要把我的包删除，你们没有，不删除会出错。/这个是我的包内蒙古财经学院数字化迎新网 选择院系查询 选择后点击查询 -请选择- option value= 选择专业查询 选择后点击查询 -请选择- 请输入要查询的宿舍号 格式为：*-* 关键词位置 查询关键词位于 无条件查询 查询混合宿舍 查询人数未满宿舍 /下面函数是演示二，联动菜单的处理代码function makeshi(x) var form2=mon.xueyuan.options.length;/这句解释同上 var diqul=new Array(form2)/新建一个数组，项数为第一个下拉列表的项数 var currSelectValue = mon.xueyuan.value for(i=0;iform2;i+)/循环第一个下拉列表的项数那么多次 diquli=new Array();/子循环 /下面是给每个循环赋值 for(j=0;jform2;j+) i=0; if(=currSelectValue)diqulji=new Option(,);i=i+1 var zhuanye=mon.zhuanye; /方便引用 for(m=zhuanye.optio