Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"% x! }: F  {  t! C" f5 i+ y2 }3 }" c
         c pageencoding="gb2312"
1 D! ~/ [7 |. i. i$ p+ l%>
) t( b2 e8 p& O' n3 q5 F( M+ F# d<style>
: o" e- k! j: ?% t6 q8 Y, }- G.f9{ font-size:9pt; }
- I9 s. N/ M6 X5 F8 X! r& J1 x, c7 F.bgc{ background-color:#aecaf9; color: #0033ff }2 y, M* j2 b1 |+ w. w
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
2 F1 H- o8 K( M; ~* G. j' J# g# T  border-bottom: solid 1px #4e7dc1;
. F  v8 H9 I2 v  border-left: solid 1px #aecaf9;: O8 F: J% G" t. q- F* F" i4 u8 U! m
  border-right: solid 1px #5679bd;
- q8 y1 x  s  [3 x0 R  padding:1px;
) d+ \# J+ F' M1 O  margin:0px;}0 D% a2 O) U0 d: g' W6 P
</style>
3 I& C7 a- R+ ?$ G- A) S<script language="javascript">
7 O$ J; N) B( J<!--. B! V$ Q1 o9 m# M% l3 ^
function rv()0 |& t$ s/ K! M4 d! c1 k
{  A: A( j8 P* ~+ ]9 E' O9 s: t
  var val="";
; C5 v0 Y1 p2 m  w  for(i=0;i<combo_box.list2.length;i++){! s3 s' H3 z1 o+ j
   val+=","+combo_box.list2.value;
% A) T6 L8 ~- K! O; u: K0 a. d/ d  }
8 b% x6 o) o$ O0 V9 x) n  y  if(val.charat(0)==","){
" ?- C" t+ y+ c* y; y   val=val.substr(1,val.length);: Z- M1 w6 J" C5 f# x7 c
  }
& a' g( R+ w$ j( J6 n8 ?  opener.form1.frecname.value=val;) Z' R4 V1 c6 @$ Y
  self.close();" Z- U* S+ }- k6 ?# W+ c
}9 A3 h  G- k3 l$ C8 r/ v
//-->, v) k% w* U9 l/ h. A8 i
</script>, ~1 C& P3 ?* _  T
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">( S* K* e, r6 ?# h3 y' Y
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
) L6 B2 V' S8 W( ]/ C<%9 m* m, e/ ^1 H- q" @
  cdatasource ds=new cdatasource();  //数据联结bean实例0 e0 X1 G" J" L. U- y" t/ ?
  java.sql.connection conn=ds.getconnection();
4 E$ M, Y) R  h' ^  java.sql.statement stmt=null;
* i- e) a  @: ], K  `* \) r  java.sql.resultset rs=null;
/ g: Z' ^. f$ G6 M  cdatacheck dc=new cdatacheck();
6 A) m, B' c; e- l. P! i2 j& u( k%>$ R' i& x3 Z7 I6 |# ]; T" }
<%  W6 {6 U: I% r8 c6 I( _- V
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";& L. Q* S0 A+ C) G. _' J
stmt=conn.createstatement();
% p3 J4 Y2 _: ~' r; L- i. ^rs=stmt.executequery(sqlu);
; g( Z6 Z/ R5 d2 H%>& X3 w8 H' t4 E" h8 r5 p1 a$ _7 z
<script language='javascript'>5 S2 _  d6 m$ S% s* J
arr = new array();5 s9 m0 N# K' _' i5 s
<%  int temp=0;
1 b; K- T$ ]: w. v3 U# X2 Fwhile(rs.next())
1 Q6 b- ~1 f6 E6 g{; {1 r, E* U( w# M* z" g
%>
0 m" C6 A. D# s0 |arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");* w4 P" C! U' u* y6 T
<%; z+ o' w% i' `$ {' _9 ]2 v; [
temp = temp + 1;; q( Z0 T5 X- k
}
/ X: i4 M" V5 ?8 Q8 G) d; a  s%>
+ U& b$ C) X; i5 [temp=<%=temp%>;# n' [# ^3 E6 B9 \6 H5 o  @) O
function changelocation(id){
! y" m/ U! d! D$ K+ R! |) R! hdocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
7 S, i: `' Y* W2 G8 svar i = 0; 8 N, p% T$ \$ @- |5 ^: X) K
document.combo_box.city.options[0]=new option('-------',''); 4 s2 D( q8 P$ X  |4 i8 j$ K& }% ^
for(i=0;i<temp;i++){
( _" L/ @$ ?+ [  _& a: hif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
0 t# i3 d- y8 Q7 Y0 O0 T% Sdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
5 D  I6 W  _! H2 G- e$ F  w}
( {: z7 c1 H; o' h5 ~* j9 p: s; |} ' w5 O+ `7 o9 p+ [6 W( F
} $ |: X7 A* t0 n
</script>
& R! P( ^2 t$ i
8 R& H" w2 y, E) s  d<form name="combo_box">  z: S3 b5 a5 M$ E2 s9 `
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">0 y1 E& {: f1 b) H, L2 U
  <tr height="24">7 R* l  R2 J( f  d* Z, N
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>& A7 O. U4 U0 \' X$ b
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
( P) I3 l. y0 r0 ?1 _; O    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
( y5 K; Z; @/ t0 s5 u    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>! i. d: I( Z! o! w2 s$ W
  </tr>! O* j- H& X* |5 c- `  {" i
  <tr> ) f; G* A* o" \9 I
    <td>3 c3 @. F) [1 y$ D7 p' m
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
& M) H7 o5 m5 L. u5 J  <option value="0">请选择部门 ---></option>! M4 L0 P& H) }+ Y
<%( m3 k" E) R" A: D
    string sqld="select * from tdept";
  A* g! y. I) t& e- c) Q" m( Qstmt=conn.createstatement();
5 Y$ p/ A: _4 K( [rs=stmt.executequery(sqld);6 ~  N( F$ x9 i, \. v. h. y' w! f& ~
while(rs.next())
( T5 C: {) X0 I0 T3 |! C{
6 r" K, ], s3 J0 }2 ]: j3 F8 P%>+ n  a' R/ }. s$ G# S
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 B  e2 c7 d- L# p3 e+ J. z- L<%- N  l, F4 u: _! A; r
}" ?7 _: _8 c; T
%>
! V) |' T1 |+ _: V  [  </select>
7 Z; k. \6 s9 g6 a- [: S9 Z</td>
" A6 u( h2 }$ n/ a8 w    <td>2 Y" K; |# u8 P2 f/ B
  <select multiple id=city style="width:150;height:200" class="bgc">5 R6 `( }$ ~' U: O! ?8 J* `
  </select>
3 ^; k, `: \- {+ _' s* U8 t* s</td># S+ D3 N1 y6 ?: F7 E
    <td nowrap align="center" class="bgc">7 |* }. N) z0 K# J  L2 z) _# S
  <input type="button"  value="<<" class="buttons">
2 _. ?2 w( T6 T( G  <input type="button"  value=">>" class="buttons">( B& \- [( [7 {. u
</td>
; c& ]0 K& S  X7 M: k9 W. R, z    <td>
  O% J- l" P; V2 U$ G  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, L) i! j8 _. C* r  </select>+ v. e7 `9 }7 z% ^' h0 j! O
</td>
5 n: P8 }- f4 @) x# h4 n9 p3 \, _  </tr>2 J# \% S# D7 v2 O7 G) X
    <tr class="bgc"> 3 u: z& A) s1 a; U
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>' `( p: |, |6 s5 }# C, L
  </tr>
/ x0 d/ |/ u, i1 s+ m</table>
' j- C1 @. G! D0 U% M  n. G</form>
' ]* }1 E+ W" l, {+ R4 o. x6 C<script language="javascript">
2 c  N$ @5 D# H& d//人名移动/ `5 T5 P: s. ~. ^" y# c
function move(fbox, tbox) {/ u! v, f5 k6 u% P! d- r4 e
var arrfbox = new array();; {$ L8 p/ L1 G! h, H2 F& R$ @3 M, X
var arrtbox = new array();
$ Q( m1 {! v! y  \1 m7 @8 Wvar arrlookup = new array();  C( D' x* \" `4 `" Z  F: t- {
var i;0 O: x% h" C! J4 s6 [! W
for (i = 0; i < tbox.options.length; i++) {/ ]- x0 H* a, T) Q
arrlookup[tbox.options.text] = tbox.options.value;
% \  ^) t+ g# e* _arrtbox = tbox.options.text;, j+ E" _. ?. S# x" _+ d
}
# T: e. r5 O: ?6 dvar flength = 0;
: h# X# \/ s0 c( d' h6 Y; k4 \var tlength = arrtbox.length;4 {' j) R8 A; K) f: R' V9 W) P0 L8 P
for(i = 0; i < fbox.options.length; i++) {1 p5 u4 Z( U6 N" [5 T
arrlookup[fbox.options.text] = fbox.options.value;
) F* q  X6 x( e" kif (fbox.options.selected && fbox.options.value != "") {. O! l- y9 p5 o3 k
arrtbox[tlength] = fbox.options.text;( l) S- O4 U3 ]6 g: {' b
tlength++;& b, ^& l1 q* s' k( D
}
+ l1 ~/ ?! h8 o) _else {' R9 D% }$ j5 `# J: z# H
arrfbox[flength] = fbox.options.text;+ U6 n9 l7 Y  l, Y( C& n
flength++;) D; h. r; \7 i, \& t
   }9 f) D* E( ~) s) V5 u: ^' z
}) h! ?$ X& L; g& a& {9 Y
arrfbox.sort();
* S: I1 {' [8 G1 G, ~- ^arrtbox.sort();3 d  s+ M2 B* I! A

  i" [( N  r$ x# q& U' p5 efbox.length = 0;
9 X5 [7 s& a; A/ Ztbox.length = 0;
) H) w  n- s# C# Svar c;  v" b! L1 _2 m: p$ ^. |4 x
for(c = 0; c < arrfbox.length; c++) {' ~3 R0 _3 C: c. H+ z
var no = new option();. [3 Z) z" S  J+ d% |
no.value = arrlookup[arrfbox[c]];' f) c7 f7 {9 L
no.text = arrfbox[c];
& Y+ f* L! ]6 v' m( H$ \, f8 _4 zfbox[c] = no;! z, j; N: o5 h$ H5 z! _+ j
}
& G5 [: p8 L% M' r; [  ?7 x( sfor(c = 0; c < arrtbox.length; c++) {, ?5 G/ O) V' E! m- u
var no = new option();' f8 g8 Y. D8 c. {0 p. ]
no.value = arrlookup[arrtbox[c]];
* A/ e% y, x9 [: k! mno.text = arrtbox[c];% V6 X$ i' g+ @# m
tbox[c] = no;$ t+ s6 K( |+ K7 D3 y+ J
   }
/ _( \8 ~+ o& h/ _% }}! Q. w% C* k* s% s
</script>
" u" ~. s0 X' \% b' Q- f</body>/ T! i6 ~( U8 A2 ^





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