标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
& _1 h' J1 q* c4 e$ f1 ?
c pageencoding="gb2312"
) ^5 J3 W. ^2 @- F- _
%>
+ `4 r* q" k2 e9 f6 x' x4 ^0 `* W
<style>
& }9 j, y6 W! m
.f9{ font-size:9pt; }
' Z; p, Y& w: n5 e
.bgc{ background-color:#aecaf9; color: #0033ff }
8 m* u- Q, j0 a! c, T! B
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
, m, Z* [) ]/ x8 \
border-bottom: solid 1px #4e7dc1;
3 U5 b- O& ?# g: c* ?
border-left: solid 1px #aecaf9;
9 l' q; s; q0 Y( i9 I
border-right: solid 1px #5679bd;
1 u$ b8 u8 q' O, `" p5 X1 Y8 s
padding:1px;
# x& S% N, ] E0 n- x' b+ u( v
margin:0px;}
5 c1 s/ ]# t1 o2 u
</style>
$ M& n( g! k" _ a( K2 }
<script language="javascript">
- X& z7 |# y3 n4 g8 J! a+ B% ?
<!--
9 f } y. Q6 B7 `- N) ~: U( J7 b
function rv()
% p3 f, |" l. A0 C5 L' q
{
+ P. Q3 f+ i8 b' f# p* e
var val="";
: m! Y6 |2 v5 X4 K0 @
for(i=0;i<combo_box.list2.length;i++){
, J: x" b) J% w; A. @( @- e
val+=","+combo_box.list2
.value;
. m7 v5 }8 L' i8 X/ y0 m8 _3 U" R
}
# |2 {0 F" h( i( F: g+ |. [1 M+ W
if(val.charat(0)==","){
# b# Y( j! E4 ~" p2 q% K5 q
val=val.substr(1,val.length);
5 l2 v0 [8 H" Y
}
% d7 H s" Q T2 e- m* w* D
opener.form1.frecname.value=val;
% _# K' ?! C( f V/ I6 x7 k6 y
self.close();
' T0 b; N! C ^% Y: P! n
}
4 b- l0 O [+ k! i8 ^" E5 x# m
//-->
, {' Z+ {# t/ Z }7 }$ `
</script>
3 e; }( U" h9 J: N4 N( P
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
: J' n9 z! C2 J- j
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
* t0 w$ H3 v3 W2 ^6 ?
<%
$ N" R& \/ [7 d1 r2 \! j3 W
cdatasource ds=new cdatasource(); //数据联结bean实例
3 ^: J; t' ~- ^3 I/ l0 ^, J) N4 Q, A
java.sql.connection conn=ds.getconnection();
0 f5 D" M" T* v" G! \
java.sql.statement stmt=null;
7 ?. g3 v8 }2 [) Z4 k; }% M6 ^& c" w
java.sql.resultset rs=null;
" D; o+ d( m& W' ~' L, F( L# T
cdatacheck dc=new cdatacheck();
! Z" |8 J' C" o2 W
%>
+ {* v ?+ w1 k5 X
<%
$ P& i, Z( u: E( r: X9 v) h9 E6 F
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";
0 D, M( z3 q9 Y1 F' L
stmt=conn.createstatement();
4 ]! h& n5 {: N9 `) k$ S/ _% p7 _
rs=stmt.executequery(sqlu);
1 y V6 |7 }/ F H/ _; P
%>
, [8 W" p0 Y* `7 N# U) d+ d
<script language='javascript'>
( K3 m6 \+ I3 J
arr = new array();
( z0 @4 M" V9 K' o, i4 ~7 S
<% int temp=0;
- w- O+ O' z) ]
while(rs.next())
" @ n* n+ }$ z$ o8 ~ I4 a
{
! P# y$ i1 C# ]/ \+ _: d
%>
- t2 k3 S2 w3 A; v b3 k% G- {9 p
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
' ?& ~. M- o2 b, R9 w
<%
9 K9 s4 [( N; P
temp = temp + 1;
# N: c$ w' P. ]! S9 ]/ x8 g. A
}
; z8 w- n$ C }. a' P/ d1 P5 I( U
%>
5 y5 x2 e" {/ d. ^
temp=<%=temp%>;
, S7 F, l1 t* @$ v5 S4 L
function changelocation(id){
4 Y5 p4 m* y7 Y# V* K7 N
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
n1 H) Y1 Q" u
var i = 0;
5 }8 W$ S2 t E% b: ~* u
document.combo_box.city.options[0]=new option('-------','');
5 w0 a( O1 f* u% F8 w# r% p
for(i=0;i<temp;i++){
; P- W; J0 V. X O/ u" r* v
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
. q( r; r( I7 N
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
9 ? q, D Y( a, q6 @# U
}
; |$ ?, s7 ~8 U) X- K7 v! V9 X
}
) |, \! r& ^) W
}
' K! g; ?" y+ a5 F, S u5 @ c
</script>
9 T. q7 y0 G. Y
2 M& G; _6 a4 O# e: @+ B
<form name="combo_box">
- V4 N6 p% S6 @
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
" \* a0 K/ k# B' d, _
<tr height="24">
6 ~5 a6 ` j2 e. d
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
" s8 H* K7 p% ]6 ]6 E$ c4 m& d
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
0 p) f" c7 l1 ~ u% U$ M2 O! n
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
% A1 P7 T) r; H! t X+ L$ f; C. F
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
6 |; z% V# y& u2 R, L% L( o
</tr>
9 z" Z/ C2 Y% s' U1 m
<tr>
! A' u. K, \& D1 n" C; o6 F
<td>
) n0 J) ?% V S. g3 `
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
+ @( a- m! R3 ^$ Q4 \ |5 e
<option value="0">请选择部门 ---></option>
# w! C# v r8 a, Q f, ]& R9 {& E0 I
<%
: W$ e8 `% M) ~3 U1 {
string sqld="select * from tdept";
) E0 }% {: H8 T
stmt=conn.createstatement();
6 A5 g/ V( R- [$ S7 n9 ]
rs=stmt.executequery(sqld);
8 I" j2 X: h& H7 a6 W) ~! q
while(rs.next())
5 g1 O- H1 s: P% b5 t+ j2 }: [
{
7 V! ?! d X+ [0 B
%>
$ e/ @6 Z2 J7 G/ r) n
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 q. y$ R& ]% w) A
<%
) T( M+ s" W5 g, {
}
7 C% @4 J% M* t. {
%>
- Q' W! e T: V' l2 s! w; H
</select>
5 T1 k' K5 {* r6 i
</td>
1 }# O6 ^1 {/ K. M0 J( Q4 Z: z
<td>
/ B* N; V9 v: r
<select multiple id=city style="width:150;height:200" class="bgc">
3 Z+ G& Y: |9 t) y9 E1 }5 }+ b- K
</select>
/ R7 A5 B; o- r
</td>
6 A: q P' y9 z, Z( Z
<td nowrap align="center" class="bgc">
3 s0 @1 ^. I- s% P
<input type="button" value="<<" class="buttons">
( n& |: j, ?" q/ i$ o( ?
<input type="button" value=">>" class="buttons">
1 x0 ?- b" r \ S
</td>
' j* P; \. m) K9 L5 W/ ~, m- X
<td>
& c( w" b: R9 Y
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
! w3 X' }* H) P
</select>
. p* x0 t) n: m2 \7 P
</td>
" e/ ?5 A: K( U7 x( K' i
</tr>
8 I; z/ c, I% t( j+ b" Y6 @
<tr class="bgc">
* Y5 E$ p9 w# D/ M9 {0 [
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
3 @$ ? o3 g& l" l+ z3 A
</tr>
( o9 y6 g/ G e3 i( ?
</table>
% n7 [( ~9 q5 [* n* b
</form>
0 }: r: G3 M* b/ i) Q; `
<script language="javascript">
' ^) t( s0 B! h# U6 F% j5 r
//人名移动
: N% ?* n% x$ Y) [9 @9 m
function move(fbox, tbox) {
( e% o) {+ b. d+ U0 V4 y8 P
var arrfbox = new array();
$ B) ~8 X5 M; b* z! t7 e
var arrtbox = new array();
4 t6 {5 l. B* y- N& ?
var arrlookup = new array();
5 c/ w4 y7 k( u) q( A+ y
var i;
/ t& ^- N8 C, n* H0 a3 d
for (i = 0; i < tbox.options.length; i++) {
- E# w5 u/ g2 o+ ]; r& C. W
arrlookup[tbox.options
.text] = tbox.options
.value;
5 H; F0 H! h8 W
arrtbox
= tbox.options
.text;
8 d I5 I u" E3 P. e2 Y5 p# b, \/ R
}
2 b% b' V3 z" o- I/ P4 }
var flength = 0;
5 F5 Z- H" n( x8 j, ~
var tlength = arrtbox.length;
; J0 \6 P# L4 G
for(i = 0; i < fbox.options.length; i++) {
0 v8 ]8 I% b0 U
arrlookup[fbox.options
.text] = fbox.options
.value;
4 [6 |5 C0 W' g2 |
if (fbox.options
.selected && fbox.options
.value != "") {
: [8 K w! j( `) k9 i
arrtbox[tlength] = fbox.options
.text;
i; B. Z8 {- ^' j4 D& H% U
tlength++;
' v: H: [( q3 o. D1 b4 E
}
5 W5 Y8 r; H( r, G# Z
else {
# _' n# Z$ l, ^7 J1 |% K7 E
arrfbox[flength] = fbox.options
.text;
& q3 A1 L+ N& f+ Q, U
flength++;
/ E0 [5 b( Q! O
}
4 E/ I7 ?5 Z! @& o7 x9 i. Z0 I
}
' A# V1 ?7 s% U* |: E
arrfbox.sort();
# Z( z- C. M1 y8 i) _8 c6 g8 ?1 G
arrtbox.sort();
! h5 R. x+ G. d& E
- V7 m1 {; H% \5 a) m
fbox.length = 0;
* f. a. Z3 w9 Z7 h' ~8 E( R
tbox.length = 0;
4 f# K& H5 ~+ z
var c;
! _: q% X1 ? S* c. b
for(c = 0; c < arrfbox.length; c++) {
$ H) h2 N0 N( \, H, p" u* Q+ }" \
var no = new option();
" l E* P# Q" r/ D3 Y
no.value = arrlookup[arrfbox[c]];
2 W: t, ?4 `+ y9 L
no.text = arrfbox[c];
3 E% C$ O6 c) a, n r8 f0 Z
fbox[c] = no;
! v M8 j% a7 o" h# v/ X' K2 F
}
1 w& {, B0 g7 S2 P: ~# t
for(c = 0; c < arrtbox.length; c++) {
2 b/ A( q9 \6 m* e, K2 z/ L& m
var no = new option();
" d+ h. g# h" {7 D' n
no.value = arrlookup[arrtbox[c]];
( w$ Y. d3 {2 ~
no.text = arrtbox[c];
: i7 O. j" N5 r2 z
tbox[c] = no;
' c n* \& L; s& [9 I2 S) b: A: y
}
. z% x: [! x q* Q' `3 V
}
4 ~% J+ }) ?1 k+ m1 _5 z- {! G
</script>
* q, o2 l1 s6 [ X* I
</body>
* Y. g! I( C2 j q+ K$ K' u
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
