Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"( \3 t3 h0 B9 _$ A( }5 @! \% y! b
         c pageencoding="gb2312"
8 L1 K9 N% B9 T, [%>
3 c& G% ~8 g, D6 e" d+ ?/ S<style>
9 L) h- L8 Q- ~/ w.f9{ font-size:9pt; }
: a6 T8 K, b/ q' {" e3 e.bgc{ background-color:#aecaf9; color: #0033ff }
( r& }3 _! J$ D8 y6 M; q# H.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;8 ~8 @2 D. F# Z3 \% ?; \9 X6 i
  border-bottom: solid 1px #4e7dc1;4 H& E' ~- v) M) n
  border-left: solid 1px #aecaf9;
1 c9 T- [0 n. X. _  border-right: solid 1px #5679bd;8 O6 l* ^; j0 n- D) t* \, g
  padding:1px;) z& N: H1 P+ x2 a. v+ }
  margin:0px;}% ~% E4 T8 W. x6 y8 v* B" [( d, }
</style>5 N! q& d" C" g! B1 l$ J
<script language="javascript">1 ?- ~' `$ p7 Z5 G; F# E. O
<!--0 E% |# k7 V/ t  X8 g  D: ^* I
function rv()
8 y' v- B7 i) a' a9 \8 F2 T' X{$ P9 w4 W& Q- x5 ]
  var val="";
3 |! }* m8 a  {# K$ D  for(i=0;i<combo_box.list2.length;i++){0 j+ G, k  H2 M$ T9 n% s0 p
   val+=","+combo_box.list2.value;9 O5 W- d0 @* p
  }, N) D: }5 T* ^8 ?1 E4 x
  if(val.charat(0)==","){* b0 Q5 z7 a# U# C
   val=val.substr(1,val.length);
7 W) |$ ?( b$ }# s  }
! k7 K& Q  M6 ]% K9 J' j  opener.form1.frecname.value=val;
7 S5 D4 }) B7 m7 L2 v; p+ ]3 l; l$ R  self.close();
/ `/ w  ]5 w  g2 ~, ?}
$ e# [8 Y4 T8 E+ L- j9 y: l//-->5 H, G2 g/ T" D  |
</script>
7 r% E% P, l0 a" w& v<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">7 D5 O! v' c9 G
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />/ O- S( e+ Q! K0 y' j) o% R6 h+ ^
<%& I+ E( j. G: Y
  cdatasource ds=new cdatasource();  //数据联结bean实例
: {" ]; J% X/ S3 h  java.sql.connection conn=ds.getconnection();
# x: I8 c& U6 b5 ?( q  java.sql.statement stmt=null;8 }/ ?+ b; r4 [2 d' z  Z* s/ q
  java.sql.resultset rs=null;- `2 G/ n7 C" l! N
  cdatacheck dc=new cdatacheck();
) D: k8 ^+ m# B$ |%>
2 ^) Q/ R6 s$ z- q7 v<%+ [: o( m" u! B+ |) x% Y$ v* R
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";
3 ?. O1 r; w. C# n7 E1 C+ R1 bstmt=conn.createstatement();- D" \+ W" i  g: _8 \
rs=stmt.executequery(sqlu);
$ l* E& h( G5 z%>
: l8 s6 D# p; g) a<script language='javascript'># {$ }% A/ f0 W. _6 W
arr = new array();! X2 W( @: s, G
<%  int temp=0;
$ P. z7 V# \6 Nwhile(rs.next())% v5 G1 M$ n9 v9 p; I! F
{
' j/ @9 m, W0 o( U: S9 u, [%>
% i8 d* R: W: a1 p' c2 X" Farr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
& B0 U: C. A0 }' o<%8 B6 e) e* ?  o
temp = temp + 1;
9 a+ f) G& }8 Y# w$ T}- g$ F" ^6 }6 M/ o6 {$ ~
%>  T! q5 M8 K* b* R8 \
temp=<%=temp%>;
& L# J! W! s5 G# [function changelocation(id){ 2 G! I* t4 N9 z& m
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
0 J4 N& O8 O; J) z5 bvar i = 0;
& b' z2 u& ]1 |$ @( pdocument.combo_box.city.options[0]=new option('-------',''); 3 A1 _, x* d! d& q: O; c$ L
for(i=0;i<temp;i++){
% U( ]7 W! }% g9 \4 I. m/ uif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
  z4 T0 s$ r& Z7 F  ]( `document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); ' v' S' ?  }) w0 K  n8 S" o
} ; V$ {' r) ]: `- s
} % U4 W  j9 Y5 `3 q+ b6 F# b
}
$ E8 f: y, i* f* l! L- A0 ^2 H</script>* g* i1 r9 g3 }5 p% c

( ?' O5 A1 A% ^( @% n, A<form name="combo_box">
" x- L; C& m, D% B<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
- e; u2 v) J/ T  <tr height="24">% f, [' e8 b  m! U) @1 X
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
& }9 e; O  J3 q4 t" R    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>5 N& R; w3 Q9 O' t
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>3 w& ?- `& Y2 s. @- A
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
+ x& C' j) N7 i2 i  </tr>
! L- n1 F* ^* J3 C  <tr>
* {3 F( e/ h! a7 [: w    <td>
( ~1 ?; n* y% j, L0 m, t# ?  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">1 {; `& e; E# ?# C- A0 z
  <option value="0">请选择部门 ---></option>' M: m% a) T; g* t* E. R5 C# y
<%
. ~/ m. _3 f/ j* |2 r' A2 A8 b7 w    string sqld="select * from tdept";
0 D9 L/ ~2 S% t4 k1 h/ H( cstmt=conn.createstatement();
' _# _+ q" O1 A" x8 M  S2 V" `1 Frs=stmt.executequery(sqld);  m4 P, @3 S/ Q
while(rs.next()); m# @* j8 t" l6 }2 G
{
, G6 x+ w. |, T%>
# {  E  r2 c$ v( N  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
/ Y; T7 K: v) \% L  c<%
6 O1 N$ n9 U! Q' a1 b! w}+ O$ \* f4 X2 {9 Z' P* {% @
%>
: H4 \- I! }' j" r* I. r' y: S  </select>
2 v# U9 c$ F; j: z8 T8 ]</td>
, B; ^9 t+ [; P! T9 _. O+ x' q    <td>
! @& j7 h# b) j, u1 H  <select multiple id=city style="width:150;height:200" class="bgc">2 o! [: s# S" x) z' k' b
  </select>
9 l) m3 w, a2 x3 z</td>
& O. B# q( c5 J2 A+ x) I    <td nowrap align="center" class="bgc"># q( h! b5 T  x& ~& s! G
  <input type="button"  value="<<" class="buttons">6 N. N- _! a, z) A
  <input type="button"  value=">>" class="buttons">' x, ]1 o4 q( a* T
</td>% f' n% }+ t/ E
    <td>/ g4 Y5 g# b( U2 m
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
0 R5 g* n" o  o+ H1 E5 B  </select>
' V3 K. d+ ~1 S3 D9 u- O</td>" I) z/ t6 q$ h' g0 X6 Q: u, Y
  </tr>
- Z' D" h2 x9 K" C: s) p    <tr class="bgc">
; n1 `' R, S3 _" D4 i    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
5 ~! N) W% v, ^. p8 W7 ?  </tr>  j& B) x4 a7 A
</table>+ f4 [& E( e! _
</form>
( N9 c. `/ a. x3 q$ Y4 i) Q; ^<script language="javascript">1 k2 i* Q- Z7 b
//人名移动* t& k. Z; f& U: S7 g+ b: }
function move(fbox, tbox) {
' s/ o, s3 v7 `var arrfbox = new array();. B- I) {( u  d+ e9 e
var arrtbox = new array();
" e7 u7 ]' @: E1 o# a* S0 Avar arrlookup = new array();' b1 |2 @6 Q" _+ V) p/ G* @
var i;# g2 I8 ]* y5 B. V7 r
for (i = 0; i < tbox.options.length; i++) {
8 w& M2 S2 F8 parrlookup[tbox.options.text] = tbox.options.value;$ k9 r/ K$ `: K5 U2 N8 F+ }* B
arrtbox = tbox.options.text;
5 b) I2 t* ^) q# ]}
( U0 }& u, Y; I2 [2 f0 [/ E! t  lvar flength = 0;) B& \3 q" q* w& N
var tlength = arrtbox.length;
* h& Y% {5 \# C7 R8 Y( l, |2 Dfor(i = 0; i < fbox.options.length; i++) {
. j& H2 ~1 R, O0 C' B0 D# Earrlookup[fbox.options.text] = fbox.options.value;) L9 Y' U6 C- a7 }
if (fbox.options.selected && fbox.options.value != "") {
: ?2 M# l* N% `arrtbox[tlength] = fbox.options.text;# z$ U1 f' `; j/ z2 j3 u" r
tlength++;
( l- F9 W9 j: q% o" b4 |7 f}
0 F3 D2 e( h1 `# Q8 jelse {# z1 g  x3 V& A1 d/ j
arrfbox[flength] = fbox.options.text;) K; _( k/ V/ t& H
flength++;4 H7 r7 C. G2 T! }: ^
   }
/ [- M: O/ u. ~: o" u0 r}
8 G5 o8 n4 d1 W" Z. d" Q. Rarrfbox.sort();
  l# Z  R2 w* M2 zarrtbox.sort();  f% I, S% Q' [) ~' E

- `# x$ H2 g6 {* K/ z" w' b, pfbox.length = 0;' p( ]- \4 ]/ Z, i' t6 k$ Y$ E$ w
tbox.length = 0;
1 |# S9 V) n( n4 X, f7 jvar c;8 h2 o! _+ E8 L8 H5 j9 |" M, S" q& f
for(c = 0; c < arrfbox.length; c++) {
5 I- s/ q! V# ^) _" k1 ?4 Z+ lvar no = new option();5 O- r  a; y4 C7 `
no.value = arrlookup[arrfbox[c]];
0 H( O9 c% \4 N0 _% r+ ]) {. e- sno.text = arrfbox[c];3 @' z) h4 V8 D. U% G: }* L
fbox[c] = no;
7 l0 w5 |. {2 |* q8 N}
/ O3 u3 M" z$ {6 Ufor(c = 0; c < arrtbox.length; c++) {
. v$ N% Z) ]* @9 ]( v& _. y; Y$ Avar no = new option();0 z# `( v! r# ^$ c9 A2 ~
no.value = arrlookup[arrtbox[c]];
- t. P1 R  M& i' j* Fno.text = arrtbox[c];
7 P/ j! }, p' Q+ ]4 F4 l7 m$ B$ etbox[c] = no;8 E1 r, a9 J6 d/ Q. o& N
   }
& @1 W" E! n' H4 C2 E}
& o7 B$ k" m) |9 ^3 ~. M* d' f</script>% L( t0 J+ M& d0 u3 t$ \
</body>
& O0 S' `6 l1 d





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