四级连动菜单[jsp+Microsoft SQL Server]
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="Java.sql.*"%>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>四级连动菜单</title>
</head>
<body>
<form name="frm">
<select name=yijilei οnchange="MulSelect(3)"></select>
<select name=erjilei οnchange="MulSelect(2)"></select>
<select name=sanjilei οnchange="MulSelect(1)"></select>
<select name=sijilei></select>
</form>
<script>
var arrSel=["yijilei","erjilei","sanjilei","sijilei"]
arrData=[];
<%Class.forName("com.microsoft.JDBC.sqlserver.SQLServerDriver").newInstance();
String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=pubs";
//pubs为你的数据库的
String user="sa";
String password="sa";
Connection conn= DriverManager.getConnection(url,user,password);
Statement stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String sql="select * from news_lb";
ResultSet rs=stmt.executeQuery(sql);
while(rs.next()) {%>
arrData[arrData.length]=["<%=rs.getString("news_lb_name")%>","<%=rs.getString("news_lb_e")%>","<%=rs.getString("news2")%>","<%=rs.getString("news3")%>"]
<%}%>
<%rs.close();
stmt.close();
conn.close();
%>
</script>
<script>
function MulSelect(num){
var i,j,arrTemp=[];
for(i=0;i<num;i++)arrTemp[i]=eval("document.frm."+arrSel[i]).value
if(num<arrSel.length)
with(eval("document.frm."+arrSel[num])){
length=0
for(i=0;i<arrData.length;i++){
var find=false
for(j=0;j<num;j++)if(arrTemp[j]!=arrData[i][j])break;
if(j!=num)continue;
for(m=0;m<options.length;m++)if(options[m].text==arrData[i][num])find=true
if(length==0||!find){
options[options.length]=new Option(arrData[i][num],arrData[i][num])
}
}
MulSelect((num+1))
}
}
MulSelect(0)
</script>
</body>
</html>
三级连动菜单的实现
<!-- 要实现此效果需要 1 个步骤： -->
<!-- 第 1 步： --> <!-- 把下面的代码加到<BODY></BODY>区域中： --> <FORM name="isc"> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td nowrap height="11"> <select name="example" size="1" onChange="redirect(this.options.selectedIndex)"> <option selected>---Select1-------------</option> <option>Webmaster Sites</option> <option>News Sites</option> </select> <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)"> <option value=" " selected>---Select2--------------</option> </select> <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)"> <option value=" " selected>---Select3----------------</option> </select> <script> var groups=document.isc.example.options.length var group=new Array(groups)
使用前请看一下说明，不会耽误你多少时间，明白以后有助你快速实现这个小功能，实际上非常简单，与你使用的开发语言也没有什么关系：
1. <option selected value="all">==查看所有==</option> 这个下拉项可以保留或忽略，内容如“==查看所有==”可替换为自己需要的内容，value="all" 属性可以获得一个附加的全过滤显示功能，建议保留:) 2.下拉菜单数据格式，（实际开发可以由后台程序生成一个数据格式字符串，这个数据串格式和你查询的表结构应该是一样的，传到模板上取得这个数据格式串即可，所有下拉菜单数据是一次传到页面上的，并且与你使用的语言开发实现没有什么关系，只要你想办法得到这个字符串格式就行了）如下： a.第一级连动菜单的下拉选项，格式为 (下拉选项option内容,下拉选项option值;......) "上海,01;江西,02"; b. 第二级连动菜单的下拉选项，(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......) "01,徐汇区,001;01,嘉定区,002;01,黄浦区,003;02,南昌市,004;02,九江市,005;02,上饶市,006"; c. 第三级连动菜单的下拉选项，(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......) "001,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,0006"; . . . 第 N 级连动菜单的下拉选项，(子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......) 除了第一级没有子下拉选项option过滤值这一项外，其他子集都有子下拉选项option过滤值 3.实际可实现N级连动菜单，只要由当前菜单驱动它的子菜单即可，类似与责任链模式； 4.实际开发将<head> ...</head> 中的3个方法放至在一个单独的脚本文件里面，并引入它，只要在页面调用方法即可，这样就会发现实现这个功能很简洁，调用的方法也很自然； 5.下文举了4个例子，实际都一样，只是名字和样式不一样而已,名称后缀('_'下划线作为后缀的分隔符)不是必要的； <html> /** for (var i = 0; i < arguments.length; i++) { if (arguments.length == 1) elements.push(element); return elements; /* var index = ""; if(data.length > 0) { //过滤条件为'all',显示全部,用于连动菜单 for(i=0; i < data.length; i++) { sel.options[0] = new Option('==查看所有==','all'); //无过滤条件的下拉项(非连动菜单数据格式) } /* var index = "", selkey = "", selvalue = ""; var selName="", selSuffix=""; if(subselname_src.split("_").length==2) { var source = $(selName+selSuffix); var filters = ""; fillselect(target,subseldata_src,filters); //--> sample1: <select name="sel_1" onChange="driverselect(this,'subsel_1',subopt)"> <br><br> <select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)"> <br><br> sample3: <br><br> sample4: <select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)"> <br><br> </form> <SCRIPT LANGUAGE="JavaScript"> //初始化sample3:第一个下拉菜单项 点击测试上述代码演示： <html> //第1级下拉菜单数据 //第2级下拉菜单数据 //第3级下拉菜单数据 /** for (var i = 0; i < arguments.length; i++) { if (arguments.length == 1) elements.push(element); return elements; /* var index = ""; if(data.length > 0) { //过滤条件为'all',显示全部,用于连动菜单 for(i=0; i < data.length; i++) { sel.options[0] = new Option('==查看所有==','all'); //无过滤条件的下拉项(非连动菜单数据格式) } /* var index = "", selkey = "", selvalue = ""; var selName="", selSuffix=""; if(subselname_src.split("_").length==2) { var source = $(selName+selSuffix); var filters = ""; fillselect(target,subseldata_src,filters); //--> sample1: <select name="sel_1" onChange="driverselect(this,'subsel_1',subopt)"> <br><br>
<select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)"> <br><br> sample3: <select name="selM_1" MULTIPLE size="5" onChange="driverselect(this,'subselM_1',subopt)" > <br><br>
<select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)"> <br><br> </form> <SCRIPT LANGUAGE="JavaScript"> //初始化sample2:第一个下拉菜单项 //初始化sample3:第一个下拉菜单项 //初始化sample4:第一个下拉菜单项 for (i=0; i<groups; i++) group =new Array() group[0][0]=new Option("---Select2---"," "); group[1][0]=new Option("Now Select This One"," "); group[1][1]=new Option("JavaScript","47"); group[1][2]=new Option("DHTML","46"); group[1][3]=new Option("CGI","45"); group[2][0]=new Option("Now Select This One"," "); group[2][1]=new Option("General News","115"); group[2][2]=new Option("Technology News","116"); var temp=document.isc.stage2 function redirect(x){ for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<group[x].length;i++){ temp.options=new Option(group[x].text,group[x].value) } temp.options[0].selected=true redirect1(0) } var secondGroups=document.isc.stage2.options.length var secondGroup=new Array(groups) for (i=0; i<groups; i++) { secondGroup=new Array(group.length) for (j=0; j<group.length; j++) { secondGroup[j]=new Array() }} secondGroup[0][0][0]=new Option("---Select 3---"," "); secondGroup[1][0][0]=new Option("---Select 3---"," "); secondGroup[1][1][0]=new Option("Now Select This One"," "); secondGroup[1][1][1]=new Option("Website Abstraction","http://wsabstract.com"); secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/"); secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net"); secondGroup[1][2][0]=new Option("Now Select This One"," "); secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com"); secondGroup[1][2][2]=new Option("Beginner/'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/"); secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/"); secondGroup[1][3][0]=new Option("Now Select This One"," "); secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com"); secondGroup[1][3][2]=new Option("Ada/'s Intro to CGI","http://adashimar.hypermart.net/"); secondGroup[2][0][0]=new Option("---Select 3---"," "); secondGroup[2][1][0]=new Option("Now Select This One"," "); secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com"); secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com"); secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com"); secondGroup[2][2][0]=new Option("Now Select A Page"," "); secondGroup[2][2][1]=new Option("News.com","http://www.news.com"); secondGroup[2][2][2]=new Option("Wired","http://www.wired.com"); var temp1=document.isc.stage3 function redirect1(y){ for (m=temp1.options.length-1;m>0;m--) temp1.options[m]=null for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){ temp1.options=new Option(secondGroup[document.isc.example.options.selectedIndex][y].text,secondGroup[document.isc.example.options.selectedIndex][y].value) } temp1.options[0].selected=true } function redirect2(z){ window.location=temp1[z].value } </script> </td> </tr> </table> </FORM> | |
|
TOP |
6734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
