jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"" H+ O" S1 g0 V+ P7 J
      c pageencoding="gb2312"
%>
<style>  l0 [" `! ]! i+ ^* K  f
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }0 b% V9 K, M) C/ C! O: L$ g$ {
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;9 n4 e: N9 `, u8 N9 ^4 ]- O* C8 I% [. m% ^
  border-bottom: solid 1px #4e7dc1;' Y5 K+ Y9 _1 m8 C1 T, M6 ^
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}
</style>% f4 s4 f5 y  }: A: C( _
<script language="javascript">

3 \+ c3 U9 i; w' |' R* `</script>: S% p/ a4 @3 `: K
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
% [3 A" e$ D' z* }% m<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
+ ]  ^8 _/ e! c. X<%
/ R1 k* a! F2 j, K0 t3 x  cdatasource ds=new cdatasource();  //数据联结bean实例
7 _/ I4 h6 m/ j! u8 h' P3 C5 H9 L  java.sql.connection conn=ds.getconnection();+ @5 G" Q, u7 k5 G. h
  java.sql.statement stmt=null;
2 P4 \+ d. e& [& E; r% m! o  java.sql.resultset rs=null;% K/ U1 L- E/ ~
  cdatacheck dc=new cdatacheck();+ a* w# b3 Q" i+ {( n
%>
. r9 }1 t& I4 r7 Q2 t<%" L1 W2 H" P# f. K
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";; u/ Y" E* J+ d' X1 y& U4 `4 j4 x
stmt=conn.createstatement();
  U! G2 T3 t3 ~- z$ d3 drs=stmt.executequery(sqlu);
$ P; ~* f' u' N6 D; O" G! I" ?' @%>
2 F% I) ~6 I# ~4 f( U# c8 w<script language='javascript'>
3 ]8 u' ]0 Z* e0 Y6 larr = new array();
! ]! m; b9 ~& w7 M4 |5 T<%  int temp=0;
6 X  k, L$ ?( e* y( Qwhile(rs.next()); s' h% ]  [( x
{
* U9 i8 L3 s7 ^# U: L%>
' |( {6 d; s- ^  z( Barr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");' _' \/ U# R3 m* ?5 V9 |. ]
<%
+ r& z, }7 g5 M/ T/ _8 C9 Wtemp = temp + 1;
  @% }7 S% ~0 n}: P. ?8 Z# ?- R. b8 @
%>
% E+ j8 `8 A$ i2 G4 y) Itemp=<%=temp%>;, O: F) S5 t# V3 l/ a8 x. ]
function changelocation(id){ & V+ f, _# U+ I
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
! y' Z' ^. `8 t8 Bvar i = 0;
/ k1 H$ m, e) K$ l* n# @+ odocument.combo_box.city.options[0]=new option('-------','');
; _' _; c7 f7 F4 d8 yfor(i=0;i<temp;i++){
$ n1 v, b' z- k) B1 nif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
0 P; p# c9 g! ?, o' M$ ^document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
1 j# o" H$ i% ]7 k: K0 Z} 5 C, ]6 R0 M1 r! O) b. h$ Z
} ; l& K: }5 E7 {5 A5 E
} ) E5 o  V. |/ T' [. S
</script>
1 j3 B1 m" y! A( b4 W  F0 W
. A/ d6 D# }+ ^. ^4 k& A<form name="combo_box">$ M* y/ d2 ]8 y4 E; ^
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' Q' _$ X, |% p; O6 A  t6 C4 e  <tr height="24">
& c: A+ ]0 ~" s <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>* W: Z7 S0 J# t# U* p2 k4 U
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: X; x1 Y+ u3 Z# V# [7 F5 w' W
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>! H! G! d, o# ~6 e' `
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>* ]9 C: Y% Z/ `# Z) W: A
  </tr>) F- T5 K4 [& n# y6 A2 ~% E+ E
  <tr>
! L5 e1 @" i, ]  f <td>' [( G) B. \3 m! J" |" ?( s+ z
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">: z; Z4 V1 W# h
  <option value="0">请选择部门 ---></option>9 Y( J: j5 a$ f& ?
<%
/ l+ \7 G( v! x' Q9 Y5 B7 \% i% ~" } string sqld="select * from tdept";
) v4 a& @$ G" T0 d- b4 v: v. Vstmt=conn.createstatement();
, `9 J4 u+ ?( F2 @6 L; [rs=stmt.executequery(sqld);
# P3 E. _! k- p* ?' c- |, G+ o6 i7 b4 awhile(rs.next())
* |$ E) W8 N$ F0 F{" H& r/ w% E% ~$ {
%>
  z; q# N' j6 x; u* }7 c3 o. }  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>- h  B1 b* c/ n0 |5 h
<%# N4 D" `+ b; K- ~
}4 K1 K: G' w. x& |# v9 u
%> / }. {/ c/ _) I. ]; u4 U* r/ s# }' {
  </select>
, C" R9 l: {& F3 U5 W</td>
8 Q; W# G2 T, {& C2 F" W- L5 T <td>
! ~3 g- F6 B, v0 [  <select multiple id=city style="width:150;height:200" class="bgc">
( Q0 ^( D4 c/ k( ]& ^0 C) `  </select>- F" W. v* ?- I& [8 f# a3 t' ~
</td>, B6 W6 q8 j& c9 F1 G0 W
<td nowrap align="center" class="bgc">
& T9 Z  P5 G! ]7 {: R. h  <input type="button"  value="<<" class="buttons">
: j# v- o  ?& A. o  a: r  <input type="button"  value=">>" class="buttons">
; Y& {3 X. r1 D# Y: M- W% ]* S</td>
! C0 Y( n7 v+ O" o  p- W. E <td>. y5 E' l" G! l4 [& q4 w: s- P
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
0 a$ R/ x/ T6 c3 w/ O& c  </select>
5 S4 ?# U- h  X! G3 d% A</td>! o$ z# e: ]. h  X
  </tr>
, k; P4 W; x' y/ G" j0 b) Z <tr class="bgc">
5 `" L+ c, r( ]! s* | <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>& V9 u& d, `8 v5 Z1 V' ]; T
  </tr>2 n  ?8 v; r& Q+ @4 i* i5 p" j
</table>
1 o+ o$ m( _3 Y2 E; ~( o# ]</form>
; `1 b+ U' J* I  P) o. }) S0 u<script language="javascript">
- K& P7 n& d: O4 e/ ]; S//人名移动- n, Z; G' I2 i. p6 I
function move(fbox, tbox) {$ s, @) F2 V. ?, p# I
var arrfbox = new array();$ W, D6 i9 S. q. ^( G2 [( B# E# R8 H
var arrtbox = new array();
4 o' B3 W8 D& `2 bvar arrlookup = new array();
4 X/ F6 n* K$ c7 s8 n# Dvar i;: I7 X, P% @- ~" z  k7 v
for (i = 0; i < tbox.options.length; i++) {
* X6 \: [6 Y5 g; q2 Varrlookup[tbox.options.text] = tbox.options.value;
2 w: `/ A7 i/ Y5 f6 |# J3 j% A* {' P6 Jarrtbox = tbox.options.text;7 r7 B* M  q  x. G
}' D# \. e+ T1 Z' R: |  k
var flength = 0;
- ~( v% ?2 n0 E& @# qvar tlength = arrtbox.length;# V( n- p) j- j3 Y
for(i = 0; i < fbox.options.length; i++) {$ C! Y/ U+ _5 |# ~- O9 b- Q2 H
arrlookup[fbox.options.text] = fbox.options.value;+ E0 t9 O; [( a
if (fbox.options.selected && fbox.options.value != "") {
+ R+ l2 h% ^! k, l! l* Y6 Warrtbox[tlength] = fbox.options.text;7 {7 f4 y# W# X4 h+ k" |
tlength++;
; M7 t% p: s+ T5 d" u6 k}2 }6 C/ H% F# k) w% Z; P: D4 Y
else {
7 X8 D3 I' ~* R, }arrfbox[flength] = fbox.options.text;
. k# H* K3 `$ s/ r. Y- F4 Cflength++;  Z9 x' s$ d! D9 ^% _
}" y( S* R0 B7 p0 S
}
* K2 b! T2 D  T( `+ h. Marrfbox.sort();8 b* K& r  N  X' H: e
arrtbox.sort();; b8 r% {- w# Q$ L( r
8 a  ^! X8 x0 y& Q1 `
fbox.length = 0;- y& g, V) B) }
tbox.length = 0;  \/ k) |4 R* N3 x) \
var c;
" V* N& b8 i& d% e- h3 W( Ofor(c = 0; c < arrfbox.length; c++) {9 K: ?/ Y& s- f1 a/ @/ ~
var no = new option();# d! u% S# m) T* z5 A
no.value = arrlookup[arrfbox[c]];5 q; I- {% a! {! B9 v4 w$ ?. d
no.text = arrfbox[c];* S$ ?( r$ _. {$ a8 i4 V3 J
fbox[c] = no;( s6 c3 \. ^( k5 @3 N6 e: _  N
}. s( }9 i; o9 q, I* `
for(c = 0; c < arrtbox.length; c++) {
8 {# E2 ~& }/ G" Z$ rvar no = new option();
+ y" Q' e5 w/ S* C5 v# {8 vno.value = arrlookup[arrtbox[c]];
) i. j+ t/ z3 N% {1 O2 ?no.text = arrtbox[c];, _/ q* T5 H9 E  n% I
tbox[c] = no;
! Y  ], H" k5 v' u" \$ y7 G }
4 t8 B% t* y& g}) d( |6 Z4 u% j" j2 u4 [3 H* v
</script>
- e7 a3 {& {& v( _</body>
  O& a! i) y4 G6 z  F5 ?

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

返回列表

jsp+javascript打造级连菜单

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

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