级联菜单二

最新推荐文章于 2016-07-24 17:23:57 发布

追随进化

最新推荐文章于 2016-07-24 17:23:57 发布

阅读量665

点赞数

分类专栏： web开发文章标签： javascript class function string microsoft html

本文链接：https://blog.csdn.net/kang275284/article/details/2058530

版权

web开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jsp+javascript打造级连菜单

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

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

</body>

从后台传过来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" >

</ 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>