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

级联菜单二

qq123 2021年04月03日 程序员 407 0

 jsp+javascript打造级连菜单

 作者： 来源： 
阅读 1272 人次 , 2006-3-29 4:23:00 
 

<script type="text/javascript"> </script>

 

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
contenttype="text/html;charset=gb2312" pageencoding="gb2312"
%>
<style>
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}
</style>
<script language="javascript">
<!--
function rv()
{
  var val="";
  for(i=0;i<combo_box.list2.length;i++){
val+=","+combo_box.list2[i].value;
  }
  if(val.charat(0)==","){
val=val.substr(1,val.length);
  }
  opener.form1.frecname.value=val;
  self.close();
}

//-->
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
<%
  cdatasource ds=new cdatasource();  //数据联结bean实例
  java.sql.connection conn=ds.getconnection();
  java.sql.statement stmt=null;
  java.sql.resultset rs=null;
  cdatacheck dc=new cdatacheck();
%>

<%
 string sqlu="select t1.fno, t1.fname, t2.fname as fdept from tuser t1 left outer join tdept t2 on t1.fdept = t2.fno order by t2.fname";
 stmt=conn.createstatement();
 rs=stmt.executequery(sqlu);
%>
 <script language='javascript'>
 arr = new array();
<%  int temp=0;
 while(rs.next())
 {
%>
 arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
<%
 temp = temp + 1;
 }
%>
temp=<%=temp%>;
function changelocation(id){
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
var i = 0;
document.combo_box.city.options[0]=new option('-------','');
for(i=0;i<temp;i++){
if(arr[i][1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[i][0], arr[i][0]);
}
}
}
</script>


<form name="combo_box">
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
  <tr height="24">
  <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
  <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
  <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
  <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
  </tr>
  <tr>
  <td>
  <select multiple id=prov name="prov"  οnchange="changelocation(combo_box.prov.options[combo_box.prov.selectedindex].text);"  style="width:150;height:200" class="bgc">
  <option value="0">请选择部门 ---></option>
<%
  string sqld="select * from tdept";
 stmt=conn.createstatement();
 rs=stmt.executequery(sqld);
 while(rs.next())
 {
%>
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
<%
 }
%>
  </select>
 </td>
  <td>
  <select multiple id=city style="width:150;height:200" class="bgc">
  </select>
 </td>
  <td nowrap align="center" class="bgc">
  <input type="button" οnclick="move(this.form.list2,this.form.city)" value="<<" class="buttons">
  <input type="button" οnclick="move(this.form.city,this.form.list2)" value=">>" class="buttons">
 </td>
  <td>
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
  </select>
 </td>
  </tr>
  <tr class="bgc">
  <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" οnclick="rv();"></td>
  </tr>
</table>
</form>

<script language="javascript">
//人名移动
function move(fbox, tbox) {
var arrfbox = new array();
var arrtbox = new array();
var arrlookup = new array();
var i;
for (i = 0; i < tbox.options.length; i++) {
arrlookup[tbox.options[i].text] = tbox.options[i].value;
arrtbox[i] = tbox.options[i].text;
}
var flength = 0;
var tlength = arrtbox.length;
for(i = 0; i < fbox.options.length; i++) {
arrlookup[fbox.options[i].text] = fbox.options[i].value;
if (fbox.options[i].selected && fbox.options[i].value != "") {
arrtbox[tlength] = fbox.options[i].text;
tlength++;
}
else {
arrfbox[flength] = fbox.options[i].text;
flength++;
}
}
arrfbox.sort();
arrtbox.sort();
fbox.length = 0;
tbox.length = 0;
var c;
for(c = 0; c < arrfbox.length; c++) {
var no = new option();
no.value = arrlookup[arrfbox[c]];
no.text = arrfbox[c];
fbox[c] = no;
}
for(c = 0; c < arrtbox.length; c++) {
var no = new option();
no.value = arrlookup[arrtbox[c]];
no.text = arrtbox[c];
tbox[c] = no;
}
}

</script>

  

</body>

<script src="http://wz.csdn.net/javascripts/vote.js" type="text/javascript"></script>  script实现2级连动菜单   <script src="http://blog.csdn.net/count.aspx?ID=1585488&Type=Rank" type="text/javascript"></script>

从后台传过来2个LIST,分别是2个菜单的全部内容,然后根据2个菜单之间的关系,重新把2个LIST排序,变成我想要的形式的数组.例如:array[1]下面对应的是array[1][1],array[1][2]等等.

<% @ page contentType = " text/html; charset=Shift_JIS "   %>
<% @ taglib uri = " /WEB-INF/tlds/struts-bean.tld "  prefix = " bean "   %>
<% @ taglib uri = " /WEB-INF/tlds/struts-html.tld "  prefix = " html "   %>
<% @ taglib uri = " /WEB-INF/tlds/struts-logic.tld "  prefix = " logic "   %>
<% @ page import = " java.util.List "   %>
<% @ page import = " java.util.ArrayList "   %>
<% @ page import = " jp.co.srs.biz.webApp.reserve.dto.ReserveDto "   %>
<% @ page import = " jp.co.srs.biz.webApp.reserve.dto.ReserveListDto "   %>
<% @ page import = " jp.co.srs.biz.webApp.reserve.dto.ReserveRtypeListDto "   %>
<% @ page import = " jp.co.srs.biz.webApp.reserve.dto.ReservePlanListDto "   %>

<%     ReserveDto dto  =  (ReserveDto)session.getAttribute( " ReserveDto " );
     if (dto  ==   null ) { dto  =   new  ReserveDto(); }
 %>
<%   List lstRtype  =  (List)session.getAttribute( " RtypeList " );
    List lstPlan  =  (List)session.getAttribute( " PlanList " );
    List lstYears  =  (List)session.getAttribute( " Years " );
     String  max_page  =  ( String )session.getAttribute( " MaxPage " );
 %>
< html:html >
< th  nowrap > お部屋の名称 </ br ></ th >
< td >
< select  name ="rtype_cd"  onchange ="addOptions(plan_category,rtype_category.value)"  id ="rtype_category" >
    < option  value ="" > ==== </ option >
   <%
    String  rtype_cd = ( String )session.getAttribute( " RtypeCd " );
   ReserveRtypeListDto rtype  =   new  ReserveRtypeListDto(); %>
   <% if  (lstRtype ! =   null ) {
          for  ( int  i = 0 ;i < lstRtype.size();i ++ ) {
              rtype  =  (ReserveRtypeListDto)lstRtype.get(i); %>
              <% if  (rtype_cd.equals(rtype.getRtype_cd())) { %>
     < option  value ="<%=rtype.getRtype_cd()%>"  selected > <% = rtype.getRtype_nm() %> </ option >
              <% }  else  { %>
     < option  value ="<%=rtype.getRtype_cd()%>" > <% = rtype.getRtype_nm() %> </ option >
             <% } %>
   <% }} %>
</ select >
</ br ></ td >
</ tr >
< tr >
< th  nowrap > ご宿泊プランの名称 </ br ></ th >
< td >
     < select  name ="plan_cd"  id ="plan_category" >
           < option  value ="" > ==== </ option >
           <%
               String  strRtype_CD  =  ( String )session.getAttribute( " RtypeCd " );
              strPlan_CD  =  ( String )session.getAttribute( " PlanCd " );
               for  ( int  i = 0 ;i < lstRtype.size();i ++ ) {
              ReserveRtypeListDto rcdRtype  =  (ReserveRtypeListDto)lstRtype.get(i);
               if  (strRtype_CD.equals(rcdRtype.getRtype_cd())) {
                    for  ( int  j = 0 ;j < lstPlan.size();j ++ ) {
       ReservePlanListDto rcdPlan  =  (ReservePlanListDto)lstPlan.get(j);
        if  (strRtype_CD.equals(rcdPlan.getRtype_cd())) {
         if  (strPlan_CD.equals(rcdPlan.getPlan_cd())) {
     %>
     < option  value ="<%=rcdPlan.getPlan_cd()%>"  selected >
         <% = rcdPlan.getPlan_nm() %>
     </ option >
     <% }  else  {%
     < option  value = " <%=rcdPlan.getPlan_cd()%> " >
         < % = rcdPlan.getPlan_nm() %>
     </ option >
     <%
                         }
                       }
                 }
             }
         }
 %>
</ br ></ td >
</ tr >
</ table >
</ body >
</ html:html >
< script  language ="JavaScript" >
<!--
     var  arrRtype   =   new  Array();
     var  arrPlan    =   new  Array();
     var  arrPlanCD  =   new  Array();
     < logic:iterate id = " rtypeItem "  name = " RtypeList "  indexId = " rtype_index " >
        arrRtype[ < bean:write name = " rtype_index "   /> ]  =   " <bean:write name= " rtypeItem "  property= " rtype_cd " /> " ;
     </ logic:iterate >
     <%
         for  ( int  i = 0 ; i < lstRtype.size(); i ++ ) {
            ReserveRtypeListDto rcdRtypeList  =  (ReserveRtypeListDto) lstRtype.get(i);
             int  z = 0 ;
     %>
            arrPlan[ <%= i %> ]  =   new  Array();
            arrPlanCD[ <%= i %> ]  =   new  Array();
     <%         
             for  ( int  j = 0 ; j < lstPlan.size(); j ++ ) {
                ReservePlanListDto rcdPlanList  =  (ReservePlanListDto) lstPlan.get(j);
                 if (rcdPlanList.getRtype_cd().equals(rcdRtypeList.getRtype_cd())) {
     %>             
                arrPlanCD[ <%= i %> ][ <%= z %> ]  =   " <%=rcdPlanList.getPlan_cd()%> " ;
                arrPlan[ <%= i %> ][ <%= z %> ]  =   " <%=rcdPlanList.getPlan_nm()%> " ;
     <%
                z ++ ;
                }
            }
        }
     %>

     function  addOptions(dltObj, rtypeCategory) {
        dltObj.innerHTML  =   "" ;
         var  opt = document.createElement( " OPTION " );
        opt.value  =   "" ;
        opt.text   =   " ==== " ;
        dltObj.add(opt);
        
         for  ( var  i = 0 ;i <= arrRtype.length;i ++ ){
             if  (rtypeCategory  ==  arrRtype[i]) {
                 for  ( var  j = 0 ;j <= arrPlan[i].length;j ++ ) {
                     if  (arrPlan[i][j]  !=   null ) {
                         var  opt = document.createElement( " OPTION " );
                        opt.value  =  arrPlanCD[i][j];
                        opt.text   =  arrPlan[i][j];
                                    if  (window.navigator.userAgent.indexOf( " MSIE " ) > 0 ) {
                            dltObj.add(opt);
                        }  else  {
                            dltObj.appendChild(opt);
                        }
                    }
                }
            }
        }
    }
 // -->
</ script >
 

 

 

 

333333333333333333333333333333

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
  <title>JS联动下拉框</title>
  <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
  <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
  <script language="javascript" >
  /*  
**    ==================================================================================================  
**    类名：CLASS_LIANDONG_YAO  
**    功能：多级连动菜单  
**    
**    作者：YAODAYIZI  

**    ==================================================================================================  
**/      
  function CLASS_LIANDONG_YAO(array)
  {
   //数组，联动的数据源
      this.array=array; 
      this.indexName='';
      this.obj='';
      //设置子SELECT
    // 参数：当前onchange的SELECT ID，要设置的SELECT ID
      this.subSelectChange=function(selectName1,selectName2)
      {
      //try
      //{
    var obj1=document.all[selectName1];
    var obj2=document.all[selectName2];
    var objName=this.toString();
    var me=this;
  
    obj1.οnchange=function()
    {
        
        me.optionChange(this.options[this.selectedIndex].value,obj2.id)
    }

      }
      //设置第一个SELECT
    // 参数：indexName指选中项,selectName指select的ID
      this.firstSelectChange=function(indexName,selectName)  
      {
      this.obj=document.all[selectName];
      this.indexName=indexName;
      this.optionChange(this.indexName,this.obj.id)

      }
  
  // indexName指选中项,selectName指select的ID
      this.optionChange=function (indexName,selectName)
      {
    var obj1=document.all[selectName];
    var me=this;
    obj1.length=0;
    obj1.options[0]=new Option("请选择",'');
    for(var i=0;i<this.array.length;i++)
    {    
    
        if(this.array[i][1]==indexName)
        {
        //alert(this.array[i][1]+" "+indexName);
      obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
        }
    }
      }
      
  }
  </script>
    </head>
    <body>
    <form name="form1" method="post">
       
      <SELECT ID="s1" NAME="s1"  >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="s2" NAME="s2"  >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="s3" NAME="s3">
    <OPTION selected></OPTION>
      </SELECT>
     
 
     

 
      <SELECT ID="x1" NAME="x1"  >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x2" NAME="x2"  >
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x3" NAME="x3">
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x4" NAME="x4">
    <OPTION selected></OPTION>
      </SELECT>
      <SELECT ID="x5" NAME="x5">
    <OPTION selected></OPTION>
      </SELECT>
      
  </form>
    </body>

    
    
    <script language="javascript">
    //例子1-------------------------------------------------------------
    //数据源
  var array=new Array();
  array[0]=new Array("华南地区","根目录","华南地区"); //数据格式 ID，父级ID，名称
  array[1]=new Array("华北地区","根目录","华北地区");
  array[2]=new Array("上海","华南地区","上海");
  array[3]=new Array("广东","华南地区","广东");
  array[4]=new Array("徐家汇","上海","徐家汇");
  array[5]=new Array("普托","上海","普托");    
  array[6]=new Array("广州","广东","广州");
  array[7]=new Array("湛江","广东","湛江");
  //--------------------------------------------
  //这是调用代码
  var liandong=new CLASS_LIANDONG_YAO(array) //设置数据源
  liandong.firstSelectChange("根目录","s1"); //设置第一个选择框
  liandong.subSelectChange("s1","s2"); //设置子级选择框
  liandong.subSelectChange("s2","s3");
  
  
    //例子2-------------------------------------------------------------
    //数据源    
  var array2=new Array();//数据格式 ID，父级ID，名称
  array2[0]=new Array("测试测试","根目录","测试测试"); 
  array2[1]=new Array("华北地区","根目录","华北地区");
  array2[2]=new Array("上海","测试测试","上海");
  array2[3]=new Array("广东","测试测试","广东");
  array2[4]=new Array("徐家汇","上海","徐家汇");
  array2[5]=new Array("普托","上海","普托");    
  array2[6]=new Array("广州","广东","广州");
  array2[7]=new Array("湛江","广东","湛江");
  array2[8]=new Array("不知道","湛江","不知道");
  array2[9]=new Array("5555","湛江","555");
  array2[10]=new Array("++++","不知道","++++");
  array2[11]=new Array("111","徐家汇","111");
  array2[12]=new Array("222","111","222");
  array2[13]=new Array("333","222","333");
  //--------------------------------------------
  //这是调用代码
  //设置数据源
  var liandong2=new CLASS_LIANDONG_YAO(array2);
  //设置第一个选择框
  liandong2.firstSelectChange("根目录","x1");
  //设置子选择框
  liandong2.subSelectChange("x1","x2")
  liandong2.subSelectChange("x2","x3")
  liandong2.subSelectChange("x3","x4")
  liandong2.subSelectChange("x4","x5")
    </script>
</html>



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

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