标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
/ s& K1 C, C5 P" [; }- j# ]
c pageencoding="gb2312"
( X0 C- y# \, C6 c1 g2 K) T
%>
# I$ e/ v- y0 n; h
<style>
0 d, p4 k) P& T6 M0 h
.f9{ font-size:9pt; }
; |4 q. a* k B0 V8 \ f" P" c
.bgc{ background-color:#aecaf9; color: #0033ff }
" F& k E, `. C6 C6 ~' C/ L1 \! k
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
1 t' i6 h3 @$ x8 h
border-bottom: solid 1px #4e7dc1;
$ F; t3 F- M. C* q( }
border-left: solid 1px #aecaf9;
9 c) u' Z. a, u( m; H! D
border-right: solid 1px #5679bd;
" K& `: _8 o# Z' o* Q
padding:1px;
% i- z8 [( W; }5 b! d) T
margin:0px;}
) r) Z3 y/ e1 C0 |1 B
</style>
2 C& u7 I1 D2 j9 T/ h) F
<script language="javascript">
" Y Q$ Y# Z" Q4 w4 s
<!--
1 \# R" [3 f. c# z
function rv()
p' K( W! P$ s7 N: Z: ]& k+ M
{
$ Y% _: l( k, d9 F+ \* K
var val="";
0 v2 G. j+ F$ j9 S$ `. T) {3 C
for(i=0;i<combo_box.list2.length;i++){
2 V# z; N+ Z2 h I
val+=","+combo_box.list2
.value;
1 C$ s! Z1 ^! ~1 l
}
( I" _/ Y' l, a' V
if(val.charat(0)==","){
$ U2 y$ v, I5 o/ s3 a: }7 ]; g
val=val.substr(1,val.length);
5 M5 r, O; |) D. c
}
, [5 M$ ?/ a- j4 o3 U0 E6 j5 u3 `
opener.form1.frecname.value=val;
' a& D$ ]2 D$ ^' q; x1 h
self.close();
3 Y: ?8 p3 k( u( D
}
. X* }( T1 m% s
//-->
1 l" [, U* I1 b
</script>
& i2 t5 N# y2 ]2 s* E
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
" Y2 v7 [2 K0 o# @/ Q
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. w- j$ m) F, M+ R, x7 X
<%
p" e- B0 V. ~3 p: m" S$ H4 l
cdatasource ds=new cdatasource(); //数据联结bean实例
- E, h" m6 F9 Z8 V/ ?5 Z/ C- L
java.sql.connection conn=ds.getconnection();
. a3 o3 ~3 q# j: F1 x/ ^! H
java.sql.statement stmt=null;
9 z1 v: z" r# K" x! A
java.sql.resultset rs=null;
( B! E0 m9 Q6 ^" {! u
cdatacheck dc=new cdatacheck();
5 C/ H3 F, Y1 b! ~6 U/ t8 t
%>
0 C! b \ K, @7 v+ r/ y
<%
$ }& l5 B: W. H! ?
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 q: Y5 g- x+ }% B) K
stmt=conn.createstatement();
8 A/ G; s5 q8 m0 C) I- {1 I
rs=stmt.executequery(sqlu);
& C( Q( K$ [8 j F) ^
%>
% `6 |+ b! C7 L* _: j+ X$ C) a
<script language='javascript'>
p( p. e: z2 d: a7 {8 M
arr = new array();
- A" d. C- E5 C
<% int temp=0;
) l# i0 M+ b% x6 h$ `/ m
while(rs.next())
# C' m! P- D& [2 u
{
3 v- |6 [* P8 \4 o+ P1 E$ Q& k
%>
8 w6 @7 R) Y; J E6 I+ u. g
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
4 e! k- a9 U# m9 M! u# s
<%
! ]9 ?1 l0 l t
temp = temp + 1;
* L" v7 d e) Q4 f- c2 l7 X
}
# f, M; w2 j/ W: J
%>
& B) _4 s: p% l- p' ]0 P$ N0 F2 I
temp=<%=temp%>;
2 Z( W1 E. U0 b$ C G% C- B
function changelocation(id){
9 @9 P; }9 W7 T w. n! h+ K; n
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
# }5 e8 @: X) M m; v/ C" f
var i = 0;
% q* g, ?/ L* r' j
document.combo_box.city.options[0]=new option('-------','');
" |* t& c0 ^1 Q* [3 g
for(i=0;i<temp;i++){
8 g) e9 o' S9 G; i2 h+ G; \5 }
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
9 K8 s M6 W4 t
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
# B4 m# L) ]* S2 `: q
}
( G! Z# z/ V( h3 a
}
4 i L) n, n3 g% [8 M3 G3 B
}
3 \) W$ H1 @/ R+ q9 f5 s- ^
</script>
! @2 z9 j9 T$ L
; }+ g& ~- }; a7 M i. y( O
<form name="combo_box">
; D: T: d6 W, p& K
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
2 A# l" |& O) i" ~
<tr height="24">
' @* `+ w6 j3 f* T
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
. C, Q9 w' p8 Z" @! u; Y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
' {+ |4 }( i, g" v4 Y) \
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
8 f$ W% Q( K: E- P; K, t
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
5 ?$ t$ O( O3 H: T* |: o. U
</tr>
" {$ R, e5 V) _" m$ m& R
<tr>
8 H/ u% ?- R( W5 S1 s5 @
<td>
i8 B* e1 d. Y
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
6 N0 m( A6 V/ j; F7 d: v
<option value="0">请选择部门 ---></option>
6 C* [+ A' D, I& B
<%
" v9 k# W z& }0 P9 F0 a
string sqld="select * from tdept";
& L+ X8 b9 C5 ^% q5 Q
stmt=conn.createstatement();
& F6 N+ k0 R( p M
rs=stmt.executequery(sqld);
% ]$ r% k7 W& Q" @8 q4 k2 A
while(rs.next())
" s! o1 u' A, V; s: w1 ]
{
' b9 G6 Z3 a) }2 c
%>
1 C; K% U* e+ ]; k% M
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
3 z: R9 V9 n# @8 k1 i& |; @
<%
7 A( G$ k+ y6 z% h
}
( g( T9 T( H9 e4 y- C4 ~; w* l
%>
/ N7 d6 B# c. u: |- S
</select>
, m" A3 n9 `7 q3 F
</td>
: \" ]! [! q R7 [" O0 u( ^
<td>
/ |7 p6 N; X3 J7 j, _
<select multiple id=city style="width:150;height:200" class="bgc">
5 c+ b1 |; d8 p4 Q
</select>
7 U2 Y q( q6 O- ~, W
</td>
( M! _' t; t) W% q. ^8 j
<td nowrap align="center" class="bgc">
) Y8 E0 q) X! y0 Y6 Q/ A
<input type="button" value="<<" class="buttons">
! `1 ^( x! ^( h, v
<input type="button" value=">>" class="buttons">
, X1 ?8 B" Q" [+ N8 d- \+ B! |' E# Y
</td>
( O' X$ h' Y \; X6 A
<td>
) ^0 ~! c; Q' z& z7 _! u& o1 y% H
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
% \# U" w' W3 Y3 Y$ [2 k, m E$ i
</select>
+ U5 v3 x0 r0 o1 P6 W7 \
</td>
1 g* A7 ]+ |& R+ ]. Z
</tr>
. w7 P" l, w' b, m8 d
<tr class="bgc">
. j1 O# @: y9 d" M0 D& g5 z
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
k( f: }0 b9 J* S" G! L# b' Y/ p
</tr>
' c- b0 n F& c4 V
</table>
7 x& K0 G! q+ c4 b# t
</form>
+ _0 K. N/ w5 M% t
<script language="javascript">
8 g: q/ C$ v3 y* h+ C
//人名移动
H0 e% I7 C: ]& o! O. b1 x
function move(fbox, tbox) {
8 l6 C) g4 H8 j
var arrfbox = new array();
; a+ |+ `8 ]+ `& _
var arrtbox = new array();
, K1 z- Q4 Q" O' m4 `
var arrlookup = new array();
3 W* V) S9 i8 h) J% d3 p
var i;
' n( K v# I8 ?' ^6 R; ^" ^3 K! ]! Q
for (i = 0; i < tbox.options.length; i++) {
! z) T w; Q5 w6 G: \
arrlookup[tbox.options
.text] = tbox.options
.value;
' T) B2 d0 i; h, ?9 b8 T
arrtbox
= tbox.options
.text;
1 W$ F& A+ \* h* p& W
}
3 q% T0 \7 M2 Y" q% N! Y
var flength = 0;
- v+ \% A- r# U1 P; H) w
var tlength = arrtbox.length;
6 L1 |- A6 y2 C
for(i = 0; i < fbox.options.length; i++) {
4 T" j3 u& d' Y0 T( b, d9 S
arrlookup[fbox.options
.text] = fbox.options
.value;
! Z9 ?+ Y7 l3 \" u# @% u4 Z+ J. F3 I
if (fbox.options
.selected && fbox.options
.value != "") {
- k( v4 X7 B# t, V' t3 Z# e. K# C
arrtbox[tlength] = fbox.options
.text;
; f+ M3 i* {* d- h/ N7 r+ J
tlength++;
8 p' ]/ F U, d o) R* w3 s
}
; m( j L: v1 x, G& _7 ?! R* K
else {
9 d4 x L/ r) A$ H# S
arrfbox[flength] = fbox.options
.text;
6 j. s3 |$ b* ]8 v$ P9 j: \
flength++;
/ l" w' B/ n6 N1 ~5 ]' ^
}
0 ~3 p$ I. W+ \$ H) q) l( H, x; r; H
}
5 ?0 |3 K1 d: j) |" G
arrfbox.sort();
7 l( Z8 r4 K- K) O# [& v
arrtbox.sort();
; n7 I7 I/ B% B5 X' O! a
) d* D( V' V5 ]5 Z0 T5 ~
fbox.length = 0;
0 k {% A! d: o' n& \/ d( o
tbox.length = 0;
. N* J! y* j: b% X$ X/ i
var c;
7 E- D/ ~1 u' H1 G" D! A
for(c = 0; c < arrfbox.length; c++) {
$ Q/ F3 d5 \9 ?
var no = new option();
6 ^' d( D* p4 o/ a5 ?& j1 m! v
no.value = arrlookup[arrfbox[c]];
4 a* S6 }& G" t- U$ d8 t& w
no.text = arrfbox[c];
, R) W( p; {1 L4 K% a; G3 v
fbox[c] = no;
6 r+ e9 j" z& L# `' _
}
% I4 y v1 n, b" e
for(c = 0; c < arrtbox.length; c++) {
3 V& l: H( z. ~" d
var no = new option();
* }' u4 q* b. n8 r7 `6 y
no.value = arrlookup[arrtbox[c]];
. G2 i, t" f* c5 ?. W, C
no.text = arrtbox[c];
3 Y0 w8 Q: B: r5 R4 R6 d. O
tbox[c] = no;
$ J# v8 z0 C3 }' i8 J
}
* F( r4 h% s$ i- g0 ~" [
}
4 u# I. l# s% K6 I5 M
</script>
6 h$ i( H- e* _9 z7 {
</body>
/ I' [* p/ D- w4 d4 [: A
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
