标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
. W3 a! l$ H' {0 Z" X, ~
c pageencoding="gb2312"
6 w: k+ {: g4 S9 _5 T& `
%>
, O" c( _* H6 {! i
<style>
* v7 D9 y% E" ?3 o; _+ R8 m( S
.f9{ font-size:9pt; }
+ W' R0 l' [% J' u# N1 _
.bgc{ background-color:#aecaf9; color: #0033ff }
( `) R* a g% P- L
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
& \+ } y" }1 D" X" j% z/ t
border-bottom: solid 1px #4e7dc1;
3 k( @- F! p, L0 d6 X2 A9 H9 ~
border-left: solid 1px #aecaf9;
) \$ Q5 ]" j! \- J% S+ M, M; h# }8 J7 C
border-right: solid 1px #5679bd;
, v) E" y q2 I. A! K- X# w
padding:1px;
$ F+ m% f$ ]4 l* G* \5 @4 P
margin:0px;}
; I0 l' k$ }5 `! `1 Y% |$ B& D
</style>
/ J5 X: o: ~1 A9 x/ K9 h+ [* ^
<script language="javascript">
* K D" m7 W b
<!--
4 c, N; w: J3 k6 S2 D' Z& ?
function rv()
5 S1 o( O7 M) N
{
3 B$ q9 {' N! B9 V& y* M! \1 g+ K
var val="";
% T! ^. n- S4 V7 Z
for(i=0;i<combo_box.list2.length;i++){
" n- b: D: h2 Q; j3 J& V
val+=","+combo_box.list2
.value;
, I1 x- G8 V4 t# X! r% J
}
$ j0 j# }( m: B4 M6 V4 Z# E5 g* M( a4 t
if(val.charat(0)==","){
$ {6 {/ o# p6 q- w
val=val.substr(1,val.length);
2 m/ f1 l- @2 U- z
}
) M8 ~7 ^7 G) y9 i O
opener.form1.frecname.value=val;
% K+ J8 g7 W& Y! O ?" T
self.close();
' Z+ e7 W0 ~/ y7 }2 w. G+ V
}
/ s1 d; D+ v' {8 W
//-->
. o2 q+ p. X# J; ]5 D8 \% W
</script>
' j B& `( |1 ~% R3 S! h$ i
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
; u+ Y7 _6 [9 E; v' o: B* ~2 t
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
4 [0 u; Z& t- I( K# D% d8 k- [
<%
; ?8 J9 J* m1 x4 R1 G
cdatasource ds=new cdatasource(); //数据联结bean实例
# r$ x0 i4 f* w N t4 k
java.sql.connection conn=ds.getconnection();
' @0 D a& P" k* \9 y
java.sql.statement stmt=null;
8 i3 N- h# p' E5 z
java.sql.resultset rs=null;
" t1 p0 A+ |: T; c: y( l; I' G
cdatacheck dc=new cdatacheck();
, _ B1 A% O9 Q3 K: F5 x9 A
%>
: L! _4 y" ]' l) ^' t% }
<%
. @8 v! B7 ]0 t [% k4 P( s
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";
# q8 I) c n+ v! C; q
stmt=conn.createstatement();
' \7 g# n0 W# u) w2 `3 O7 Q
rs=stmt.executequery(sqlu);
& ]- ?/ p( X' ? m
%>
2 K4 r g2 Q1 e- h2 M% E& ^
<script language='javascript'>
8 [2 C( a% n, V9 B9 r
arr = new array();
+ R: B1 q f7 J% X V
<% int temp=0;
: b r. ]3 }$ L0 q" w \! G
while(rs.next())
# p8 p4 W4 F4 [* L
{
0 Y6 Y! N. r* b! r% H
%>
y" q* P; b3 {4 S" W3 i7 H
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
: A1 }& k+ L9 g7 R G( r
<%
! ]3 {2 Z2 q: D6 j6 c
temp = temp + 1;
0 Z3 C3 w4 z5 N- L
}
3 m+ Z* v% N) s, T/ W' ]4 K
%>
$ _1 s' } w. H5 h }
temp=<%=temp%>;
5 [/ I* P H" w5 L* D) F( a' x
function changelocation(id){
, t" Q3 l) o5 @& a6 n$ @
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
. J. X' }8 U* S/ M# z- e/ l3 o+ q* m
var i = 0;
L3 s4 x# o& G7 R
document.combo_box.city.options[0]=new option('-------','');
0 C+ T& l8 r; B. y5 D5 x8 v2 j, C
for(i=0;i<temp;i++){
6 @: X) X& I3 m, f0 s
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
: ]: q) {7 e+ \. y @* W' [$ y" o
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
/ K1 G$ ?8 k- a+ w- V2 n3 Y5 Q
}
7 u2 f; r, L- C; g# O' A1 T
}
9 c$ ]5 b& {" y. o( N! e" [ }
}
% ^2 o7 U+ ]; i; J1 `, @8 H
</script>
6 h' X( I- p4 A3 H% `" u; F
1 C" L1 ]$ a( A* U
<form name="combo_box">
4 w9 M+ A0 o1 Y' v* H! A7 a: j2 {
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
% l; h* f) w" P- u) W t0 f
<tr height="24">
) y& p5 a2 A8 Z2 R& N& X/ X: J
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
' C7 u7 b w5 }+ Q$ \) x
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
5 V0 A% P# I) e1 j2 X
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
( h# p' G, N5 M- U5 O
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
* x. z6 ^& E. a S" T, y% H
</tr>
$ m" C+ h/ m9 r! F' o+ F3 r" ^; B
<tr>
6 Y' W" l- P) j$ T) ?+ J1 [- ]! P
<td>
u6 H1 V' c ^6 Q3 F6 M( Y
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
3 U+ A# K" v4 z' C: y, g
<option value="0">请选择部门 ---></option>
/ o2 Z5 n& Y0 ^3 e# R
<%
% [& S' b% {5 T
string sqld="select * from tdept";
5 G# X0 \) N8 T: I# y
stmt=conn.createstatement();
; _( e3 `2 y6 }2 S
rs=stmt.executequery(sqld);
+ ~( P$ m% o6 J
while(rs.next())
. l W( @8 g- I) ~: {/ x/ b
{
7 ^4 @ R! x. {) z" b2 g+ ?' t
%>
" T3 ^4 a. ~8 y; ^$ G
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
, t- }# P! `) t0 S
<%
9 j: O2 A9 ]$ p$ D6 h1 f" S
}
% Y. A- n( G {8 z, m0 {% M
%>
* M4 c& B& k( v2 ^6 \
</select>
) l6 }( s% b; E# X" b
</td>
4 v( b: ^' M0 Y4 E! A7 \# g8 ^
<td>
) B8 R4 r5 X' o/ y4 @
<select multiple id=city style="width:150;height:200" class="bgc">
3 H6 L. X! R; X% E
</select>
/ J3 f0 M" d+ ^$ V
</td>
) I- b; a( [5 Q3 E
<td nowrap align="center" class="bgc">
6 y+ \; P% J, @, q
<input type="button" value="<<" class="buttons">
) Q) k2 t* ^, \5 O, E* r1 _
<input type="button" value=">>" class="buttons">
; r+ z1 S; V4 i/ O9 Q3 v* M
</td>
9 Q8 \9 t+ u- d1 f/ L2 r& q5 r
<td>
9 Y) {4 u8 H# j* D
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, v$ V/ w. T5 V/ p5 H
</select>
% e' f! x. Z* k2 v$ [: c( Z
</td>
. L: R; ?8 l3 E$ d
</tr>
3 H; z9 U- B3 P* [1 e( J9 i
<tr class="bgc">
1 s% g# Q; B8 B) m/ H
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
7 h- f. X9 e! s
</tr>
! W4 ^# ] N1 T' r" u9 d
</table>
7 |% m F3 g6 u8 {5 C
</form>
0 A' \1 v [0 H, F( N6 G
<script language="javascript">
& U' |% @8 L7 a0 }, D
//人名移动
' _ O: l* W# u `
function move(fbox, tbox) {
1 k6 c# M1 ]- z% F/ L- k/ |
var arrfbox = new array();
) p: m1 w' J8 y8 I6 v
var arrtbox = new array();
, Y4 L ?( C' j E: O. k
var arrlookup = new array();
" [* q: W4 o. l0 C$ h
var i;
8 ~' ]& U2 T4 q: }
for (i = 0; i < tbox.options.length; i++) {
( b( Y. O7 r6 }7 j: y
arrlookup[tbox.options
.text] = tbox.options
.value;
$ h+ u [+ u" L- C, m
arrtbox
= tbox.options
.text;
0 H5 J4 f9 Q8 m( A+ n
}
& N/ o$ v# U3 l! G( G; d5 B
var flength = 0;
5 W; E' s# Z! K
var tlength = arrtbox.length;
* w6 n! m6 ~+ K! h$ F
for(i = 0; i < fbox.options.length; i++) {
& C$ r8 w8 E& t% K2 p4 l
arrlookup[fbox.options
.text] = fbox.options
.value;
6 G0 F5 c5 N/ N, u l4 D/ T
if (fbox.options
.selected && fbox.options
.value != "") {
# e9 X G2 i$ s0 A& T2 ~
arrtbox[tlength] = fbox.options
.text;
5 j# L# G4 ]) c% }; C/ x3 z9 y G
tlength++;
# w ?2 n& J9 p6 f+ M
}
7 ?. r! R4 q( K/ x1 u: \& P; b
else {
) B9 k- D. k" P' S1 B
arrfbox[flength] = fbox.options
.text;
) H- ]2 Z. S e) T/ G3 M0 X/ b
flength++;
# ?* O7 e: E5 D
}
: O) b$ q0 \$ L
}
2 W4 H- t: ^6 q/ }
arrfbox.sort();
. j* C/ P e$ h" p. Z' ?& l
arrtbox.sort();
- y/ n2 \4 Q* ~
8 B9 J" K: W. m
fbox.length = 0;
9 Q1 i6 |% H2 J- ]4 Q% R% W
tbox.length = 0;
- a$ o. j0 S$ ]& W" y* Z2 ^
var c;
3 V3 b- x c6 @
for(c = 0; c < arrfbox.length; c++) {
3 G4 x4 g% z5 k2 v: I% q
var no = new option();
; M7 Z* x8 ^- T3 S$ Q$ Q" G+ k" m
no.value = arrlookup[arrfbox[c]];
2 r3 ?7 \8 \* p+ R. o. W
no.text = arrfbox[c];
- P* I4 _5 i8 S( q" f
fbox[c] = no;
2 W! d/ k! b9 S
}
$ _) _4 s1 ?( i/ ]) M/ K2 K! n
for(c = 0; c < arrtbox.length; c++) {
- ?/ N7 {, P: ]& P5 ^, O
var no = new option();
J/ w/ x- `& j
no.value = arrlookup[arrtbox[c]];
- _1 h- K0 ^0 T
no.text = arrtbox[c];
/ r; s7 m& t5 H: ]6 ^" S
tbox[c] = no;
|4 q4 K( A* G& F8 |" t i1 {; R) x
}
' n' {2 p) p4 G) G3 K! ^
}
4 z7 ?9 C r( g$ n5 r9 W2 p
</script>
4 h9 r) C' l1 ]
</body>
* \8 _$ b, F5 S3 [; g
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
