Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;") p, U+ H$ e7 T( m" \
         c pageencoding="gb2312"- ?8 C' D1 m8 W% N. u) g
%>
5 o  N# M* {6 O& Q, L<style>/ {8 d" c% S/ @
.f9{ font-size:9pt; }
6 {4 P$ R, ]; W$ w& K8 z$ p.bgc{ background-color:#aecaf9; color: #0033ff }) G* _7 V9 R; D" H
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;. G+ x( J# i+ @4 M$ w* Q; ~* @
  border-bottom: solid 1px #4e7dc1;
* E( l2 }( V1 i  border-left: solid 1px #aecaf9;* d; C; k  x! a  n5 ^; g/ e
  border-right: solid 1px #5679bd;1 l( Q- |2 F2 E& e$ Y7 I
  padding:1px;( k! O  Q) Z2 Z0 Y. ^
  margin:0px;}9 e. _' g& l, }2 r
</style>& }" x' v" t. a* q0 J
<script language="javascript">. R. X, r, D. C
<!--+ B" U5 i) o0 {5 L5 m; w
function rv()
$ q' r2 K8 N' Q9 L" S3 N{
! w8 T7 e3 @# B7 _" x' d( j  var val="";/ Y/ f, ]$ R4 @. t
  for(i=0;i<combo_box.list2.length;i++){
- d1 T( {8 R5 n7 \   val+=","+combo_box.list2.value;% d: ^. }5 @/ y( c
  }
3 L1 {* ]. {! k+ K  if(val.charat(0)==","){
0 @9 K- Z& ~. r* v" O% z   val=val.substr(1,val.length);
5 Y# @  }# A6 T7 ~. v/ Q1 s  }, b5 t3 L% I* t/ d
  opener.form1.frecname.value=val;1 W* K" y' q7 E# r) n) W3 a
  self.close();9 R# u1 x! l, V4 o
}
) o, g) |4 [5 }5 ~//-->
* Z2 M' H- p" H3 t</script>7 W7 A0 z1 o' k; Q6 \0 O  p1 q4 @& f
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
4 t6 p& s9 o6 l, k5 Y<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />: ^* b* m% b( D
<%% r: q2 I, y0 J: o
  cdatasource ds=new cdatasource();  //数据联结bean实例
) ^  ], _  h2 @, X4 M  java.sql.connection conn=ds.getconnection();  S3 O! O3 j: O- e
  java.sql.statement stmt=null;1 L) ~* t3 `3 ^4 t8 D4 C, N) M1 H
  java.sql.resultset rs=null;
5 N+ U  b4 V5 D( U" @) I4 w  cdatacheck dc=new cdatacheck();$ F8 d( B0 z" f! l! C
%>
7 M6 F+ n9 ?; q<%
# P6 S. s  R$ xstring 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";
" B# ?2 H' g7 G$ o. x( o& nstmt=conn.createstatement();
" s( Z. E3 j1 Grs=stmt.executequery(sqlu);
6 E: j8 d8 f3 E% g. v; a4 K: b%>
  Y( O* Q% I: U  I3 O5 h<script language='javascript'>6 ~9 G" m5 Q0 m2 c0 g- \( j
arr = new array();. {" {: Q+ u2 J0 A! t& _
<%  int temp=0;
+ d8 I' o) A2 n* ?+ O- E7 H2 awhile(rs.next())
' @" a4 U2 R0 [5 S$ p: U: H, L{7 o8 O# }6 ]$ P0 U( w$ e
%>
5 Y% c$ W; L2 `, @6 U, A  h: G& aarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
% y0 ^8 H. P. {! t% N1 C1 N<%
! m# {3 |9 b- s& jtemp = temp + 1;
) U( D! y7 w0 p}
) Y; C# y  h8 [# A8 [% r+ R%>) E7 f4 [, ^  h; X3 {" @" U
temp=<%=temp%>;
0 x" W7 `) e- v" s, b5 x3 ?function changelocation(id){ . F3 t: N: I, v( W2 C
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
1 ?- R1 h6 t* O6 f' G7 d  c% ?var i = 0;
. R. j  H2 s2 [! @+ {document.combo_box.city.options[0]=new option('-------','');
" H; g! Q+ c6 I' V2 M9 ~for(i=0;i<temp;i++){   z6 o0 h2 A. ]8 Z$ U& U5 i  R& Z
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ; {! E; W( }6 w* n3 ^
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); $ _) _0 h/ Y/ o5 I( v) M4 n1 x& X1 \
}
; d" w) q* @+ T- b! ?# `) f} & k* n6 ?9 @# `) E/ T' J# n% S6 e* j
}
3 G4 F' n, e. u# y</script>
) M' ~3 g9 P1 b' o9 Q8 T: F
, S1 e* A+ H0 b! E. i. c! x<form name="combo_box">
: E: E$ p. @1 ?; \1 H<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">; w7 ^- B' P* _$ \( J- F: }8 `1 e! t
  <tr height="24">/ i+ u2 u2 |/ E4 p0 j5 a  ~
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>* s4 W+ }* o! f9 a9 H7 l6 S
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
- [" L0 V3 o7 j# |1 v* z5 h    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>$ i& u0 O/ a  q  S/ U  b" H$ T, @
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>* L- c% d* e1 E0 H6 Y
  </tr>/ a" a% R; k0 ~1 W& O+ D
  <tr> 9 u  T3 A4 B$ b) `
    <td>% d3 A7 t& V+ a* c
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
8 u) [+ w$ _0 R* Y! @2 D3 V  <option value="0">请选择部门 ---></option>
& x0 k0 f) ?' c( ^& }$ ?# l5 ^- g+ L<%
! C7 J5 W; l7 l! s    string sqld="select * from tdept";  h8 v) j5 L4 n; q# Z' d" K
stmt=conn.createstatement();* f$ `1 I1 t3 e) k0 X( P. G6 T
rs=stmt.executequery(sqld);
/ |: m0 {1 l+ n8 Bwhile(rs.next())
# P, t0 G. F4 T/ [  F% b{
4 ~& V0 _: `7 x1 b%>1 `& {, c! W2 {2 D4 b
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
+ ?5 b( X9 ?5 _# X$ r- N<%# J% Y% N5 X0 J
}6 `. u: B1 s' E. H
%>
& O" J- }# a. a  O7 b$ L  </select>
+ O6 j3 |- d6 a& C; ?3 c- z</td># A- E  d8 M8 g1 k- R; P- F
    <td>
/ a" l. e5 }: Y8 P. g9 ?; o& k  <select multiple id=city style="width:150;height:200" class="bgc">
8 `5 f' ^+ r$ [1 N* H* N! e' R5 t& h  </select>
5 k' C9 L) D& ~: M( _</td>( r' [) P& D* j. g0 h3 ?
    <td nowrap align="center" class="bgc">
$ `& r/ @2 @1 y; W0 |# L4 o  @  <input type="button"  value="<<" class="buttons">; ]) I( r' U3 F" A5 S, ~7 H
  <input type="button"  value=">>" class="buttons">
, X) W; u' t) z: ~) K</td>
# V/ x3 ?( _) P    <td>
8 i, [  v6 @4 ?2 I6 L: S# x  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
. I5 h6 G: }; K# ]( y  </select>6 N/ @8 f( P5 t, G4 P; ^
</td>( w- e  _) K. \+ ], o! t/ k  Y
  </tr>- Z' m7 Y% I3 _6 [, h! Z
    <tr class="bgc"> 6 u+ V5 N6 S! I. i$ D
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
: F0 N, ]7 I: ^+ Y: v  x/ I0 E  d  </tr>& ?1 b5 S- @2 }
</table>' T! F' n: ^/ p* `% ]
</form>- w0 c. k. _8 z2 T( p" N
<script language="javascript">
; V: y" w% \) a6 j1 P//人名移动+ Q0 x) z# X& Q: _6 q' x
function move(fbox, tbox) {
+ J* z' b+ ~1 v, Fvar arrfbox = new array();
2 J$ ?2 I$ ~. I# i0 f. nvar arrtbox = new array();) H- r6 B% M& d  K5 o. b% P* U
var arrlookup = new array();
! h8 a+ b8 L* q' xvar i;9 K) g% J6 {+ X7 ~' V& E
for (i = 0; i < tbox.options.length; i++) {. R: O( M+ H- }6 C9 ]/ d
arrlookup[tbox.options.text] = tbox.options.value;
$ w( y9 T: f# E3 a9 ?* G1 narrtbox = tbox.options.text;3 Y$ k2 `: m7 G+ S; t
}
- X" F4 m+ `( e' Zvar flength = 0;
7 v+ D1 _0 ?: c  V2 T9 e4 mvar tlength = arrtbox.length;
* p% V, t* Q7 ^9 F+ Y9 Sfor(i = 0; i < fbox.options.length; i++) {- `9 y7 I% j' r- n
arrlookup[fbox.options.text] = fbox.options.value;1 s+ |$ v8 y' u6 L# B
if (fbox.options.selected && fbox.options.value != "") {* M0 I1 W' r+ q7 U# G9 M
arrtbox[tlength] = fbox.options.text;6 B5 x. o# v4 l! h
tlength++;
3 z3 D  T) T0 s1 D}
% ]6 u- c+ Y; _! ^* z8 f# |else {
' m5 g. B, I1 B: X9 Farrfbox[flength] = fbox.options.text;
7 C, F% u9 A  c/ s2 a6 }flength++;
5 v* n0 f' j% z- o7 Q( V   }# I1 X6 O& A& W5 u
}  w* ?5 f$ f6 a( S
arrfbox.sort();
) N- |' r  N3 r  `) M. }& _. xarrtbox.sort();
9 ^, A* z; ~$ |6 X6 I: q" ~
, A! K" Y$ r4 Q' l, @  V1 c% i$ Cfbox.length = 0;
  s, w" Y0 v6 }' Mtbox.length = 0;
" E/ I' H2 v& R+ W8 [var c;
. H9 ]2 l2 f& v9 ofor(c = 0; c < arrfbox.length; c++) {+ G: o( j3 q7 r2 K  x( Y" J3 e
var no = new option();
- D  a7 M. g5 e# ?7 hno.value = arrlookup[arrfbox[c]];
; g3 g7 S; e4 `7 [6 z) Y( ~no.text = arrfbox[c];
1 W$ ?7 O( ^( A* K- `" j; Q7 jfbox[c] = no;; N1 }  D5 H3 ]0 U& }
}" U  b6 ~. y  `& R/ Q' s
for(c = 0; c < arrtbox.length; c++) {
# `. J4 d/ |6 Wvar no = new option();
/ C: @3 \: e9 g: O' Ono.value = arrlookup[arrtbox[c]];9 l2 j" E  v" q
no.text = arrtbox[c];  J# G5 `3 o6 c
tbox[c] = no;7 A' K( w' S1 I) A& U
   }5 i& w/ j. h1 `; p9 b
}2 s+ n+ H: ^: d! A2 D/ U
</script>8 v/ n$ B) L8 ~9 `1 t* n
</body>
" I! q! \- P1 _4 M3 G0 A) ?





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