×
首页程序员正文
IT源码网

联动菜单

flyfish 2021年04月03日 程序员 487 0

四级连动菜单[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)
[HTML/CSS/Javascript] DynamicOptionList连动菜单
    使用前请看一下说明，不会耽误你多少时间，明白以后有助你快速实现这个小功能，实际上非常简单，与你使用的开发语言也没有什么关系：


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>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="javascript">
<!--
//测试用的一组数据

//第1级下拉菜单数据
var opt = "上海,01;江西,02";

//第2级下拉菜单数据
var subopt = "01,徐汇区,001;01,嘉定区,002;01,黄浦区,003;02,南昌市,004;02,九江市,005;02,上饶市,006";

//第3级下拉菜单数据
var subsubopt = "001,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,0006";

/**
 * get Element By Id or name.
 * 根据一个dom对象的名称返回这个对象，省略了你
 * 直接操作document.getElementById的过程.
 *
 * 例如: $('默认文本框的名称').value
 *       就可以取得它的value
 */
function $() {
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}

/*
 * 自动填充一个下拉列表,一般用于填充连动菜单的第一项
 *
 * selname :: 当前下拉选项(this)
 *            后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设
 *            置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这
 *            个需要可以忽略 “_后缀”,只要设置一个普通的名称即可.
 *
 * seldata :: 数据源，菜单的数据项(子下拉选项名称，子下拉选项值，子下拉选项过滤值)
 * filter  :: 下拉选项的过滤条件
 *
 */
function fillselect(selname,seldata,filters) {
 var sel = $(selname);
 var data = seldata.split(";");
 var filtersdata = filters.split(";");

 var index = "";
 var selkey = "";
 var selvalue = "";

 if(data.length > 0) {

  //过滤条件为'all',显示全部,用于连动菜单
  if(filtersdata[0] == 'all') {
   sel.options[0] = new Option('==查看所有==','all');

   for(i=0; i < data.length; i++) {
    selkey = data[i].split(",")[1];
    selvalue = data[i].split(",")[2];
    sel.options[sel.length] = new Option(selkey,selvalue);
   }
   
   return;
  }

  sel.options[0] = new Option('==查看所有==','all');
  for(i=0;i < data.length; i++) {
   
   //有过滤条件的下拉项(连动菜单数据格式)
   if (data[i].split(",").length == 3) {
    for(j=0; j < filtersdata.length; j++){
     if( (data[i].split(",")[0] == filtersdata[j]) ) {
      selkey = data[i].split(",")[1];
      selvalue = data[i].split(",")[2];
      sel.options[sel.length] = new Option(selkey,selvalue);
     }
    }
   }

   //无过滤条件的下拉项(非连动菜单数据格式)
   if (data[i].split(",").length == 2) {
    selkey = data[i].split(",")[0];
    selvalue = data[i].split(",")[1];
    sel.options[sel.length] = new Option(selkey,selvalue);
   }

  }
  
  if (sel.length == 1) {
   sel.options[0] = new Option('==没有选项==','');
  }else{
   
  }
 }   
}

/*
 * 连动下拉列表的驱动函数
 *
 * selname_src    :: 当前下拉选项(this)
 *
 * subselname_src :: 所要驱动的子下拉选项的名称（名称结构为: 名称_后缀 或 名称）
 *                   后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设
 *                   置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这
 *                   个需要可以忽略 “_后缀”,只要设置一个普通的名称即可.
 *
 * subseldata_src :: 数据源,被驱动菜单的数据项.
 *                   数据源格式 : (子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)
 *
 */
function driverselect(selname_src,subselname_src,subseldata_src) {

 var index = "", selkey = "", selvalue = "";

 var selName="", selSuffix="";
 var subselName="", subselSuffix="";
 
 if(selname_src.name.split("_").length==2) {
  selName=selname_src.name.split("_")[0];
  selSuffix="_" + selname_src.name.split("_")[1];
 }else{
  selName=selname_src.name;
 }

 if(subselname_src.split("_").length==2) {
  subselName=subselname_src.split("_")[0];
  subselSuffix="_" + subselname_src.split("_")[1];
 }else{
  subselName=subselname_src;
 }

 var source = $(selName+selSuffix);
 var target = $(subselName+subselSuffix); 
 target.length=1;

 var filters = "";
 for(j=0; j < source.length; j++) {
  if(source[j].selected){
   filters = filters + source[j].value + ';';
  }
 }

 fillselect(target,subseldata_src,filters);
}   

//-->
</script>
</head>
<body>
<form name="myform" method="post">

sample1:

    <select name="sel_1" onChange="driverselect(this,'subsel_1',subopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsel_1" onChange="driverselect(this,'subsubsel_1',subsubopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsubsel_1">
  <option selected value="all">==查看所有==</option>
    </select>

 <br><br>


sample2:

    <select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsel_2" onChange="driverselect(this,'subsubsel_2',subsubopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsubsel_2">
  <option selected value="all">==查看所有==</option>
    </select>

 <br><br>

 sample3:

    <select name="selM_1" MULTIPLE size="5" onChange="driverselect(this,'subselM_1',subopt)" >
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subselM_1" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_1',subsubopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsubselM_1" MULTIPLE size="5">
  <option selected value="all">==查看所有==</option>
    </select>

 <br><br>

sample4:

    <select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)">
  <option selected value="">==查看所有==</option>
    </select>
    <select name="subselM_2" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_2',subsubopt)">
  <option selected value="">==查看所有==</option>
    </select>
    <select name="subsubselM_2" MULTIPLE size="5">
  <option selected value="">==查看所有==</option>
    </select>

 <br><br>

</form>

<SCRIPT LANGUAGE="JavaScript">
<!--
//初始化sample1:第一个下拉菜单项
fillselect('sel_1',opt,'');

//初始化sample2:第一个下拉菜单项
fillselect('sel_2',opt,'');

//初始化sample3:第一个下拉菜单项
fillselect('selM_1',opt,'');

//初始化sample4:第一个下拉菜单项
fillselect('selM_2',opt,'');
//-->
</SCRIPT>
</body>
</html>

 点击测试上述代码演示：

<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script LANGUAGE="javascript">
<!--
//测试用的一组数据

//第1级下拉菜单数据
var opt = "上海,01;江西,02";

//第2级下拉菜单数据
var subopt = "01,徐汇区,001;01,嘉定区,002;01,黄浦区,003;02,南昌市,004;02,九江市,005;02,上饶市,006";

//第3级下拉菜单数据
var subsubopt = "001,徐汇1区,0001;002,嘉定1区,0002;003,黄浦1区,0003;004,南昌1市,0004;005,九江1市,0005;006,上饶1市,0006";

/**
 * get Element By Id or name.
 * 根据一个dom对象的名称返回这个对象，省略了你
 * 直接操作document.getElementById的过程.
 *
 * 例如: $('默认文本框的名称').value
 *       就可以取得它的value
 */
function $() {
  var elements = new Array();

  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1)
      return element;

    elements.push(element);
  }

  return elements;
}

/*
 * 自动填充一个下拉列表,一般用于填充连动菜单的第一项
 *
 * selname :: 当前下拉选项(this)
 *            后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设
 *            置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这
 *            个需要可以忽略 “_后缀”,只要设置一个普通的名称即可.
 *
 * seldata :: 数据源，菜单的数据项(子下拉选项名称，子下拉选项值，子下拉选项过滤值)
 * filter  :: 下拉选项的过滤条件
 *
 */
function fillselect(selname,seldata,filters) {
 var sel = $(selname);
 var data = seldata.split(";");
 var filtersdata = filters.split(";");

 var index = "";
 var selkey = "";
 var selvalue = "";

 if(data.length > 0) {

  //过滤条件为'all',显示全部,用于连动菜单
  if(filtersdata[0] == 'all') {
   sel.options[0] = new Option('==查看所有==','all');

   for(i=0; i < data.length; i++) {
    selkey = data[i].split(",")[1];
    selvalue = data[i].split(",")[2];
    sel.options[sel.length] = new Option(selkey,selvalue);
   }
  
   return;
  }

  sel.options[0] = new Option('==查看所有==','all');
  for(i=0;i < data.length; i++) {
  
   //有过滤条件的下拉项(连动菜单数据格式)
   if (data[i].split(",").length == 3) {
    for(j=0; j < filtersdata.length; j++){
     if( (data[i].split(",")[0] == filtersdata[j]) ) {
      selkey = data[i].split(",")[1];
      selvalue = data[i].split(",")[2];
      sel.options[sel.length] = new Option(selkey,selvalue);
     }
    }
   }

   //无过滤条件的下拉项(非连动菜单数据格式)
   if (data[i].split(",").length == 2) {
    selkey = data[i].split(",")[0];
    selvalue = data[i].split(",")[1];
    sel.options[sel.length] = new Option(selkey,selvalue);
   }

  }
 
  if (sel.length == 1) {
   sel.options[0] = new Option('==没有选项==','');
  }else{
  
  }
 }   
}

/*
 * 连动下拉列表的驱动函数
 *
 * selname_src    :: 当前下拉选项(this)
 *
 * subselname_src :: 所要驱动的子下拉选项的名称（名称结构为: 名称_后缀 或 名称）
 *                   后缀是为了区分由程序动态生成的如果有多个相同的下拉选项而设
 *                   置的一个辅助名称后缀('_'下划线作为后缀的分隔符),如果没有这
 *                   个需要可以忽略 “_后缀”,只要设置一个普通的名称即可.
 *
 * subseldata_src :: 数据源,被驱动菜单的数据项.
 *                   数据源格式 : (子下拉选项option过滤值,子下拉选项option内容,子下拉选项option值;......)
 *
 */
function driverselect(selname_src,subselname_src,subseldata_src) {

 var index = "", selkey = "", selvalue = "";

 var selName="", selSuffix="";
 var subselName="", subselSuffix="";
 
 if(selname_src.name.split("_").length==2) {
  selName=selname_src.name.split("_")[0];
  selSuffix="_" + selname_src.name.split("_")[1];
 }else{
  selName=selname_src.name;
 }

 if(subselname_src.split("_").length==2) {
  subselName=subselname_src.split("_")[0];
  subselSuffix="_" + subselname_src.split("_")[1];
 }else{
  subselName=subselname_src;
 }

 var source = $(selName+selSuffix);
 var target = $(subselName+subselSuffix);
 target.length=1;

 var filters = "";
 for(j=0; j < source.length; j++) {
  if(source[j].selected){
   filters = filters + source[j].value + ';';
  }
 }

 fillselect(target,subseldata_src,filters);
}   

//-->
</script>
</head>
<body>
<form name="myform" method="post">

sample1:

    <select name="sel_1" onChange="driverselect(this,'subsel_1',subopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsel_1" onChange="driverselect(this,'subsubsel_1',subsubopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsubsel_1">
  <option selected value="all">==查看所有==</option>
    </select>

 <br><br>


sample2:

    <select name="sel_2" onChange="driverselect(this,'subsel_2',subopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsel_2" onChange="driverselect(this,'subsubsel_2',subsubopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsubsel_2">
  <option selected value="all">==查看所有==</option>
    </select>

 <br><br>

 sample3:

    <select name="selM_1" MULTIPLE size="5" onChange="driverselect(this,'subselM_1',subopt)" >
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subselM_1" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_1',subsubopt)">
  <option selected value="all">==查看所有==</option>
    </select>
    <select name="subsubselM_1" MULTIPLE size="5">
  <option selected value="all">==查看所有==</option>
    </select>

 <br><br>


sample4:

    <select name="selM_2" MULTIPLE size="5" onChange="driverselect(this,'subselM_2',subopt)">
  <option selected value="">==查看所有==</option>
    </select>
    <select name="subselM_2" MULTIPLE size="5" onChange="driverselect(this,'subsubselM_2',subsubopt)">
  <option selected value="">==查看所有==</option>
    </select>
    <select name="subsubselM_2" MULTIPLE size="5">
  <option selected value="">==查看所有==</option>
    </select>

 <br><br>

</form>

<SCRIPT LANGUAGE="JavaScript">
<!--
//初始化sample1:第一个下拉菜单项
fillselect('sel_1',opt,'');

//初始化sample2:第一个下拉菜单项
fillselect('sel_2',opt,'');

//初始化sample3:第一个下拉菜单项
fillselect('selM_1',opt,'');

//初始化sample4:第一个下拉菜单项
fillselect('selM_2',opt,'');
//-->
</SCRIPT>
</body>
</html>


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","IT虾米网");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer","IT虾米网");
secondGroup[1][1][3]=new Option("Java-Scripts.net","IT虾米网");
secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive","IT虾米网");
secondGroup[1][2][2]=new Option("Beginner/'s Guide to DHTML","IT虾米网");
secondGroup[1][2][3]=new Option("Web Coder","IT虾米网");
secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","IT虾米网");
secondGroup[1][3][2]=new Option("Ada/'s Intro to CGI","IT虾米网");
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","IT虾米网");
secondGroup[2][1][2]=new Option("MSNBC","IT虾米网");
secondGroup[2][1][3]=new Option("ABC News","IT虾米网");
secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News.com","IT虾米网");
secondGroup[2][2][2]=new Option("Wired","IT虾米网");
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


评论关闭
IT源码网
IT源码网 程序员 编程语言

微信公众号号：IT虾米 （左侧二维码扫一扫）欢迎添加！