Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"7 w: i1 Y6 M/ e' A3 j5 Z  S$ _
         c pageencoding="gb2312"; |0 A) n- s- `) S4 \
%>- z" }+ ~) {! J9 ]* a$ r; e
<style>3 v2 v0 d# l& A& R7 F9 g
.f9{ font-size:9pt; }+ B: b! e. I* w) `
.bgc{ background-color:#aecaf9; color: #0033ff }: x8 S- s9 \, k% O+ m7 L. `
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;! \* v2 C& n9 s' ?% D2 z& H
  border-bottom: solid 1px #4e7dc1;; O8 e6 p1 ~) K4 n
  border-left: solid 1px #aecaf9;
  ]8 d, G, P  {$ ]/ ^  border-right: solid 1px #5679bd;" K1 ~0 i: r. y( s, b
  padding:1px;: ~! ~" x$ P2 r* ?3 p6 D9 \
  margin:0px;}
5 X2 A) t+ u( x% T/ I</style>
3 j& X. \( F' ~* ~& B/ a. g<script language="javascript">
% l* [8 ], N, ]! Y<!--9 |- ]- j. C+ J4 r' N  `7 z6 v
function rv(). `8 `. D1 l( f
{
" G$ f1 _+ T0 B. ?; O5 r# _  var val="";
- q' w( ]" k: Y9 v' F  for(i=0;i<combo_box.list2.length;i++){# |1 j$ B3 a! m$ u/ b3 P5 e# `  T
   val+=","+combo_box.list2.value;  W6 w( M  i3 Z" p" D% N6 B
  }
+ S% V' B' B( Q: h4 {! V; n  if(val.charat(0)==","){
% I2 b$ r$ L0 M. r0 V/ s0 h   val=val.substr(1,val.length);
0 J. w% o8 }% P$ @/ H  }/ D$ G9 S# E. G9 n$ l6 u# x9 d
  opener.form1.frecname.value=val;: ^- I7 d6 G$ o2 p5 M+ I) x2 f: f
  self.close();
( B$ z" Q' f* i& f* e}% [7 b; A2 ^( O! F
//-->- e. {/ ~$ A& j$ W/ H4 s5 b
</script>
0 F1 ^2 y" P1 F4 r4 h! M<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
$ w2 k# j4 H3 h- ]. p1 Y<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
0 l2 j: P$ F8 J<%* s; ^, f4 ]. T  q" `! b3 p1 _
  cdatasource ds=new cdatasource();  //数据联结bean实例+ e! P% @8 G% Z$ }2 X3 Z. g
  java.sql.connection conn=ds.getconnection();
; x$ e4 t+ s; |; c% r3 j  java.sql.statement stmt=null;# b+ R, p; c  T: |
  java.sql.resultset rs=null;7 G* L3 r. ]; j% w
  cdatacheck dc=new cdatacheck();
  J7 s3 O( s+ v1 L4 @8 R* U%>
9 a) B/ e; e0 j1 b<%3 h- {% c5 B; r- {$ _  c
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";' d, f  Q- ?; t- p0 e/ u  Q6 j
stmt=conn.createstatement();
2 F0 h0 z. U, }3 _. W% O: [rs=stmt.executequery(sqlu);
3 e9 y7 z& \" h) l%>8 w4 U( c# p4 J1 o( Q
<script language='javascript'>
6 U- j. k+ h9 Q2 J( X) J1 E. M9 G, G3 tarr = new array();" K% B* D0 s: e% Q/ b$ ^
<%  int temp=0;' ]* a* n" }$ |, k
while(rs.next())
" [  W5 Z6 t. D  x" _* N3 G{& n. U, E+ Y$ e/ y" i% X
%>: N; j3 V$ n( f" [/ F9 q1 i
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
5 }' I, g1 q' {<%
# J) z5 {4 D# ]! j' mtemp = temp + 1;
. r8 U; w+ s* X}
7 S+ g* n4 u" Z%>
& s) ~$ n% o7 {/ Ntemp=<%=temp%>;
' x6 H4 s, X; g0 {6 \function changelocation(id){ 5 \1 J% ^/ ]4 c  F: C% a8 [
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
, _0 z1 N6 |" ?2 ~  S9 \var i = 0;
  _- |9 j  q3 A# r8 Odocument.combo_box.city.options[0]=new option('-------',''); 1 d! V: T2 y6 w- h6 |# u$ d- ]: \7 I. W' O
for(i=0;i<temp;i++){
' U+ a$ n. V) f1 zif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ) `! e+ j% |, w: z0 ~' W1 J
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); " d7 G/ r2 ~$ G6 x( @) s, n
} - |( K; {7 {; g4 d. Y
} - n9 H+ [3 G" j& r
} - }( E( n" j5 g$ _: R0 k% Z- l
</script>
( X- p% m* a6 u; ?; {* P# w9 p4 a$ p; J! r$ r" n
<form name="combo_box">
+ S% l1 s4 b% t! q+ N& B( ]<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">0 F  b5 }5 {$ B6 N, y
  <tr height="24">
. e# Y, p* ?! h/ ?% y    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
& Y6 v! J. b' u. s$ _    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>% _0 q5 n7 C/ v) Q  q
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>! ]; e/ W/ G& q( Q! g# S! i/ T3 \
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
, ]1 Z/ ]% Z# E" d- |  </tr>. m# D9 }- c5 O4 l$ M6 ^
  <tr>
: L: u& g% X# o, g& u- L9 a2 H    <td>, u: u3 ]2 }' `" [5 I! f. F
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
2 w* a5 D8 X2 d1 b, x  <option value="0">请选择部门 ---></option>
# |6 @+ U% V: L: P. V<%
  \( [/ P. v! x# A. A: L  s/ R* U    string sqld="select * from tdept";
9 a/ A, A" G/ P( N2 mstmt=conn.createstatement();
8 E: T: i7 h1 p% crs=stmt.executequery(sqld);
$ }% D2 K& @. d. Awhile(rs.next()): _& `2 E, t0 R, }
{. D" ~# M0 y4 V  U0 j" o
%>
5 ], E1 ~8 C( _! A& k" b; s: l  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
0 j3 b5 `, D) n: u<%# Y8 b) r+ j$ h0 e% ^
}
1 B% H- U- R% E5 X8 M- i- i%>
6 b# I0 f3 u  J7 p- j  </select>
2 g* O* m1 c6 E% T; P! t" V</td>
% h  ^" r4 H( S6 x4 F! v: `8 h! v    <td>
0 M! A% q, S2 B/ i" C( }9 `  <select multiple id=city style="width:150;height:200" class="bgc">: _- a) S7 Y' H9 P, q: \# e
  </select>; _6 o) a9 J1 |! F! {. K) ~
</td>9 Y, k4 A3 j- I2 f, S0 g: v
    <td nowrap align="center" class="bgc">
( S! W0 {0 w- p1 J  <input type="button"  value="<<" class="buttons">
) r) s1 t. N1 j( e4 P  <input type="button"  value=">>" class="buttons">" [5 C: R, }- D( h& l6 ~! S8 i& h. ~
</td>5 ]8 X) t: j/ T! |& x
    <td>4 \) [" ?" I' i6 y8 f9 \
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc"># P1 ?3 S1 l5 k5 W
  </select>0 R; m) \) X: u# z
</td>
4 `1 Y7 L- H) [8 d+ x& G$ u  </tr>; L4 E! D$ ~8 G! }0 U% z, r
    <tr class="bgc">
) `5 u& ?2 K7 u$ B8 E5 r% J- \    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
. I2 o3 J& H: [' w# P9 g, \( Y' l- T  </tr>& l% u# U  l4 Z, a: @2 ~6 h/ E
</table>
0 u/ w# W; @  z" ~* o% d2 G- y# N" e</form>
$ W# c( p$ ~9 T2 y3 m<script language="javascript">
8 u% [' J! h2 }9 m5 K//人名移动
0 _8 T& M0 Q- @6 A0 k" ?0 Jfunction move(fbox, tbox) {" h& b, F& m7 B. Q
var arrfbox = new array();
8 X& E+ C! O) \. }; h, l- Rvar arrtbox = new array();: ^" ]5 \# S3 a8 A( j2 y1 b# z
var arrlookup = new array();
2 \" a/ e6 H" G7 w$ K6 d6 {var i;! k' i5 E* Q' a7 K3 f4 M. N- a
for (i = 0; i < tbox.options.length; i++) {
( e# v8 c2 Q7 N9 a& garrlookup[tbox.options.text] = tbox.options.value;
5 `: n- ^' G. @3 m2 K, {arrtbox = tbox.options.text;
5 M2 v4 P* w& s  h  i0 O}
) l- z8 y6 H- Q9 |var flength = 0;
0 U* r- J# y$ V$ o5 a+ _+ nvar tlength = arrtbox.length;
4 e1 ?2 h: q/ I5 \; f. F  K$ d" L# Q/ U  Vfor(i = 0; i < fbox.options.length; i++) {5 I  m9 V* W* A2 W: c" D
arrlookup[fbox.options.text] = fbox.options.value;
( R6 e  e3 x$ U7 s1 ]if (fbox.options.selected && fbox.options.value != "") {
3 p% e0 V2 j0 Q; F9 y3 l# R; X: {arrtbox[tlength] = fbox.options.text;
0 [! |- |. d% F5 i& Ztlength++;& h& D6 _  |1 h- z- j
}# g: w% D% W2 r/ E9 ]
else {( k" X, \) f& J  ]3 P% e% E% {
arrfbox[flength] = fbox.options.text;
7 q* ^& K; n$ ?( e6 |  b0 aflength++;
2 P+ [7 D: d  `7 w9 \   }
( F$ Y# L  U3 ?" q$ b}
5 b( u# H' @1 J9 Q5 |arrfbox.sort();) L( V* N/ o6 b
arrtbox.sort();
/ n" w4 P) l* C8 J4 i+ x5 K/ s7 U+ {8 b4 X: S+ I. J+ C& V
fbox.length = 0;
4 i5 R% T0 y9 c# [tbox.length = 0;
& }' }; z3 Q& _- E, I: N  Ovar c;
6 ~. s4 c* Q; R6 O! T5 \for(c = 0; c < arrfbox.length; c++) {
3 ~& I' o/ |) c: f/ M4 ^9 E3 Vvar no = new option();" [4 `6 |0 B! D- C$ }
no.value = arrlookup[arrfbox[c]];
- p* ]4 z0 T- v$ j2 zno.text = arrfbox[c];1 q6 O9 `" D4 N7 F- m$ X
fbox[c] = no;- w! [/ `! d& h) h# Z0 T
}
1 D: o$ b1 `" Q3 t" d4 o8 K1 m( Vfor(c = 0; c < arrtbox.length; c++) {
! Z0 P2 A, K3 ^' r' d  d2 q8 \/ cvar no = new option();
+ H# q& b' U1 E' Q. Q  {no.value = arrlookup[arrtbox[c]];
# `8 g7 M/ V4 R6 Q4 wno.text = arrtbox[c];. g1 q( y- k! Q# d! m
tbox[c] = no;
( _$ X6 Z" h$ r) |6 @  w( z   }
+ q& K* s% Z, z: }. ^}
4 R! Y# l, l0 K% B- z, ?" q+ x( N</script>
/ B* C0 S8 J8 X</body>) Z. O) O# H; X! z3 _1 m3 o, V





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