标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
$ j- q5 ?5 I8 t5 m! @) ^
c pageencoding="gb2312"
1 ~4 U1 C' K7 R: s# s, D
%>
; \$ `' {- P( Q* z. X
<style>
- Q; m' J7 _( w+ {
.f9{ font-size:9pt; }
; n/ ^: Q' Q9 e1 K4 t) f
.bgc{ background-color:#aecaf9; color: #0033ff }
5 r" h1 Y5 o) ?7 k
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
! L6 n& E& E" P
border-bottom: solid 1px #4e7dc1;
( s' }6 c) m. c3 C, ^
border-left: solid 1px #aecaf9;
6 q3 X' `: ~/ R- @; L6 M; f$ q
border-right: solid 1px #5679bd;
, Y- G" \! I6 L/ v# H! T- e
padding:1px;
% G. V# B! h7 ^/ d) |4 C
margin:0px;}
7 {6 \+ b; `. h! P' j2 u
</style>
4 ^* | ?: l" J
<script language="javascript">
; M, m4 B/ A2 c6 D& G
<!--
. M4 e; ]" k* W/ f; g$ m
function rv()
! H5 ]0 W( L+ Q0 s) P) X: t
{
9 i/ h: f$ X* J. c* C; j5 |
var val="";
5 b( t4 p1 m4 u. n) A( K
for(i=0;i<combo_box.list2.length;i++){
: Z3 ^' B9 D- j7 N' W4 T, N; K
val+=","+combo_box.list2
.value;
' ~! S* y; h. I( M
}
" m) ^4 x( d4 i5 G/ x$ ?8 d
if(val.charat(0)==","){
8 |' i5 D! W" c& L. k9 f/ w. d
val=val.substr(1,val.length);
! v6 L$ O2 K5 r& N7 A
}
( i4 @1 b' A$ R. J
opener.form1.frecname.value=val;
, I) P' D9 [& v0 m
self.close();
( i( J" r2 ~* B0 [( G
}
8 K9 k E' x- u6 U. g7 S
//-->
0 ~1 f5 }: f1 w" l5 l
</script>
# T8 [* I; Z4 A; g- B
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
: N1 `- z: H h/ ?+ L9 E
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
* }. l$ @: x7 C
<%
% Q; b( W8 t" V
cdatasource ds=new cdatasource(); //数据联结bean实例
9 d+ T; c/ {1 U
java.sql.connection conn=ds.getconnection();
( d6 v5 [ [# B& ~
java.sql.statement stmt=null;
5 t" ~ n8 {, L, `% C
java.sql.resultset rs=null;
6 t2 M3 w7 i# s$ K2 t& G
cdatacheck dc=new cdatacheck();
7 c+ ]( T. q2 ~( W- a F
%>
2 k& N& {! D" H8 s6 A# g, c" Z/ S1 Y
<%
! @. O1 |7 B7 X# l
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";
1 }4 _6 O: k1 Z8 C
stmt=conn.createstatement();
) [; i2 g' m5 j8 c3 ?
rs=stmt.executequery(sqlu);
) i$ P$ ?1 Q# y6 \6 t: }9 g4 E
%>
# Z3 \' b0 N; G8 d0 f
<script language='javascript'>
1 w# e1 ?2 k' R7 c0 M% m( [/ \, V
arr = new array();
; g2 W: W8 M" L' H v
<% int temp=0;
3 A( Q' j. N( `2 b. }8 [. t# I
while(rs.next())
4 X# q6 t2 G; L! w& y* V0 h
{
, W1 M8 |& K! P5 q, u: k9 q4 s
%>
^* h4 n c/ I4 [- C7 T
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
. G' a9 ~8 F- t3 e1 U6 i$ t7 v6 ^7 F6 d
<%
0 v6 U; _( K4 R2 T; W
temp = temp + 1;
+ y, {' @$ _/ f) J) E0 X, t. \- ]$ q+ h
}
( _. B3 u4 o# g2 V5 f" v/ T/ Q/ O
%>
, a! q6 G! Q7 g
temp=<%=temp%>;
Q6 Q" Y0 u7 e/ h8 j/ O) M: @ h
function changelocation(id){
; Q* T5 q4 b0 k
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
- M8 N* N5 b6 r( {( D
var i = 0;
0 i* u. z9 X) \, p# ]1 s9 Z" N, p
document.combo_box.city.options[0]=new option('-------','');
: o" M* n# E% F: O2 K; \
for(i=0;i<temp;i++){
1 v7 n9 w7 Q( p- D& a' f
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
$ E( q/ E: t9 V D% G
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
: R" b+ O7 x+ Q5 z
}
9 H) w. X1 F* {4 |2 T" E' A( Y* k
}
' l' `/ B4 F Q( _
}
4 X0 L" P; [6 h c9 J! X
</script>
2 z& M; e7 m8 N3 w
( Z& F$ Y- c2 G5 E9 t% h
<form name="combo_box">
1 K) |3 M9 s, G, ^+ m1 k* M) b! F
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
8 _5 M0 q& G( o' ?; b! V
<tr height="24">
$ p" J' |" }$ [4 V, Y" U/ N
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
6 ~# u7 o, y S6 J6 l. }2 b; m! {7 E, Z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
/ O, R0 q/ E; ?% D9 t( b
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
, Y- K4 o; H1 }
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
( h# W! f( ]1 g+ o" E3 _
</tr>
& R2 k7 |. k/ D" _6 I. N8 N; Y. X
<tr>
* z3 L0 l' I) D9 `
<td>
/ c4 ]' t% Q& G2 a, u: b3 T
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
: R9 X7 A# E3 \" O* u0 c
<option value="0">请选择部门 ---></option>
: y& G3 x4 B* x1 G; l& G6 C
<%
& F9 a7 T; M3 V- J5 N- |
string sqld="select * from tdept";
{3 s8 G1 W9 i3 N, K
stmt=conn.createstatement();
; d& E9 D8 p" V
rs=stmt.executequery(sqld);
+ F$ O- _; \9 ~
while(rs.next())
% t" H6 V; u6 p3 b0 L1 E8 s: l
{
% I4 a' T7 c: _( E' h
%>
) X( w% ]/ \* {6 [* e0 {
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
) f+ p& ?* M# E F( d
<%
$ l0 w# l' [/ X' i' i1 N
}
+ g3 @$ B* Y( {! \/ z
%>
1 T- \; X( { u- J+ M m D
</select>
1 H/ v; _3 i- t. `, K, z \
</td>
- S0 x i1 |" Q- n3 U
<td>
! \. \0 e& x, A4 T8 Z9 T/ H8 R
<select multiple id=city style="width:150;height:200" class="bgc">
8 B; \5 \, Q0 E! }& H& E! G& {3 Q+ W
</select>
! `' m" S' g% s: ]: h; [
</td>
1 _) u2 G- }2 R0 H5 j/ v3 u) ^4 t
<td nowrap align="center" class="bgc">
0 L2 U$ L, {* n+ E" M% I2 Q
<input type="button" value="<<" class="buttons">
9 V* _# ]* J. i" M
<input type="button" value=">>" class="buttons">
4 a) X( X1 l. i' \; x
</td>
( j! x' t- L( \* E% J2 h3 }3 \
<td>
# F2 V' u) f% ~! `1 c% x
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
! j) y8 Z5 x* J% O B3 ^
</select>
% o% i3 X( X+ v/ @7 V: E+ s
</td>
5 |) w ?1 V' w
</tr>
* e! m% D4 S$ u3 k
<tr class="bgc">
; o3 {" I/ h: q' R( e8 s
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
9 h2 n: z& w( t$ @3 I. c
</tr>
$ m6 f' A: i6 j5 ^9 ^ k$ F+ e
</table>
6 ~ h* W8 R2 }) U* j5 q
</form>
8 D: K H. ~! m; h! z' K D$ O
<script language="javascript">
4 a( Q* n4 `6 C; |
//人名移动
+ d& h, _0 E; l/ d0 |- q
function move(fbox, tbox) {
/ b9 t8 }% v9 I+ F5 F3 m% E
var arrfbox = new array();
3 G) u, A: l+ O
var arrtbox = new array();
1 M- N9 P* O- U% K4 A
var arrlookup = new array();
* U. d1 B* v# f( x
var i;
* ~$ M- }' k3 W, `
for (i = 0; i < tbox.options.length; i++) {
7 g# ~, X- l. q9 }$ }
arrlookup[tbox.options
.text] = tbox.options
.value;
3 t# y: O) ~' Q0 X( u- z* t. G
arrtbox
= tbox.options
.text;
+ K, F6 w4 p) C4 M
}
1 V# M2 M4 x, I" o$ ?) Y6 p
var flength = 0;
" K2 a" D/ s1 N( h' g
var tlength = arrtbox.length;
" E( o R- J! q3 @
for(i = 0; i < fbox.options.length; i++) {
. M. P3 A& g( V1 _! g8 u
arrlookup[fbox.options
.text] = fbox.options
.value;
. M8 \8 |( C/ M- Z$ D
if (fbox.options
.selected && fbox.options
.value != "") {
) d/ i) a& [, a
arrtbox[tlength] = fbox.options
.text;
5 o0 d+ i- r3 F: m1 l
tlength++;
' w: f( n) b+ y
}
9 w0 c" U; o! M( e, A* P' l
else {
/ R$ {, \# E/ ]
arrfbox[flength] = fbox.options
.text;
+ U3 ?' o) v% R0 n; D
flength++;
/ E8 ?' h2 C: u. v
}
8 r& S! h/ j' r$ h; M: V( T1 G
}
5 k) }; M# s7 T0 z( ^; ]/ k1 `
arrfbox.sort();
; [% Q3 i& V* R, e; X, `
arrtbox.sort();
+ g1 D/ k+ w9 `4 C5 _6 \6 g
0 W: [8 g) J& N3 X
fbox.length = 0;
! Q. k- R! N4 ]. b4 W) o
tbox.length = 0;
" @: v3 k5 h, G0 P
var c;
' I) k2 R& x6 ~& G. c" N
for(c = 0; c < arrfbox.length; c++) {
: {8 \( l4 D! E4 H' V
var no = new option();
; X+ V" _4 P8 ~; g. a/ _
no.value = arrlookup[arrfbox[c]];
: o2 U8 |9 }3 W1 w8 o
no.text = arrfbox[c];
5 e/ a' S0 ^+ ~" R: Q2 I
fbox[c] = no;
' U9 U" ?& [- [9 C; ?7 W
}
: l/ V! P, S/ h* g
for(c = 0; c < arrtbox.length; c++) {
$ x n; E) r; T5 H8 ?, T
var no = new option();
3 ]* B. a/ x- ~/ r4 L j1 j
no.value = arrlookup[arrtbox[c]];
' u d, _* ]; m( {/ P- x
no.text = arrtbox[c];
4 k' u" ^* |4 R/ n7 U
tbox[c] = no;
: }# |, l$ U& N" L" V; W5 P* ^
}
) b: L9 I: a7 x3 y- p5 [
}
- ~6 R3 Z$ m6 D; ~9 D
</script>
% K/ q0 z6 B2 {
</body>
) a3 ]) r) F: z% f" E% G
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
