标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
& V; m5 B, b1 }* J6 }/ S
c pageencoding="gb2312"
! m# b! S2 r# T7 a& p
%>
' c3 D N5 N1 U$ o Y2 y. | o7 v- r
<style>
7 i" p% N7 y* y+ q# F
.f9{ font-size:9pt; }
# h. n* y6 X+ ^* q) a/ i: t
.bgc{ background-color:#aecaf9; color: #0033ff }
5 i& q" {% Y0 q% G# `/ l: }. o+ b
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
( t* o, J" s7 x$ r) h7 \; J0 G5 n( A
border-bottom: solid 1px #4e7dc1;
: \8 b2 o: o/ d- E v3 `# W
border-left: solid 1px #aecaf9;
% M4 q9 u! g; H+ v. Z" R5 X: L
border-right: solid 1px #5679bd;
, M, H% i. d4 i9 \% A1 C/ z( [5 d
padding:1px;
! c- \7 w. i# B* Y m
margin:0px;}
# ?9 M' O( ^1 H5 r8 Z9 e+ ~$ t: A6 \
</style>
- E# y# n' _- k: G" a/ S; a3 }
<script language="javascript">
% P S; S( P+ `, Z- Y
<!--
: A# a5 P3 b# |1 a3 T
function rv()
% Z: L, C; q9 [4 P4 y5 M
{
" y1 Z" {" n- @+ `/ [0 E9 O
var val="";
- l& k; `. d( d( K
for(i=0;i<combo_box.list2.length;i++){
& o) ?2 f0 C( j. J7 f% y
val+=","+combo_box.list2
.value;
" X# U0 b0 [7 H" j5 A
}
) e4 A! g) j8 b7 q( o& w
if(val.charat(0)==","){
" M, \2 ~9 C$ b. y, J- {' s) f
val=val.substr(1,val.length);
X7 n& L0 F! L. C/ @! M
}
- L8 b" @: E1 T0 t9 B7 X7 V
opener.form1.frecname.value=val;
q5 u; Q& d X' \1 O7 ?6 T
self.close();
8 O9 Y) T) p0 O1 L
}
1 m( {& ~0 U: a- u
//-->
5 r6 k3 e/ Y! S. T4 R
</script>
7 N' }$ Q: \1 ^$ {" G
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
1 D' n& J: @& q7 r6 n$ ]; I
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
( x4 @) _& ^0 h2 e3 h2 U
<%
% H5 o+ y$ ], C
cdatasource ds=new cdatasource(); //数据联结bean实例
2 f' E% g- z3 [1 @0 U- O
java.sql.connection conn=ds.getconnection();
" f9 |6 |' U$ w: {% o, d0 d1 Q
java.sql.statement stmt=null;
; K% w7 r6 P Y6 H6 }! R, z/ d/ Q5 H
java.sql.resultset rs=null;
3 A9 _1 k: G* |" v$ |7 D. T
cdatacheck dc=new cdatacheck();
b" ^( S5 w' t: K, D. `
%>
9 k1 \9 e; j6 ]/ ?0 _6 }" F9 J. J
<%
2 a3 J' y) ] W& Y5 H% J" _
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";
! u5 a, h& J4 N+ {# I, B& ^8 S
stmt=conn.createstatement();
! a' J' J# s% t. B [
rs=stmt.executequery(sqlu);
0 B4 i; X+ S4 ~9 A" J
%>
3 g: }( M- `8 K
<script language='javascript'>
7 C$ O4 H5 v9 k9 Z
arr = new array();
9 [9 R- y+ r) _1 C {* N& q0 S
<% int temp=0;
0 g) O) {) X9 x; i; s' y
while(rs.next())
1 S$ v- a$ b, e* M1 v, ]
{
1 A' w% J$ r) o: y3 |. P
%>
- O. ?/ r" f6 ^# Z& j+ l
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* i1 X. T* t& P: w; d7 h2 H
<%
5 \( [: x# X! d& P$ W. i
temp = temp + 1;
9 h+ g3 H' H% p
}
$ ^, ^! n# e! L# h5 ]
%>
/ R: \5 K# a7 i: {1 n9 r( b+ \
temp=<%=temp%>;
5 x! h) L) L: Q( Y# D W
function changelocation(id){
# a9 ~4 f) e7 T
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
; F& L( N# ?9 ~3 B# N( ~
var i = 0;
2 E5 h) _- Z6 F; P, v' @+ l' Z
document.combo_box.city.options[0]=new option('-------','');
1 Z* {/ I& m, W
for(i=0;i<temp;i++){
7 R2 ?4 b* Y% p l. Q2 N3 c
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
% U0 W4 l) p2 |, c
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
- ^; y- [, _7 g. ^
}
- k1 O6 }( b0 H8 Y I! z
}
* R+ n q( j O
}
# F! @# ^! @5 N8 Z% F2 m3 q% e
</script>
: b; ^ W' U2 U! u
- C ?2 D+ g* D, `: P
<form name="combo_box">
, `8 k7 h( C& ]1 L: P
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
8 r: M$ w: Y* E8 \
<tr height="24">
: O3 f, d' I3 E+ _# ]' p, E
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 Q5 N a$ M$ C
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
. h4 Q" _2 i# m0 I3 I, Z9 f5 W8 `
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
9 y! V9 ?$ R& @1 f3 }
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
% E* D( \0 t+ d9 f8 [
</tr>
8 v% B* L/ j+ n+ ?+ s3 @* k
<tr>
M* L- S% G! t2 H! a% Z
<td>
2 m6 T8 q' e7 I8 O- a
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" n# d5 q o* W' G# s2 z3 Z5 ]* J
<option value="0">请选择部门 ---></option>
0 s7 i, ^6 B1 o% k1 {
<%
& O) F/ }+ \( _/ W# j' T7 }
string sqld="select * from tdept";
6 y" D3 v! L9 m: s( L7 z
stmt=conn.createstatement();
0 C9 T5 f1 O1 u
rs=stmt.executequery(sqld);
* h" T9 n. p1 L2 ]- {% f
while(rs.next())
5 y; Z6 R, n2 m1 P% }& ~3 d8 g
{
7 q4 e5 N: X. F2 a; P) a
%>
; {! B8 h1 X, y+ F7 R
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
' }: P; Q3 O* e, S% C8 W
<%
! `; v2 V) T/ w; M$ I& W2 l
}
, s! ?" g& g2 p V8 X
%>
1 [& x4 C$ M _% A7 E( U3 V$ |" ^1 Z# g9 W
</select>
6 I: k1 F: H) X3 ^. C$ i2 q `$ m3 z+ @1 v: E
</td>
. h1 x0 O( m0 \
<td>
4 J; ~. y6 Q/ n- }
<select multiple id=city style="width:150;height:200" class="bgc">
3 [" h! F( _& O) s) Y
</select>
) V# e. S5 c4 A! N1 p
</td>
7 {$ A/ g7 \1 _: r1 m6 K
<td nowrap align="center" class="bgc">
% x, u$ O8 q' }8 s/ L! m
<input type="button" value="<<" class="buttons">
; M, s+ ]( P3 n1 x1 U) e2 s1 L2 Q
<input type="button" value=">>" class="buttons">
% ?$ @0 P& L* l4 t/ v0 {: s
</td>
* g# [+ s% t, R# ?8 L& H" B* I
<td>
* @) X5 ^" U; I/ x0 D* Y$ o
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
3 Z* p m! a5 H( j
</select>
! P2 R, ` G# c4 i8 @( ?) f$ [
</td>
, y! B; ]( s- U- }7 q% r
</tr>
0 a/ N+ h+ ^7 A- B2 t
<tr class="bgc">
$ V8 U3 {" X" N/ ~3 ^
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
+ l1 a; q2 r% `, c$ Z9 [; N. S$ |
</tr>
7 T- x5 ^8 X$ X& p; @* P/ m: v0 U
</table>
O: H2 |* P* B: w
</form>
9 w! g' y' q+ A# L
<script language="javascript">
7 K- E4 D# J$ A5 a. u
//人名移动
9 @! n( R2 J( T5 ^
function move(fbox, tbox) {
3 D# U3 [# {8 C, D
var arrfbox = new array();
Y9 D4 r8 ]) B, e+ @( Y. c
var arrtbox = new array();
# s6 N. N) M2 C. P* y# f
var arrlookup = new array();
$ N, c' J- S( L3 f4 }7 ]$ y
var i;
7 X9 J( U' D6 N5 Z6 c
for (i = 0; i < tbox.options.length; i++) {
- W1 G1 B( o$ \& V7 V: c7 ?* {
arrlookup[tbox.options
.text] = tbox.options
.value;
! [" h, I# y2 b6 w0 B' h4 e) i' C
arrtbox
= tbox.options
.text;
5 ]7 \, K! q7 `" |, I. a
}
/ l( f7 a+ y4 j
var flength = 0;
. G' t( Q. j" H- [
var tlength = arrtbox.length;
h9 J$ F0 m' K5 Y# z5 P! _9 s2 ]
for(i = 0; i < fbox.options.length; i++) {
% b7 R. d' V& U* t7 N$ p7 g7 {
arrlookup[fbox.options
.text] = fbox.options
.value;
+ X' v; M! d/ d/ m& }
if (fbox.options
.selected && fbox.options
.value != "") {
& s# x3 q& h/ F6 [: V
arrtbox[tlength] = fbox.options
.text;
/ H! Z; h+ d: Q+ {
tlength++;
# [# d; I8 i K, C! f+ v
}
6 i* o0 y& P* c$ D4 `4 v" R
else {
4 ?1 E) d; }+ I0 l% ?1 ?
arrfbox[flength] = fbox.options
.text;
- M: u# }; i: Q/ [3 t
flength++;
: m7 ]" E. r3 O7 X+ m4 m! H$ o! N
}
& b1 i5 W Z p0 g
}
5 ?1 T* ~2 a; T
arrfbox.sort();
8 k9 |' w; @, s1 L8 \( f' u
arrtbox.sort();
0 F1 Q6 K% @. K0 z4 J! a
* z* W5 H! X! n; `
fbox.length = 0;
t" Z: a+ x& D. l. G; i
tbox.length = 0;
* e O8 z0 I' |# I
var c;
% `+ I6 `) G- E- ]( I9 ]
for(c = 0; c < arrfbox.length; c++) {
* w9 Y' g) J3 ?6 Z1 K$ D" ?) e
var no = new option();
( e! ?& n/ i& x, i w3 Y- w6 {, A
no.value = arrlookup[arrfbox[c]];
) C8 {# s- D% j- z
no.text = arrfbox[c];
- T! \1 Z% d/ K: L1 r9 |+ L
fbox[c] = no;
, I2 X$ o: \7 r3 Y# i* @- J
}
+ Z- b( Q& @' \6 k0 |
for(c = 0; c < arrtbox.length; c++) {
2 k; H3 @7 Y: O+ I
var no = new option();
7 w. z/ q! j$ ~6 a& h' F9 e" V
no.value = arrlookup[arrtbox[c]];
; U2 H. t: U" ]" i3 f
no.text = arrtbox[c];
* t4 |4 F, ?7 j k/ j4 `1 w
tbox[c] = no;
j% y w4 w& ?. B
}
9 H4 V4 y$ w0 B& }
}
! K- ]0 ?8 U* M; I+ F* Q
</script>
" @1 y1 ?# _9 d4 o. F. A! I
</body>
' T) B1 K5 B9 O, E s. q
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
