标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
g' N" o K' O3 a
c pageencoding="gb2312"
! O9 [( I6 y6 O! ^! w$ [: B. V
%>
9 S) l+ i+ n) B, K" Z* U+ p$ r3 {
<style>
) z4 [' o5 t6 O5 v1 o) P% I
.f9{ font-size:9pt; }
2 ~5 [4 V( _9 p5 A$ `
.bgc{ background-color:#aecaf9; color: #0033ff }
) S" P) b0 X# L5 ^* h% A o6 B
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
Z# }5 G1 `7 H0 a- {
border-bottom: solid 1px #4e7dc1;
9 f" P3 n# s( v& A
border-left: solid 1px #aecaf9;
1 d, r8 Z" X9 ?% `& o5 J: N
border-right: solid 1px #5679bd;
% K; z N2 V" J" o# t# L) J
padding:1px;
6 K7 W. I0 R7 v! w! r0 s5 W, s
margin:0px;}
0 I, P: g2 w: ~
</style>
" m! r" Q5 j8 _9 B, L
<script language="javascript">
9 U: ~( l! f. }) [4 h
<!--
* ~! F) C* L* J
function rv()
' }# i. U- ^4 b2 Z( R+ w/ j, B( {
{
8 u6 ]7 [* U3 y4 {# t/ }
var val="";
4 n7 |/ T8 N/ M. P( c2 Z
for(i=0;i<combo_box.list2.length;i++){
- c. d. b5 ]" u- N" n
val+=","+combo_box.list2
.value;
% ^" P; b' a: {6 I
}
6 u6 Z" {0 r& q2 d& P
if(val.charat(0)==","){
2 `' X6 j, [/ ?6 s# v" Z& P5 |" H
val=val.substr(1,val.length);
& c' M6 k V2 W) J* h
}
8 _8 M9 ?% X# e/ k# @
opener.form1.frecname.value=val;
0 ~0 |$ E7 O1 ^/ b+ `4 B' d) e
self.close();
3 X3 ^+ m( Z& m+ {' w, T3 A2 }8 b
}
2 b: @5 ~. ^& z( J# s
//-->
7 P8 e/ C2 `' D0 E( E4 [5 H* z
</script>
: u( y$ Y' G* O% i
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
+ Y" w6 R& z* z
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
5 r1 B& k) L3 h; l8 s
<%
- [: G* F8 _) {/ i1 k
cdatasource ds=new cdatasource(); //数据联结bean实例
9 O% a5 j: Z# H
java.sql.connection conn=ds.getconnection();
. B& R9 a, I3 D8 Q+ Z: Y
java.sql.statement stmt=null;
1 w* X: _1 H# P/ E! }8 Y0 Z
java.sql.resultset rs=null;
5 E! W5 q7 x8 S/ w3 r1 i( t0 H& K
cdatacheck dc=new cdatacheck();
0 I# p8 m5 R4 ~2 l# o
%>
# r" N, _" c0 v7 s" {) v; ^. W
<%
. T. [5 r9 e: _: ?1 [5 [5 \3 d l7 A
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";
$ v" }3 G8 G8 K8 |, a
stmt=conn.createstatement();
- } R4 V: j# K" b8 i4 Z
rs=stmt.executequery(sqlu);
6 ]& ]) @+ A; ] V) {
%>
2 h# C( d6 S7 f: z o2 I( N- C) L
<script language='javascript'>
9 k* e% U8 c) { b& F, v# ?
arr = new array();
+ }0 Z: C* N/ }: }- ?4 T! {
<% int temp=0;
+ N* i- W# k' o% x |' Z6 j2 t
while(rs.next())
$ A5 G! ^( u- o
{
1 C0 L5 _6 \, d; j
%>
/ Y" ?$ M T' p- f5 Q. P6 q) e
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
; @+ L5 L1 q% i6 a2 k( ^$ u
<%
) @ Z& u6 J b2 w2 T
temp = temp + 1;
' W# _8 t. M( w0 e5 p
}
2 {+ q: f- M# {" ] w
%>
2 e; L0 [9 \2 R0 I' M
temp=<%=temp%>;
3 L6 t2 p8 s/ C( c3 o
function changelocation(id){
( P: @& U e. \& K
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
8 W" K1 ^0 r7 Y0 @
var i = 0;
' ]% ~2 ~) P* A3 X9 r) Y# _0 l1 }& o
document.combo_box.city.options[0]=new option('-------','');
5 s, P6 M* ^& ~2 F
for(i=0;i<temp;i++){
. d$ K% r# j5 X3 K5 L, i: @6 Q
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
: o! `8 H$ y( N5 t9 ?$ U. p
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
\/ ^ ]- r! {2 H/ |2 x. I5 s. b
}
2 w2 d/ \: r- ^9 y5 p# Q+ l
}
* P' V+ c3 V) d& A# a
}
6 c9 P+ p& W3 |( |( d1 U2 c
</script>
; S# F; Y* V0 s* c0 C8 Z9 Z
6 O7 j+ b ` Z
<form name="combo_box">
: L( H" O! w) v4 A- z5 o% l' W* K
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
; A" e4 G; g4 \, [
<tr height="24">
5 `0 N* `, N. d, z, [$ J5 e3 w
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
4 y1 h) A% c0 N; j# d2 J+ D$ x- S
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
3 z, J% E1 O6 G2 i" [
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
+ y! d/ R+ ^ O" v6 v4 m% L
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
) `2 m! n2 v. g
</tr>
: Q" t+ A- b! W$ `) O, E: S7 s
<tr>
7 L( S* p. K1 D& T4 @. `$ X
<td>
7 ]: D D$ \% B" @
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
- R" h0 J: L& H; ~9 [* H
<option value="0">请选择部门 ---></option>
6 ~, `, |! _2 c9 b
<%
7 K; ?4 w4 T8 e; P8 r; W
string sqld="select * from tdept";
) v/ {& l9 w9 c' I( A
stmt=conn.createstatement();
. f( y' d* h2 A5 v2 P4 D
rs=stmt.executequery(sqld);
3 u5 F# e/ a7 x# k2 W
while(rs.next())
: D7 p U1 D5 D+ U/ M
{
2 O5 m- C# V( r2 [( {# Z# Y% d
%>
: u6 P3 i" P( z% S" Y+ d
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
( \+ {2 W4 e5 U) ~; F: v
<%
6 r8 q+ z5 d" i9 U1 [
}
9 A7 p m5 G1 U) \) E6 q8 E9 N
%>
+ U$ b0 b- Q4 q K
</select>
9 G- m" X m, o
</td>
! x6 r* Z& x9 K1 X: q
<td>
& E' C, e$ a8 S5 @/ |0 P+ X0 S
<select multiple id=city style="width:150;height:200" class="bgc">
( _ W; g+ _/ G
</select>
- x5 S, L c; ^& C* k
</td>
# i# }+ v0 T8 h0 M& \% d
<td nowrap align="center" class="bgc">
1 F1 u' I7 }% P, H
<input type="button" value="<<" class="buttons">
# K/ K; |" b% d" E$ u' a9 ~
<input type="button" value=">>" class="buttons">
# w4 X( d. T* Z8 S' r
</td>
; M2 |7 I; ^$ `; I- h
<td>
: K! w# P" P, N2 W
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
% ?/ a7 i: h3 a
</select>
( L9 @6 H& m, m. s( V+ `& ]# q
</td>
~# E7 d% W8 r# V
</tr>
4 Y. @5 ]- [3 L
<tr class="bgc">
" {4 j" O6 T' J. R
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
9 n/ [9 H1 A" J9 r. ]; K
</tr>
7 T7 q8 s' j" v9 l$ V
</table>
' M0 O8 R' s9 T' t0 \3 L
</form>
$ f2 q1 M4 n3 r) P
<script language="javascript">
g$ i j1 [* t/ p: i2 g
//人名移动
5 K5 J+ t7 U, e# r
function move(fbox, tbox) {
4 D- u5 E) X2 _3 m" R; Z
var arrfbox = new array();
! N8 S: ?# ~9 L. u
var arrtbox = new array();
; ^7 `- p1 b$ K! V) {1 G4 z' ?" s
var arrlookup = new array();
, g, n& f: r- i8 _- a o r
var i;
: s6 x8 z" c4 a" e
for (i = 0; i < tbox.options.length; i++) {
* o2 { Q* a; z' i0 t- w: r, x
arrlookup[tbox.options
.text] = tbox.options
.value;
3 A2 _2 s1 e2 L* @2 Z
arrtbox
= tbox.options
.text;
) c# O8 i" R9 z5 l6 Q
}
- l" q- q, f y
var flength = 0;
! d" e' ?4 y& P+ v# T. K3 W
var tlength = arrtbox.length;
' m! l3 w1 e( L4 B I. P- d- @
for(i = 0; i < fbox.options.length; i++) {
- j) K( j- b- ]3 C" r1 A
arrlookup[fbox.options
.text] = fbox.options
.value;
& s; y0 Y3 O, |9 u8 Q& f
if (fbox.options
.selected && fbox.options
.value != "") {
( N: m- r# v+ [' l
arrtbox[tlength] = fbox.options
.text;
. \+ _( g; [- E* w6 Z) \* N
tlength++;
6 }5 a. A. e* V0 y1 B" J( E' a
}
* t7 @4 w' y9 W. Y. E: ]& i: B Y
else {
; s- V( A% H4 l! v t
arrfbox[flength] = fbox.options
.text;
* S; r! k% o: Q3 l4 p- Z" R
flength++;
b; b3 K# ~* u2 _3 V- y% i$ _. a' d% }
}
5 k* |! J' @& e) R
}
5 X1 w& _ L4 o. X$ z! H* X
arrfbox.sort();
1 K( G) i7 c: Z' ^ g
arrtbox.sort();
U+ Z" b, x3 Y
2 |# w, I7 A* p: x: R
fbox.length = 0;
! D; N7 U& P$ L2 [- K/ k
tbox.length = 0;
X) f0 Q9 P$ R+ B
var c;
5 R* j' S3 t0 v% w9 W$ D
for(c = 0; c < arrfbox.length; c++) {
% w2 z* K H6 D O
var no = new option();
5 Z5 `0 }1 E6 u8 O
no.value = arrlookup[arrfbox[c]];
$ a1 K& {: H2 \9 E. V
no.text = arrfbox[c];
8 @) u4 Y7 N$ g: H" T; m$ }7 R
fbox[c] = no;
+ K5 v6 N; i/ ?1 [. N
}
( B( v% b* t5 y& ?" A
for(c = 0; c < arrtbox.length; c++) {
* @5 N! ~4 r4 n. |+ j
var no = new option();
- a- Q, ]8 q5 ] Y5 x
no.value = arrlookup[arrtbox[c]];
$ u! E& W+ k. ?3 D+ }; @
no.text = arrtbox[c];
+ S5 Q+ a4 |' [* a2 W) d, T
tbox[c] = no;
, X) S' U; Y) Y5 ?! M
}
! U0 t: S8 L) D0 j: Y
}
K7 M5 F0 e3 B9 D4 {( {
</script>
6 o. x8 O. a' E+ ~2 ~7 t
</body>
- y6 s4 v. n5 a1 i9 S1 J
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
