jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"6 c4 N; \$ m& {1 i  L
      c pageencoding="gb2312"1 j8 C- w2 R1 a9 e) j  _7 \
%>
<style>6 H+ f; ]9 q" A" v, L  K
.f9{ font-size:9pt; }+ N/ a; u- n6 }" l1 {; M! v/ K2 U
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;. F/ V5 |  k3 E$ Y7 t$ W4 x
  border-bottom: solid 1px #4e7dc1;5 L9 f+ N/ y  a8 Y0 K4 c0 \7 F( y1 m
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;' ?# I& r8 j: ?- A: X, ~) d- h
  padding:1px;
  margin:0px;}8 j: D6 C) H$ c4 ]0 a( O4 u' n
</style>2 G  k4 @, G& h3 m& g/ l
<script language="javascript">1 ?( n: Z0 O6 S1 ]
9 c8 o; `) H* n1 l+ [
</script>$ a  m8 L: E) a/ Y. X" n
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
1 F4 T; _1 M, \0 f- d6 {<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
$ X5 r7 x; E1 d0 x<%* Z, B+ |! i4 {: S+ A' H
  cdatasource ds=new cdatasource();  //数据联结bean实例% y# T+ e8 n6 A% P/ ]5 H, [
  java.sql.connection conn=ds.getconnection();
& }' [2 H: X! l% t  java.sql.statement stmt=null;# m; X5 j; P% I. U' x$ i$ Q8 Z
  java.sql.resultset rs=null;
, D/ H' h" Y" X: o  cdatacheck dc=new cdatacheck();
& A  `$ M* ^0 D: n8 a* [%>: `) g. }& i, S
<%
, R+ Z4 [( P. E+ Y, gstring 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";/ Q7 o2 a% J3 J$ w& m7 `
stmt=conn.createstatement();
3 Y* w1 N$ H- t/ brs=stmt.executequery(sqlu);5 P, ^+ e+ @* f4 ?
%>& q; ?$ ]. R  T/ N: c2 v# T/ P
<script language='javascript'>% ~+ u' J. J4 g& U+ T9 h: ~" O
arr = new array();% v2 K8 n% j' a
<%  int temp=0;
. P" _5 |6 h' R5 v/ @' ewhile(rs.next())
# O4 I. K3 W! ?. ~9 m{
  g# `/ j2 Z! Z5 J: {%>
. b7 b& s) o+ V) U& I9 carr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");1 ^$ l) _1 u. i8 o) n! |3 K
<%
) J5 j, a  e4 F! S1 r1 C/ ~" Gtemp = temp + 1;+ n. z+ G, l) [  U: Z
}
. b7 |- d4 H; I! l/ t# _%>
( R1 N2 v; h( y; ~temp=<%=temp%>;, ]0 Z" p  w$ r# `& ?  \$ X% ~
function changelocation(id){ . h- L" b8 d1 U9 y; `9 C
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 ; H: E" l+ H& X
var i = 0; & l* V% u/ q- c
document.combo_box.city.options[0]=new option('-------',''); 5 ^& Z( E% M( U/ v8 W: p
for(i=0;i<temp;i++){
+ p- j% f1 P6 V% I  ]; xif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
5 I. ^1 n' Z3 Idocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); + x- j& A, ~$ |/ {: d; h3 I* ^
} + Q) L$ f( `$ k6 U7 x4 F* b0 Y
}
9 m; k" t; y( ?* {} & D. ?7 m1 q8 j+ f0 P8 ^% S
</script>
. O1 v8 M1 n& f* G. ~9 Y) U3 d/ h$ r: y2 W9 Z" ^9 }/ J7 j
<form name="combo_box">6 A8 k0 {/ H! p' N% J
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
6 u- X* x- Q* U, E5 M: g$ s  <tr height="24">- X; E. d4 \5 u; v& G8 o9 h. @& p; N/ i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
) s% q7 ?# u: Q: C <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>, C, ]9 w4 C  I. h/ M
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>/ X' T) i1 U9 u; X0 N
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
3 G2 ]/ I5 G3 T  </tr>
, T% Z& ~/ @4 f( W  <tr> ; K' `5 {, C5 r) D. C9 z4 c
<td>9 S2 t6 l" L# K, F# e* w
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">4 q4 {& }" ?$ q  z  c( X
  <option value="0">请选择部门 ---></option>
+ N* w; S+ u* \<%
7 Z- V% T; T' c string sqld="select * from tdept";
+ M, r" L7 I! c- x3 mstmt=conn.createstatement();
& n, [2 `% q) T# Z: P8 irs=stmt.executequery(sqld);
# p$ ~8 }7 @# N9 N6 n+ ]while(rs.next())
+ I6 m* d7 {0 S1 o" w( n; F9 p{
: D- k' e/ ^# j5 J0 ~* c%>
' n- d% \- l& z  I  S  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
+ T. o2 {. s+ _6 Q2 V+ K<%0 v/ n0 R+ e! c4 E
}( r1 o2 |& I  Z1 x- w( z+ I3 O
%>
4 U9 T- @2 o: I" q8 S5 U  </select>1 f+ |7 }. M. _( F
</td>
: U3 F! \0 L3 i7 P <td>
' m; }/ v+ W7 ^3 j4 S; s9 a- c  <select multiple id=city style="width:150;height:200" class="bgc">0 m" d" @, j; l; c" ~( I/ w" _
  </select>& N7 J- p# x9 m0 {
</td>: ]) f. _/ p$ w3 N3 q- y
<td nowrap align="center" class="bgc">
0 W- a; L, g; T) F  <input type="button"  value="<<" class="buttons">
! G. b! |' G. B; Z9 C  <input type="button"  value=">>" class="buttons">5 j4 c) @0 h. ^5 h1 ]# a: b
</td>
  @+ \+ _7 `. T$ q1 o5 l) }0 D& s <td>& X* H; c  `. N
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
. c# R0 x% N3 D3 z7 G0 j0 O3 X* _/ v  </select>
' q1 j0 j" O4 q* o3 ]# g5 @, V$ E</td>
/ o3 H( U' q- v  a# _! @  </tr>
- f  X  `" S) j# I1 d2 z$ D <tr class="bgc"> - Y4 T6 j7 s8 d, w3 x( E* k- N7 y* @
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
- u9 u, H2 F4 t  L  </tr>
: b( Q$ |0 U0 N</table>
1 m0 X" D4 k) H5 {: b9 q1 ^</form>
) R7 t' t8 |/ G/ O. Z# `<script language="javascript">+ C! h8 ?8 J* c9 a, b5 t& a/ L
//人名移动
. H4 ~( i4 L5 X2 n/ Wfunction move(fbox, tbox) {5 _- P6 o$ b4 L2 s
var arrfbox = new array();& J1 @* A5 F9 t1 P. w
var arrtbox = new array();
* O. u( [% ?1 Y& lvar arrlookup = new array();/ @% B+ e# X1 E
var i;9 _# ]( |  R7 G8 p$ F" B( J
for (i = 0; i < tbox.options.length; i++) {
$ n4 q7 P1 G" b+ V+ Iarrlookup[tbox.options.text] = tbox.options.value;
: \+ t: H! F! P: ~+ Sarrtbox = tbox.options.text;
. R6 l% O0 z1 {% W1 |}
; R+ I# O; S/ e; O) c+ n# g) D. [var flength = 0;3 q0 U( ^9 W1 x5 A4 A9 \5 U# }
var tlength = arrtbox.length;7 u$ s! r" M3 _
for(i = 0; i < fbox.options.length; i++) {% k) ?8 z9 j/ x/ a3 H9 S' `9 x+ r
arrlookup[fbox.options.text] = fbox.options.value;
  \, H& X  u3 i: }if (fbox.options.selected && fbox.options.value != "") {
! t- w* ]0 G- c3 Jarrtbox[tlength] = fbox.options.text;
& n0 v% j; `- ]: C* @; Dtlength++;' y; h  H7 t6 f! E& G5 O! e+ A
}
0 j0 U  Z8 Y6 k9 m! celse {
9 G+ L! `7 s& j# l* {/ W! \+ }% o! ]arrfbox[flength] = fbox.options.text;7 x+ T3 G9 Y- r  w- v
flength++;8 I+ b( ]2 l5 |& s  t3 Q8 V: q
}0 b, ~" p- S, `5 G
}5 _. ~, [& k/ ?# X: f
arrfbox.sort();
$ Q% m9 [' R+ |+ tarrtbox.sort();1 {6 M( b# q# z

' d9 P8 G2 |# X8 q6 ^fbox.length = 0;
' h/ C9 i4 {$ V; m+ ?4 y5 Atbox.length = 0;) t" y% u% Q) a5 H
var c;
/ d4 _1 T7 O! a3 U4 }# i! @$ I# T& efor(c = 0; c < arrfbox.length; c++) {3 o& Z7 R2 ]3 D  @
var no = new option();
8 t3 \! H& n& I3 `  b3 k+ w* U* l" tno.value = arrlookup[arrfbox[c]];
, o) q. j; k* D) j2 K, Fno.text = arrfbox[c];
* Y" e* w" ~; s4 K9 I5 sfbox[c] = no;
1 Y6 y! F9 r: W}
9 _3 V# k  ?2 B* j9 J6 Ufor(c = 0; c < arrtbox.length; c++) {
& k# g9 V# Y4 a: r) ovar no = new option();& {4 l% C+ K' h7 q* m
no.value = arrlookup[arrtbox[c]];+ d% a. B: X1 `7 ^* W& G5 z
no.text = arrtbox[c];/ Z7 n- @! X6 M. l. a
tbox[c] = no;2 W& J' `1 q9 E! H3 x: g
}) f! o3 N/ Z% y  b, y' F. r  h
}* L5 m3 H2 [7 |: b$ x: W+ g4 g
</script>  u, Z# v4 |- h/ J
</body>* e! s. ~5 ]0 s! f6 t) I

捌玖网络 89w.org----致力于站长学习交流

返回列表

jsp+javascript打造级连菜单

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]