程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> JSP編程 >> 關於JSP >> jsp+javascript打造級連菜單代碼

jsp+javascript打造級連菜單代碼

編輯:關於JSP

    <%@ 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"  onchange="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" onClick="move(this.form.list2,this.form.city)" value="<<" class="buttons">
      <input type="button" onClick="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="選好了!" onclick="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>

    1. 上一頁:
    2. 下一頁:
    Copyright © 程式師世界 All Rights Reserved