标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
% x! }: F { t! C" f5 i+ y2 }3 }" c
c pageencoding="gb2312"
1 D! ~/ [7 |. i. i$ p+ l
%>
) t( b2 e8 p& O' n3 q5 F( M+ F# d
<style>
: o" e- k! j: ?% t6 q8 Y, }- G
.f9{ font-size:9pt; }
- I9 s. N/ M6 X5 F8 X! r& J1 x, c7 F
.bgc{ background-color:#aecaf9; color: #0033ff }
2 y, M* j2 b1 |+ w. w
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
2 F1 H- o8 K( M; ~* G. j' J# g# T
border-bottom: solid 1px #4e7dc1;
. F v8 H9 I2 v
border-left: solid 1px #aecaf9;
: O8 F: J% G" t. q- F* F" i4 u8 U! m
border-right: solid 1px #5679bd;
- q8 y1 x s [3 x0 R
padding:1px;
) d+ \# J+ F' M1 O
margin:0px;}
0 D% a2 O) U0 d: g' W6 P
</style>
3 I& C7 a- R+ ?$ G- A) S
<script language="javascript">
7 O$ J; N) B( J
<!--
. B! V$ Q1 o9 m# M% l3 ^
function rv()
0 |& t$ s/ K! M4 d! c1 k
{
A: A( j8 P* ~+ ]9 E' O9 s: t
var val="";
; C5 v0 Y1 p2 m w
for(i=0;i<combo_box.list2.length;i++){
! s3 s' H3 z1 o+ j
val+=","+combo_box.list2
.value;
% A) T6 L8 ~- K! O; u: K0 a. d/ d
}
8 b% x6 o) o$ O0 V9 x) n y
if(val.charat(0)==","){
" ?- C" t+ y+ c* y; y
val=val.substr(1,val.length);
: Z- M1 w6 J" C5 f# x7 c
}
& a' g( R+ w$ j( J6 n8 ?
opener.form1.frecname.value=val;
) Z' R4 V1 c6 @$ Y
self.close();
" Z- U* S+ }- k6 ?# W+ c
}
9 A3 h G- k3 l$ C8 r/ v
//-->
, v) k% w* U9 l/ h. A8 i
</script>
, ~1 C& P3 ?* _ T
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
( S* K* e, r6 ?# h3 y' Y
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
) L6 B2 V' S8 W( ]/ C
<%
9 m* m, e/ ^1 H- q" @
cdatasource ds=new cdatasource(); //数据联结bean实例
0 e0 X1 G" J" L. U- y" t/ ?
java.sql.connection conn=ds.getconnection();
4 E$ M, Y) R h' ^
java.sql.statement stmt=null;
* i- e) a @: ], K `* \) r
java.sql.resultset rs=null;
/ g: Z' ^. f$ G6 M
cdatacheck dc=new cdatacheck();
6 A) m, B' c; e- l. P! i2 j& u( k
%>
$ R' i& x3 Z7 I6 |# ]; T" }
<%
W6 {6 U: I% r8 c6 I( _- V
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";
& L. Q* S0 A+ C) G. _' J
stmt=conn.createstatement();
% p3 J4 Y2 _: ~' r; L- i. ^
rs=stmt.executequery(sqlu);
; g( Z6 Z/ R5 d2 H
%>
& X3 w8 H' t4 E" h8 r5 p1 a$ _7 z
<script language='javascript'>
5 S2 _ d6 m$ S% s* J
arr = new array();
5 s9 m0 N# K' _' i5 s
<% int temp=0;
1 b; K- T$ ]: w. v3 U# X2 F
while(rs.next())
1 Q6 b- ~1 f6 E6 g
{
; {1 r, E* U( w# M* z" g
%>
0 m" C6 A. D# s0 |
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* w4 P" C! U' u* y6 T
<%
; z+ o' w% i' `$ {' _9 ]2 v; [
temp = temp + 1;
; q( Z0 T5 X- k
}
/ X: i4 M" V5 ?8 Q8 G) d; a s
%>
+ U& b$ C) X; i5 [
temp=<%=temp%>;
# n' [# ^3 E6 B9 \6 H5 o @) O
function changelocation(id){
! y" m/ U! d! D$ K+ R! |) R! h
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
7 S, i: `' Y* W2 G8 s
var i = 0;
8 N, p% T$ \$ @- |5 ^: X) K
document.combo_box.city.options[0]=new option('-------','');
4 s2 D( q8 P$ X |4 i8 j$ K& }% ^
for(i=0;i<temp;i++){
( _" L/ @$ ?+ [ _& a: h
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
0 t# i3 d- y8 Q7 Y0 O0 T% S
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
5 D I6 W _! H2 G- e$ F w
}
( {: z7 c1 H; o' h5 ~* j9 p: s; |
}
' w5 O+ `7 o9 p+ [6 W( F
}
$ |: X7 A* t0 n
</script>
& R! P( ^2 t$ i
8 R& H" w2 y, E) s d
<form name="combo_box">
z: S3 b5 a5 M$ E2 s9 `
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
0 y1 E& {: f1 b) H, L2 U
<tr height="24">
7 R* l R2 J( f d* Z, N
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
& A7 O. U4 U0 \' X$ b
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
( P) I3 l. y0 r0 ?1 _; O
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
( y5 K; Z; @/ t0 s5 u
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
! i. d: I( Z! o! w2 s$ W
</tr>
! O* j- H& X* |5 c- ` {" i
<tr>
) f; G* A* o" \9 I
<td>
3 c3 @. F) [1 y$ D7 p' m
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
& M) H7 o5 m5 L. u5 J
<option value="0">请选择部门 ---></option>
! M4 L0 P& H) }+ Y
<%
( m3 k" E) R" A: D
string sqld="select * from tdept";
A* g! y. I) t& e- c) Q" m( Q
stmt=conn.createstatement();
5 Y$ p/ A: _4 K( [
rs=stmt.executequery(sqld);
6 ~ N( F$ x9 i, \. v. h. y' w! f& ~
while(rs.next())
( T5 C: {) X0 I0 T3 |! C
{
6 r" K, ], s3 J0 }2 ]: j3 F8 P
%>
+ n a' R/ }. s$ G# S
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 B e2 c7 d- L# p3 e+ J. z- L
<%
- N l, F4 u: _! A; r
}
" ?7 _: _8 c; T
%>
! V) |' T1 |+ _: V [
</select>
7 Z; k. \6 s9 g6 a- [: S9 Z
</td>
" A6 u( h2 }$ n/ a8 w
<td>
2 Y" K; |# u8 P2 f/ B
<select multiple id=city style="width:150;height:200" class="bgc">
5 R6 `( }$ ~' U: O! ?8 J* `
</select>
3 ^; k, `: \- {+ _' s* U8 t* s
</td>
# S+ D3 N1 y6 ?: F7 E
<td nowrap align="center" class="bgc">
7 |* }. N) z0 K# J L2 z) _# S
<input type="button" value="<<" class="buttons">
2 _. ?2 w( T6 T( G
<input type="button" value=">>" class="buttons">
( B& \- [( [7 {. u
</td>
; c& ]0 K& S X7 M: k9 W. R, z
<td>
O% J- l" P; V2 U$ G
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, L) i! j8 _. C* r
</select>
+ v. e7 `9 }7 z% ^' h0 j! O
</td>
5 n: P8 }- f4 @) x# h4 n9 p3 \, _
</tr>
2 J# \% S# D7 v2 O7 G) X
<tr class="bgc">
3 u: z& A) s1 a; U
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
' `( p: |, |6 s5 }# C, L
</tr>
/ x0 d/ |/ u, i1 s+ m
</table>
' j- C1 @. G! D0 U% M n. G
</form>
' ]* }1 E+ W" l, {+ R4 o. x6 C
<script language="javascript">
2 c N$ @5 D# H& d
//人名移动
/ `5 T5 P: s. ~. ^" y# c
function move(fbox, tbox) {
/ u! v, f5 k6 u% P! d- r4 e
var arrfbox = new array();
; {$ L8 p/ L1 G! h, H2 F& R$ @3 M, X
var arrtbox = new array();
$ Q( m1 {! v! y \1 m7 @8 W
var arrlookup = new array();
C( D' x* \" `4 `" Z F: t- {
var i;
0 O: x% h" C! J4 s6 [! W
for (i = 0; i < tbox.options.length; i++) {
/ ]- x0 H* a, T) Q
arrlookup[tbox.options
.text] = tbox.options
.value;
% \ ^) t+ g# e* _
arrtbox
= tbox.options
.text;
, j+ E" _. ?. S# x" _+ d
}
# T: e. r5 O: ?6 d
var flength = 0;
: h# X# \/ s0 c( d' h6 Y; k4 \
var tlength = arrtbox.length;
4 {' j) R8 A; K) f: R' V9 W) P0 L8 P
for(i = 0; i < fbox.options.length; i++) {
1 p5 u4 Z( U6 N" [5 T
arrlookup[fbox.options
.text] = fbox.options
.value;
) F* q X6 x( e" k
if (fbox.options
.selected && fbox.options
.value != "") {
. O! l- y9 p5 o3 k
arrtbox[tlength] = fbox.options
.text;
( l) S- O4 U3 ]6 g: {' b
tlength++;
& b, ^& l1 q* s' k( D
}
+ l1 ~/ ?! h8 o) _
else {
' R9 D% }$ j5 `# J: z# H
arrfbox[flength] = fbox.options
.text;
+ U6 n9 l7 Y l, Y( C& n
flength++;
) D; h. r; \7 i, \& t
}
9 f) D* E( ~) s) V5 u: ^' z
}
) h! ?$ X& L; g& a& {9 Y
arrfbox.sort();
* S: I1 {' [8 G1 G, ~- ^
arrtbox.sort();
3 d s+ M2 B* I! A
i" [( N r$ x# q& U' p5 e
fbox.length = 0;
9 X5 [7 s& a; A/ Z
tbox.length = 0;
) H) w n- s# C# S
var c;
v" b! L1 _2 m: p$ ^. |4 x
for(c = 0; c < arrfbox.length; c++) {
' ~3 R0 _3 C: c. H+ z
var no = new option();
. [3 Z) z" S J+ d% |
no.value = arrlookup[arrfbox[c]];
' f) c7 f7 {9 L
no.text = arrfbox[c];
& Y+ f* L! ]6 v' m( H$ \, f8 _4 z
fbox[c] = no;
! z, j; N: o5 h$ H5 z! _+ j
}
& G5 [: p8 L% M' r; [ ?7 x( s
for(c = 0; c < arrtbox.length; c++) {
, ?5 G/ O) V' E! m- u
var no = new option();
' f8 g8 Y. D8 c. {0 p. ]
no.value = arrlookup[arrtbox[c]];
* A/ e% y, x9 [: k! m
no.text = arrtbox[c];
% V6 X$ i' g+ @# m
tbox[c] = no;
$ t+ s6 K( |+ K7 D3 y+ J
}
/ _( \8 ~+ o& h/ _% }
}
! Q. w% C* k* s% s
</script>
" u" ~. s0 X' \% b' Q- f
</body>
/ T! i6 ~( U8 A2 ^
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
