Board logo

标题: jsp+javascript打造级连菜单 [打印本页]

作者: admin    时间: 2007-12-5 17:43     标题: jsp+javascript打造级连菜单

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
: U& A) }1 V3 F% @% S  B: v' J         c pageencoding="gb2312"( r. ^9 T4 Y9 p" H6 f/ n9 C3 Z1 V, K
%>; P$ S# o7 k/ \- [+ J
<style>( x# h+ C7 `3 Y2 @3 J/ D# `3 k
.f9{ font-size:9pt; }4 {- m. c3 p$ `+ B: H$ J
.bgc{ background-color:#aecaf9; color: #0033ff }" r8 N* \8 ~# q5 _+ J. x! E
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
- x: p+ a9 d. z6 ^  border-bottom: solid 1px #4e7dc1;
; ~1 @6 Z( b$ B8 `# ^  border-left: solid 1px #aecaf9;1 _1 j% Q% m9 |  R- a
  border-right: solid 1px #5679bd;
8 ^( \5 Y2 [  F1 d; w  padding:1px;
8 @2 [7 o1 D( x8 V7 G  margin:0px;}
- o- q- `: i0 _, b* c- d7 I</style>. v9 Y* Z% N% s
<script language="javascript">
# V1 F6 n: s' i# {  u% P<!--
; L9 ^- v1 k2 {9 s, Wfunction rv()( u1 S% N! S; y( M; _4 w- r' {3 T$ N3 a
{
4 g5 Q* B! I& W  var val="";" s5 M- `  L3 g) v( G& [$ q  o2 }
  for(i=0;i<combo_box.list2.length;i++){
( K( Y) }) D0 r5 J( |2 @5 j   val+=","+combo_box.list2.value;
( r/ [4 r8 s* j6 ~  }  A( Z: v+ h2 Q0 |6 Q9 E
  if(val.charat(0)==","){
" U2 I0 @  b4 P4 u   val=val.substr(1,val.length);
8 J3 u% [) j, E$ ^- N  }. s5 _2 q& V2 G+ m; w% i, n  I! H1 u; A
  opener.form1.frecname.value=val;
; h/ @6 ]8 i' T2 L& d  self.close();% y) r" g1 C: z& W( E2 O" b
}
2 w: q2 \: W6 g* Y" q& X//-->
1 V. x' H" o# \) T, [1 h! @</script>
7 [9 h! g+ W9 |! k1 \9 d<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
# J' F! Y) n; s. j6 J<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
  A3 }* J7 I3 W* F" f! g$ F5 f- U<%% w5 M4 t6 x5 r) L
  cdatasource ds=new cdatasource();  //数据联结bean实例
: j1 {( Y# f8 v" m. O; H$ j7 S  y  java.sql.connection conn=ds.getconnection();
( e4 b6 k( Z0 F. e6 v6 K1 L  java.sql.statement stmt=null;
& ^! D9 z* u( `9 b- v  java.sql.resultset rs=null;
5 s) `9 j2 k+ r! z! W( z  cdatacheck dc=new cdatacheck();
) F- D7 d" y8 J* |7 c3 f; l%>
* h- a5 q- o8 f& K8 s<%" n; F( e3 |" A6 j/ e" p1 s
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";& w6 h8 T' R2 ^8 v# ?
stmt=conn.createstatement();
4 ?8 W4 A: [+ b) |rs=stmt.executequery(sqlu);" h; W/ y' p! l. i2 t  M- z
%>
8 }3 ~# ]% d9 z' y( A- i: b& \2 q<script language='javascript'>
: h* N) o1 C( s# S  H: L# B" a$ P% harr = new array();( y# N& o8 _4 [) h$ {0 d6 L+ J' K
<%  int temp=0;& N2 t' y6 v8 b  Y4 j& |3 U( I
while(rs.next())1 e) K( a6 m7 i0 X9 }' W& D, D
{
7 N4 j( H) d+ l& E: O0 _% Y%>/ w4 U; l. g5 S" _* b
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
3 D* O+ e9 \( D; b<%
& W8 k: y+ _3 D, w& Ltemp = temp + 1;1 S# v- Q( _7 E, N+ v' h$ ]/ j( k
}
! a4 E1 ~/ f1 }+ k%>
8 g. L: C1 q. i5 I, J; `temp=<%=temp%>;
0 I7 A8 F& k9 e* ]. Rfunction changelocation(id){ 2 L; c) P, l9 B7 Q5 J
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 ) X% k7 f. d0 x/ J  q
var i = 0;
" M) A8 l  J( d6 B, g% j. wdocument.combo_box.city.options[0]=new option('-------','');
' N( X0 C4 t% v9 T2 \9 Nfor(i=0;i<temp;i++){
  ^! Y* }6 D. C) ?1 W' Wif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
/ w' R& Q# [& M) E* }6 Z  ^document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
! l8 \, R4 l$ L" c- g( W}
6 Q5 m( \: A) ~7 I& B8 E# ~9 F}
  \9 W0 f7 T5 I$ @} % _2 c: `' w) g
</script>5 i; M/ e3 z6 `6 \( w9 F
; K$ n0 U3 X! y. z) E
<form name="combo_box">
. a  K( j+ s3 Q<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
/ w, h7 p# r( f7 d% X  <tr height="24">
) H& S* j% `  l, z# b- k6 C    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>% S! G& p3 Q; C& E7 @  {
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>2 G3 ~/ \1 U: c+ n
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>" x8 i: D. |6 P( @1 T
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
2 }5 K2 Q2 i( Q/ z  </tr>
1 E/ z- j- p; W! \. w) Z4 a" u  <tr> # K1 q5 V% Q8 |2 U# Y3 ^- W4 j$ Z
    <td>( M: u0 Y) e- z! O  g
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">( k1 }+ l( n. [9 n2 C1 l! m. y2 V
  <option value="0">请选择部门 ---></option>$ e) R/ @) X; O2 X
<%
1 q  Y  O/ @* d8 c" I0 Z" s    string sqld="select * from tdept";
. T. A  S! e7 k# o3 R4 j5 O) l+ fstmt=conn.createstatement();
; }. |6 _& n. ]$ B0 Q, {- ^rs=stmt.executequery(sqld);* p- ~* e9 B; ^2 S7 N
while(rs.next())% D$ M3 Q8 H8 u& y! H
{
. v7 d6 z3 ]0 f1 H0 F" w$ c' C. }3 L%>4 Z% `5 |7 R4 t/ ~+ ?- F
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
4 {: M$ _# @3 `2 D: V8 M, w<%
+ p9 l  T2 G5 Q, u}
1 K5 m' E3 `7 |. x+ `%> : c' h5 v- T; C
  </select>! b1 g6 M& P# b" M
</td>: c/ o2 a2 A8 r; h
    <td>; k+ C; U  }' A5 T6 b( |& i
  <select multiple id=city style="width:150;height:200" class="bgc">
* T  u' Y2 a0 b  </select>0 i3 p0 ~  d- P8 D2 I7 Y
</td>
+ O- u: D8 }4 X; I    <td nowrap align="center" class="bgc">
- p' g1 t( Z: D0 |' `9 s- f  <input type="button"  value="<<" class="buttons">6 _' {# U% G0 F0 ~4 g, [
  <input type="button"  value=">>" class="buttons">7 {" R" L( g1 [' `
</td>
, B4 L: C2 J" H! U5 v- ~4 M8 |    <td>& w% C8 ~) J0 D9 ^0 n# D# w7 q3 r/ x
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">+ i9 b, S3 y  b- d  r$ f! I
  </select>
4 _& K7 l- M  k3 X/ w5 G6 d6 o2 D</td>
) L& n7 T$ V$ y$ w+ F+ A  </tr>
5 B9 a. b) I' C) N/ E1 c    <tr class="bgc"> 9 d5 J  G/ P- s! E+ ^0 u1 V
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>, }& J0 \/ P2 t% P: H
  </tr>
" W0 a; B# ]! Q</table>  p7 B4 v7 j( g( w! w( T
</form>) G, Y. ]% g6 y0 i& R# v5 N
<script language="javascript">/ U4 d* u- g! o6 |( ~
//人名移动& D( Y2 O# }8 a% H0 x% T# c3 J
function move(fbox, tbox) {, Y4 p5 x2 a* R
var arrfbox = new array();# ^# D" v( y5 ~4 v) \
var arrtbox = new array();4 A! U$ P0 b1 {) Q2 [7 L* i- B  S
var arrlookup = new array();1 u/ v9 c6 e. w" B9 B2 _
var i;
( m* o  _% f5 b9 _for (i = 0; i < tbox.options.length; i++) {: n* {. L. B4 c- @9 Q+ q7 ?  ?
arrlookup[tbox.options.text] = tbox.options.value;0 ]# R; ^4 _' D; @0 w/ N" u
arrtbox = tbox.options.text;9 m; ^  v- D4 @; k* S4 H! ^
}
! @1 k$ k) T4 }: [var flength = 0;: J  w0 n) {* O
var tlength = arrtbox.length;0 u$ \1 \. C6 D4 R
for(i = 0; i < fbox.options.length; i++) {
; R! s( e8 Q3 yarrlookup[fbox.options.text] = fbox.options.value;
, ~/ H- {; Z: U; qif (fbox.options.selected && fbox.options.value != "") {
4 i5 u2 _( i0 ]$ H5 h' warrtbox[tlength] = fbox.options.text;
+ t/ o* K2 n" f: L) y6 d$ t1 stlength++;
/ M& D9 f* W6 e1 j1 P2 H& M}
8 K4 x4 w2 ?3 k: k0 Q4 P5 l  [- O2 ?else {
* f2 I' W( \/ k# O" H( Yarrfbox[flength] = fbox.options.text;+ }  u) @9 y, Z- `! I- ~
flength++;
( t+ n+ H* p' W( B: x! D   }
0 n  h  C, g  }5 J* p}2 r" O" I& F% \9 k+ t
arrfbox.sort();0 E( |5 B4 W- @# E: O
arrtbox.sort();
* f( Q, f) m! m
/ Y' O" _& o( h, D+ p1 |+ V3 n# E) A5 pfbox.length = 0;
* D% Q# r: n; ]2 S- `$ Gtbox.length = 0;
" N( V, f; X2 @0 w- a, gvar c;
1 [: j: M, I9 y4 I  vfor(c = 0; c < arrfbox.length; c++) {
+ Z: m- [7 @, k2 N( ^& P5 M9 F$ Gvar no = new option();
6 D" l3 P$ q; d+ Q1 _% @  H, ]no.value = arrlookup[arrfbox[c]];
* N& Z% G9 N$ v+ D" K( u+ }+ h& F6 lno.text = arrfbox[c];
3 J, g% y4 s& B1 wfbox[c] = no;. R1 r+ Y7 b2 D8 Q+ f3 K
}
6 ?1 P) J1 ~- E  u- N) i% n' c; P4 afor(c = 0; c < arrtbox.length; c++) {% r7 p; G0 e  q, p$ ~& S
var no = new option();) S8 I$ f, L! z/ w
no.value = arrlookup[arrtbox[c]];
" e0 q  C; `2 I5 Y6 lno.text = arrtbox[c];
2 }" O2 e* R. K" e( J1 Vtbox[c] = no;; B* C1 X( `+ _% T3 J( S1 i! z
   }
  w5 |2 q3 b3 U}
& D7 H# y2 c) e, H$ }</script>
* S/ A# i7 r& }4 u' F! D! R</body>
+ a. ^$ @$ F8 ]2 j, p  d- R





欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2