标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
[+ N( f# B4 A! i0 \, s6 ~
c pageencoding="gb2312"
# L! d. `$ q) w) N3 I
%>
, D! j* o' b, k V6 m; E* s
<style>
: D, q2 S j: o4 Q! Z: _
.f9{ font-size:9pt; }
E; ?8 z9 `7 R* v& s2 D! y
.bgc{ background-color:#aecaf9; color: #0033ff }
+ f% _0 \. |4 R, Z
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
9 s" y y3 {8 Y6 r5 N! K+ L
border-bottom: solid 1px #4e7dc1;
3 L9 s* g( O' s
border-left: solid 1px #aecaf9;
7 i7 W S5 X% N. t% }4 O
border-right: solid 1px #5679bd;
7 r4 y9 D9 s1 B+ T* \5 @
padding:1px;
' ]% K8 U1 h0 |! }6 \+ R! v0 L% n
margin:0px;}
1 b, K5 e# ]' x1 l4 R; T1 ?
</style>
5 w/ Z; Y- j$ h3 Q
<script language="javascript">
9 B* q0 h$ l6 e- T O1 Y
<!--
$ \( D6 j2 S' D8 P$ S; |" }9 Y
function rv()
# h, `6 ^+ Y1 [
{
. a1 F8 k: f6 L; F i- }8 l
var val="";
3 [/ U: ?2 s# r, c# v
for(i=0;i<combo_box.list2.length;i++){
. e3 l8 ]; g9 L- V1 t1 x
val+=","+combo_box.list2
.value;
+ o2 D2 |+ F% Z# ~$ P. J
}
' B! o# u# n/ R4 y/ y
if(val.charat(0)==","){
$ k" N; _& n+ p6 s" x9 x
val=val.substr(1,val.length);
7 A3 ^5 H, m i) `1 x
}
) T5 b2 j) s* H) i- A. t& \
opener.form1.frecname.value=val;
w) G+ G% _9 T3 N+ @/ N
self.close();
# e# ^7 U4 x5 q2 `5 ]& n
}
6 V% f% w2 J0 z R' x! E- f7 H
//-->
! D$ a9 _ v- e3 D# [3 L
</script>
: [9 R9 |% r. r+ r# ]& N' U3 a$ ]
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
; N5 D9 a3 U" S- j: E
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
, g, R( h7 }* b1 h% k. n1 b1 B
<%
! I, I; @2 s& A8 i5 L9 H. @
cdatasource ds=new cdatasource(); //数据联结bean实例
2 x: ]( u, g1 A/ Q
java.sql.connection conn=ds.getconnection();
- W; {6 P) J2 F" s" d
java.sql.statement stmt=null;
6 |" [8 w# i" @8 H0 M3 v
java.sql.resultset rs=null;
: d2 _$ l* ^, b( L1 c0 e) J$ T# q
cdatacheck dc=new cdatacheck();
3 |4 Q E- m; X1 v: _
%>
1 C0 \6 {' Q7 c* c/ x% t Y
<%
2 }- \1 b( {& b6 B- \! x3 `
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";
; u1 Y% I2 X7 U
stmt=conn.createstatement();
2 X" H( C, X9 A- g. R) w' F
rs=stmt.executequery(sqlu);
3 z9 @% ]3 W$ F1 X
%>
8 P- _* e6 k" ^6 O% r/ C- ?
<script language='javascript'>
" V6 F) p$ n* G9 k
arr = new array();
' `8 z! [) o! l+ o
<% int temp=0;
) F# m$ X$ I2 D( B
while(rs.next())
9 Z, E% D/ { S( {$ A
{
9 W+ h/ d: h0 O0 i
%>
6 c9 U5 N6 D$ F: ]7 f
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
W5 v- O. B4 _# R2 Z
<%
$ e( i" B) d6 X! X) o7 t$ n
temp = temp + 1;
' V" J& N+ W! L) K' P! p" ]$ W* K
}
6 q$ G | A( w. I& a
%>
) N8 H4 B/ d: o+ d2 ]
temp=<%=temp%>;
" D2 x% A! m& p9 Y3 i3 r
function changelocation(id){
7 r1 ~+ M' o1 Y
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
. h1 s% N! M& k7 b- N1 C
var i = 0;
/ [8 W9 V. r( w. u4 n$ s
document.combo_box.city.options[0]=new option('-------','');
* @9 ?1 ? `" a# P* M+ Z) Q
for(i=0;i<temp;i++){
) a2 N5 z8 _, s' E# Y' ]
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
7 ?, Z7 j5 b+ `; Y! d# X
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
! S- m! r$ T" u! @2 |1 X7 K
}
/ l. D. H" y p3 u3 d
}
?: d: V9 U4 J/ d) |2 b
}
5 K1 l# X# E( ^6 J+ b0 j O- q
</script>
2 E$ Y! e. L) W) X
1 o0 i) @: F: m* _$ X2 Y i
<form name="combo_box">
- v8 P! w* c3 }' s4 R3 O
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
+ t" b0 ^' h5 m( d( M
<tr height="24">
: v! G6 B7 V' d* [
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
4 r: H0 q& E+ A# e- G: q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
/ I5 K5 m1 J [( I2 e, R* N# E5 K0 E
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
- z# @; N7 w! ~
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
8 `# n+ d- I% z. a/ E7 f d7 i
</tr>
4 [; P1 z5 k6 i8 W1 w
<tr>
: d* B3 y. q: s
<td>
" B- H( U% P- Z, w: s( |' {$ L
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
- E- g5 v) }( d# X
<option value="0">请选择部门 ---></option>
5 v' N9 ~6 c. Y: W `6 U. e
<%
( a8 {0 {& ~( h# z& ~; O
string sqld="select * from tdept";
% N5 t8 J* ^/ z: \
stmt=conn.createstatement();
# }/ I: \# o1 C6 N. c* R
rs=stmt.executequery(sqld);
; O/ P7 `/ @+ G5 |6 w( R
while(rs.next())
& p$ u" D# n: x( h
{
& L' `. H' |" n+ h3 H
%>
- w% |2 |8 ^9 Y4 x4 S1 d. X6 \2 q
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 p. O8 w+ s. q9 V
<%
( ^+ t( c" i* p' z3 x
}
3 Y1 k1 y) {( G6 Y+ m% m! Y% S
%>
- Z3 F1 K$ [) J/ {
</select>
4 ]- T/ _2 ?6 \ c
</td>
- p/ S8 N" G- ~) C$ V- R
<td>
; g8 S- h* B$ R. I1 W" v+ M8 w
<select multiple id=city style="width:150;height:200" class="bgc">
! ~! t- W1 R4 d
</select>
! i& f0 F0 `8 k7 V# P9 V' l- S. b
</td>
c( m. X4 U, b4 d; \/ a
<td nowrap align="center" class="bgc">
. k7 T0 \) y) U* Q0 l) O
<input type="button" value="<<" class="buttons">
) e& w# a& ~+ G& d
<input type="button" value=">>" class="buttons">
! L% N7 F$ ~/ v1 I: z6 k
</td>
8 A* _3 G- _6 @& d! ?
<td>
- U4 A" ~ y4 a3 r4 F5 e
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
+ X0 S5 Y, r) f! m
</select>
2 L, X! C) L! L' }
</td>
! D! T5 `1 ~' B% Q8 K9 {
</tr>
5 m6 V7 S) \* A! f1 T0 ~
<tr class="bgc">
! [/ b. t" @, d
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
" n9 g" G7 W/ I- @+ s( \
</tr>
3 {- O( {! G' m" K/ V, W
</table>
* S1 h* ^7 R0 T) m1 S/ N
</form>
# q+ |4 G* b. ?
<script language="javascript">
3 D6 z- d! i9 k& u
//人名移动
/ Z. R7 R8 `# ?7 S
function move(fbox, tbox) {
; F$ c- ]7 l2 `3 [ s2 w
var arrfbox = new array();
! v+ U4 f5 n$ s- V& x
var arrtbox = new array();
5 |3 ^& E( @3 t. c
var arrlookup = new array();
7 c E. F6 r1 I
var i;
& E. N# x/ m, C
for (i = 0; i < tbox.options.length; i++) {
1 j' K/ v0 j6 S- w. x
arrlookup[tbox.options
.text] = tbox.options
.value;
6 `! a5 v* }9 `5 Y1 m& O2 X
arrtbox
= tbox.options
.text;
) \, k9 B6 I" e, O) s6 n
}
* @" u' o# y' W0 Z, [7 i
var flength = 0;
0 E- V' c- p1 D6 u4 s( I2 V3 f
var tlength = arrtbox.length;
8 }5 }6 ^3 b( ^$ @
for(i = 0; i < fbox.options.length; i++) {
7 x: M5 I: T' d; H
arrlookup[fbox.options
.text] = fbox.options
.value;
; Q8 q1 d( N/ I, S) r: ]' O
if (fbox.options
.selected && fbox.options
.value != "") {
: N- f* x, F1 d0 x
arrtbox[tlength] = fbox.options
.text;
* Z* E4 @) }2 i" q
tlength++;
; F8 y5 w4 n7 v
}
7 N, m) b# ?! e- ]+ s
else {
e+ Y* j' N1 @# q
arrfbox[flength] = fbox.options
.text;
$ J# \& p7 D# m/ B1 @3 A. C. f
flength++;
% E7 q8 {5 d' y; G) e" T( g
}
2 V7 c/ R' O R" M
}
$ Q4 f' O8 R, C
arrfbox.sort();
$ P& H1 P$ @* h. D" I4 V
arrtbox.sort();
& z( t2 M% B2 v& V( d& [- G& Z
' t) p9 f' N9 Z
fbox.length = 0;
5 J* k5 o z" }
tbox.length = 0;
R/ s6 g7 b1 D" n/ J* S8 k" U7 M3 p
var c;
" b+ H: I7 }- i6 `
for(c = 0; c < arrfbox.length; c++) {
$ h4 r5 s6 B; V0 P2 A% ]
var no = new option();
) n+ |% {3 v- l& L' {* Y
no.value = arrlookup[arrfbox[c]];
2 Z0 N3 J8 C1 I! p; }( g/ D4 k" p
no.text = arrfbox[c];
/ g x" C; U1 Y. T1 M
fbox[c] = no;
5 W8 l, p' g$ }+ [" C4 L
}
: w2 ?9 _; q6 [
for(c = 0; c < arrtbox.length; c++) {
# U n" C4 ~/ `) X: e
var no = new option();
9 U4 E1 e) N* d, N; ^. \, N
no.value = arrlookup[arrtbox[c]];
$ E( q' @' y8 ]- P) a6 Y
no.text = arrtbox[c];
( ~+ A D1 d) d
tbox[c] = no;
6 `- g1 s/ A1 d% X% R" \2 `
}
) n1 u* V' F+ E8 ^# B3 L
}
z9 ]7 J0 k% B) n) J6 J, R
</script>
+ y1 [. W6 n) a) S2 H9 y$ N
</body>
|# A- K8 q# l# t
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
