标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
( ^6 }, D" o7 J! E
c pageencoding="gb2312"
: E& q! C S$ _' c/ [# Q/ A' }0 \
%>
& c! y9 Q+ E4 p) P" I% x
<style>
# _- E. {+ a- \9 `/ `. L
.f9{ font-size:9pt; }
) T- b/ B/ C5 \3 a
.bgc{ background-color:#aecaf9; color: #0033ff }
5 N% W, F/ G, D2 j7 ]
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 @, K2 k- @: [6 X
border-bottom: solid 1px #4e7dc1;
( r7 I' m$ l! U. r* P9 S
border-left: solid 1px #aecaf9;
: A2 L' f( a, L5 p, }8 g* x
border-right: solid 1px #5679bd;
" u2 U3 }: L. e; ?; G, f
padding:1px;
$ C, Z2 d9 Y" a$ C1 d9 ]( l
margin:0px;}
7 D6 c& O& q& E* C) D
</style>
' j z- ]8 d5 a% K; H" R% H6 L( B2 D
<script language="javascript">
4 Q$ y. @, Y7 `; ~
<!--
9 l5 \% J; K; M, t
function rv()
4 u7 |, V/ ?9 Y8 t8 C* k- F7 |
{
9 F+ ?. v8 c2 [9 Y' l
var val="";
8 {4 m4 X* y) U# U: K" `4 y" _
for(i=0;i<combo_box.list2.length;i++){
! l& i% ?$ O" @* d2 [) H: N
val+=","+combo_box.list2
.value;
* D; e4 H$ f/ k9 @+ J7 |
}
8 x5 m3 i* J: [( K0 y! D
if(val.charat(0)==","){
+ K5 N S/ V/ b' X+ w5 W
val=val.substr(1,val.length);
& b& |" o3 T7 |; x! {
}
) J5 U4 L% |; P d3 H
opener.form1.frecname.value=val;
4 ]( ?6 W! Q" ~$ ^# Q
self.close();
2 i9 p) x' g$ g
}
# {) g! U: M* ?' i7 R9 k
//-->
$ f" W8 I' p/ x' i @+ O
</script>
2 j9 L* ~/ K0 K! q2 s8 X4 o! l2 [
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
+ d4 Z: L. d. E! \% m" K
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
* |% `7 s5 B9 a( k, w+ A
<%
: [! ], z0 T6 ^2 S6 ]
cdatasource ds=new cdatasource(); //数据联结bean实例
) V5 w6 E/ x; h
java.sql.connection conn=ds.getconnection();
) c9 ~' e8 P( d% a4 R9 X/ X1 n7 L
java.sql.statement stmt=null;
, ~1 y0 d( Y/ j6 R
java.sql.resultset rs=null;
- o4 x, j: g+ G% i# t0 C
cdatacheck dc=new cdatacheck();
* i( f. ]9 a$ C% u
%>
/ `; p% s/ e" `# g
<%
t& c! w6 E; V N( ^ Q1 `1 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";
+ G0 @. J% l1 ^) E' p1 [$ H% L
stmt=conn.createstatement();
. @; ]9 {* }% U2 h/ K
rs=stmt.executequery(sqlu);
! a9 O% p) B' y% \
%>
1 u6 N/ }2 @7 p& }5 P! }
<script language='javascript'>
9 t, J6 L- c! z: M; i* P' }
arr = new array();
# I4 l# |% F% q9 U9 h
<% int temp=0;
5 d6 p+ T9 x/ ?1 d# A8 a ?
while(rs.next())
o/ q$ d( V N$ {
{
+ a: y3 H ^ D5 H
%>
1 K( j) g j; t
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
1 q6 ?3 ^* Z8 E: ~5 R
<%
# z9 G9 w; s- r) E+ R; L
temp = temp + 1;
2 t g% Y5 L }- A8 y% H6 R
}
2 a$ X2 O0 [- I: E
%>
) G- w: _' P! Y# K9 E/ k
temp=<%=temp%>;
3 {! B. e6 M6 m1 C; t" T
function changelocation(id){
$ i3 i' D& D% K: l/ x" b8 [# z( H. D
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
1 @% R3 u, Y [, P8 G1 h# [. |
var i = 0;
s# f! ~) l: ?3 F! f1 ]+ ]
document.combo_box.city.options[0]=new option('-------','');
6 w# w, i* ? k" S8 b
for(i=0;i<temp;i++){
6 q0 J6 `% m" b& ^/ t
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
9 ^: Z% E# l1 I
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
9 B: K1 i. B7 Z2 h0 }5 v
}
& D% t$ }, l" q' |; Z; Y' A2 I
}
9 Y4 C4 C- p3 `. D# H; t6 l5 X5 K
}
! c4 w, n, W2 _0 X7 H8 z& H. ^4 K& [
</script>
& _& y$ n7 s' ]/ a7 q
2 }7 u u1 l8 g) w
<form name="combo_box">
' e$ d7 G( u6 }' ^1 ^9 W9 u+ s; w- k
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
% ?$ D* O: S2 B {( Z# L0 z, O
<tr height="24">
6 @; N6 |/ O3 [0 z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
" }4 K( `1 F$ `4 Q% e: t
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
6 O& {/ E- N8 v( l8 A" I! [* m
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
, a- l5 g: l2 n7 v& B
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
2 q, d4 U9 M* q; D+ z" u) A W
</tr>
5 D( k/ F% F% l+ }5 G% n
<tr>
y* X* l- {1 v% H$ @: {, f# C+ W
<td>
& p' f" N) ^ N3 ~- R2 ?$ ?5 @% D
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
( h }6 A& h2 X" n
<option value="0">请选择部门 ---></option>
$ z8 F. w4 P* Y! x8 a1 }- L
<%
0 O/ K% k( e q8 E2 d- s5 r
string sqld="select * from tdept";
0 B; H# C3 J" @2 J
stmt=conn.createstatement();
, f' f4 E4 {0 u, E' B
rs=stmt.executequery(sqld);
: Y' m7 ^5 r# {; p4 s( i- g# T
while(rs.next())
* F/ W* ~: _ P: h/ R) ^4 F/ @
{
. x/ R. N4 l7 \
%>
* p5 W0 ^: }- h6 C/ a
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
/ Y8 U0 A6 M k% `5 _; d% @
<%
2 r# T! v; q z, R# y$ p
}
! \) j f8 M/ m& t2 e( w
%>
( G1 q& u t1 n
</select>
|$ b; t" n( }5 z+ V( P% H
</td>
9 i6 N! Y; p2 b( h; b# ` P% `
<td>
U% i; O" f5 Y: c! }
<select multiple id=city style="width:150;height:200" class="bgc">
2 L. n* a T! T0 _8 ^
</select>
( `- p% a" K, e4 i+ x) Z' z6 a
</td>
, Z) G0 r# X& Y
<td nowrap align="center" class="bgc">
) M# V$ n( D J. k" d" U; H
<input type="button" value="<<" class="buttons">
9 M5 D1 p" U# j6 T
<input type="button" value=">>" class="buttons">
; ]* `; T' c* z% |& i& z
</td>
- k" Z O2 ?- R* ] X
<td>
- B* h4 i8 D1 w6 W4 C/ t; C# h
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
4 W) y! H4 B& o% E
</select>
* r. O3 T- ^+ L3 b- ?6 I. t
</td>
4 N) q* [0 f/ H5 S3 [
</tr>
- S9 |2 t. {+ W( E. r( e
<tr class="bgc">
: i- s2 k9 L- ~. j5 X
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
4 C9 O7 N( R9 `8 k, P; L
</tr>
: \0 R1 f* U, t3 B+ v) \
</table>
, b0 \7 y: M# N( ?0 F& M9 }* ^! P9 U
</form>
) k, r4 b' l, U1 R4 m8 p
<script language="javascript">
- E+ L5 W! k- e
//人名移动
R( h# ~& R' B( ]9 d+ V
function move(fbox, tbox) {
, m* l" O" a, ^" T' C5 f- p" A
var arrfbox = new array();
' ?) B3 P- Q+ D; k; v. T8 {" U
var arrtbox = new array();
) b; ]6 Q" x! u2 S* }8 ]
var arrlookup = new array();
! F" q# P8 l0 U" @% s
var i;
- q7 Q7 }) N2 B( ?
for (i = 0; i < tbox.options.length; i++) {
/ {' L8 X- l+ _$ @
arrlookup[tbox.options
.text] = tbox.options
.value;
( H/ C$ J+ j( i, N
arrtbox
= tbox.options
.text;
& S$ _, H3 ^: Q }! R, j9 }/ U ]
}
3 g& V4 b. D5 o. S) [0 k
var flength = 0;
+ k$ G) Y. E9 F; q6 n' m
var tlength = arrtbox.length;
) M) V: U4 t+ H- D B) R
for(i = 0; i < fbox.options.length; i++) {
# W/ X, f. h0 i7 r" t
arrlookup[fbox.options
.text] = fbox.options
.value;
$ b7 v, T% k4 c K
if (fbox.options
.selected && fbox.options
.value != "") {
2 v: |7 {4 D! S8 S% Y
arrtbox[tlength] = fbox.options
.text;
) N8 d: K* `/ n" L5 K8 S9 N
tlength++;
+ E+ |0 M2 M8 a3 Q. {% _
}
- ]/ c1 Z( U7 Y- p7 W( F2 T5 q
else {
, x v8 T% f. M4 h! K! W) V
arrfbox[flength] = fbox.options
.text;
1 i6 G% L9 J! h/ l1 ]/ g/ w
flength++;
& i' v& u9 l+ ^ i! @
}
; q1 B/ l- P) s- k' h( S6 A
}
* o: [5 z8 g" R( ] d( G7 U
arrfbox.sort();
3 ^1 e5 i9 p; I. R, e: Y
arrtbox.sort();
" w9 o) C: w; V) \0 x. V
# v/ k& t- r$ u
fbox.length = 0;
) Z/ v8 I1 g+ j8 s' G+ `/ E t3 ~ q
tbox.length = 0;
5 n7 ` D1 w$ }
var c;
8 l2 _9 F/ T' h$ ~
for(c = 0; c < arrfbox.length; c++) {
9 _( u. F3 v9 V( S- L4 W% `8 F
var no = new option();
- G$ Q5 k, h7 r1 A+ f
no.value = arrlookup[arrfbox[c]];
5 k* T& @* Z. y7 r7 X
no.text = arrfbox[c];
8 `$ O e( x# z
fbox[c] = no;
' m" C7 S% O1 l" m6 ?7 H
}
/ z( b% O7 e2 W9 r0 R2 |
for(c = 0; c < arrtbox.length; c++) {
. G2 M2 Y' N4 m8 G+ Y6 H* C
var no = new option();
6 l& ]! O3 ~ B, [. \3 L) t
no.value = arrlookup[arrtbox[c]];
% L+ J& v. @8 @6 L+ R
no.text = arrtbox[c];
- |1 r" u& |5 m6 I% S# p
tbox[c] = no;
2 w1 }- S) _. c- s! r
}
3 Z3 x8 c! {$ f
}
. { K+ b1 N' Q' F
</script>
8 H4 o I/ a' S# D; p
</body>
- }/ k5 m8 W* |1 A3 x/ f
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
