标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
* ]" B/ X4 ~9 U1 y
c pageencoding="gb2312"
/ U: ^ D' ?1 X' R! e
%>
9 h2 S @! K5 E$ ~7 k6 K" K, i& C
<style>
7 j2 r/ ^' u n! u! }
.f9{ font-size:9pt; }
' o Y1 p3 ?5 _
.bgc{ background-color:#aecaf9; color: #0033ff }
: h! a3 {. q8 ^: }1 S
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
9 O# L2 Z1 z+ g
border-bottom: solid 1px #4e7dc1;
' a9 L# z/ F! j& X" X
border-left: solid 1px #aecaf9;
* M+ B% C2 b+ F2 t
border-right: solid 1px #5679bd;
- K1 d3 i( q0 u2 F& s: ~( w% W* r
padding:1px;
% Y7 q; Q: P( ~5 k2 }- b
margin:0px;}
% l% L& X9 J# F1 E6 w/ F' T4 h
</style>
: f$ l: M% c* x5 S, s8 {; r4 h
<script language="javascript">
' t. k1 a: d5 ]8 x, Q9 f
<!--
! q5 |1 t+ K% a
function rv()
$ |9 x9 ^1 b% ~. O+ _6 g b
{
4 q* y- c" D) e. s. K- d5 _8 c- A
var val="";
9 D- n: D6 Q5 E
for(i=0;i<combo_box.list2.length;i++){
% \3 ]3 x1 D' R' n) f# G8 X
val+=","+combo_box.list2
.value;
: Y. u% o6 j7 C6 N
}
4 B# h u5 f0 I4 S
if(val.charat(0)==","){
* V9 ~5 c9 l, E& \
val=val.substr(1,val.length);
0 v- U/ ^% F- a
}
, U" n) u9 N- |* u
opener.form1.frecname.value=val;
) N7 j; T! X. e' d
self.close();
6 A+ a4 I& T& T
}
3 A! g: k8 |/ j: P4 |6 g6 f0 d
//-->
0 m; d0 |3 N, ~! D: f% {
</script>
6 x N5 m. F9 O1 o+ x! \
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
3 F: g3 X2 d. f# L5 f# J( X
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
4 p# f0 S4 {- P6 X8 R, @( K
<%
% H9 Y7 E* h. R, _& @
cdatasource ds=new cdatasource(); //数据联结bean实例
) W. u; A/ [8 E1 R+ s* X2 U. Q8 H
java.sql.connection conn=ds.getconnection();
) ?2 l+ [3 i ]' ^4 `
java.sql.statement stmt=null;
* ~0 ^% E% \! Q9 I2 H- ]) c* U
java.sql.resultset rs=null;
3 V0 `+ T6 g' ~: A
cdatacheck dc=new cdatacheck();
$ A! h; k( p* W" N# ?% o. j
%>
0 b( a) d/ m: p, n) T0 H7 \
<%
0 b B$ |# l6 m4 x# e% o4 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";
@2 c8 b2 T* I
stmt=conn.createstatement();
6 E9 j7 r( W' G0 o) E+ W
rs=stmt.executequery(sqlu);
4 Q' K) |* C5 @# `1 }6 X* t( z
%>
$ S3 L% n, f1 J4 I
<script language='javascript'>
1 e7 J. D4 ~9 J+ Y' F1 }
arr = new array();
) X1 W9 d8 N3 J# b- T
<% int temp=0;
/ T: t, {8 l$ ]
while(rs.next())
# C2 Q: K4 W5 q* e! S. f
{
w0 Z6 g7 o- H# F8 I5 x. p
%>
# f% \ X# x: z* d8 L
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
6 v: G3 j: T8 w7 G# J
<%
; j" ~0 S: k9 e- E6 K
temp = temp + 1;
]3 P4 P# c. ~6 H* P
}
! F' g9 T% {1 \2 A7 u
%>
1 ~9 U1 L" {- s
temp=<%=temp%>;
, ]: K5 S1 e n% ^1 d# v
function changelocation(id){
" Y1 q) k: g$ O0 L7 t
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
( _% `2 z5 B r3 I& o$ y$ C2 O8 I( ]
var i = 0;
: Q0 C E; @9 g6 p' t
document.combo_box.city.options[0]=new option('-------','');
8 m/ h, H" _" C9 y9 M# r% x
for(i=0;i<temp;i++){
! p: B3 i7 H- ?+ g) b8 ]" d; y4 u
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
* q% r4 l4 \2 Y2 ~* l
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
& R8 I4 N- U v0 i" t" t3 o) r6 {* r
}
% Q6 f/ ]9 f4 M' z, e0 F3 H
}
/ D$ p: E3 ~7 A0 B4 Q9 @3 s, x6 A/ V
}
0 j6 |+ Z: w2 d5 E; Q m8 F
</script>
7 o0 W2 W- |4 O
9 ^! W# \8 j/ V' O
<form name="combo_box">
, y$ _) A. V8 x( G: P4 ~4 T/ b
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
" v6 P" ?+ V7 ^1 w# d7 p t3 u
<tr height="24">
4 v; m: k* e2 L+ }, s; y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
" O" F6 U& p- } t7 m6 j
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
G9 j4 c: i. q* \4 h
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
/ \, Z4 C, `1 E3 d+ [! E
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
" ?2 N; w8 z/ C
</tr>
7 Z! A; s4 G) `2 T
<tr>
9 x l/ o: { y% p
<td>
2 q$ l8 X' L: x- \5 F. \9 d: S ^4 T
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
( h G0 D4 a3 v6 K% s8 y/ Z
<option value="0">请选择部门 ---></option>
; C. Q+ z6 B' o# H
<%
. F# p3 [# Z$ R
string sqld="select * from tdept";
' S: t' A% t& V9 Y5 {% }
stmt=conn.createstatement();
7 p4 W& K- i. W
rs=stmt.executequery(sqld);
$ a# f0 ]% h: d' W" N' }1 X4 d% Q
while(rs.next())
; {3 e5 X, |0 `% F* A* c
{
6 D/ B3 w ]- i! Q5 X1 [3 d+ ]
%>
) V. B% P) M, f; @ W$ z
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
! B5 K$ @7 N: H. V) G2 d6 n
<%
, l9 n2 i9 O5 ?; G/ u1 H" n! d# m
}
9 B- |. M2 [1 V7 y8 q% `
%>
0 m1 H/ q( l: n$ M. b; n# L
</select>
1 w6 V' {1 f' ?
</td>
+ o' H2 y2 P6 c7 j
<td>
- ?9 n6 \% I2 x) u) t0 M5 ?) c# C
<select multiple id=city style="width:150;height:200" class="bgc">
; |/ I% m5 H2 s+ R, O) }5 b
</select>
! I/ b7 [8 O* L- [# E: i1 n
</td>
8 `0 H" ?4 q; X& k4 m* ~
<td nowrap align="center" class="bgc">
) K+ r9 J! K& t
<input type="button" value="<<" class="buttons">
( {1 P% R& ?+ R2 x V1 ~7 l( I
<input type="button" value=">>" class="buttons">
- j# \6 X7 c+ `& O) z3 n# F$ I
</td>
3 Z7 s/ w! L' {; ~5 F( Q
<td>
G" z. g3 D7 p% V+ R& r
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
+ H# A ~" w* i6 D$ D; b" m7 v1 {
</select>
5 g: A3 [2 P4 P& ?6 ]% g
</td>
. B$ P8 I# N7 j- @
</tr>
5 P0 q# I( R A; ^4 b/ Y- n/ n, d/ x
<tr class="bgc">
9 i7 _' w# s' c. W+ t3 q/ m
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
0 G' b' ^1 J- V6 ~
</tr>
& p5 s" n3 P% o6 C
</table>
' |; ?4 w+ u! l+ B* _
</form>
" f4 k; i1 {0 W% N
<script language="javascript">
3 D: k0 M- E; w2 |2 {( a
//人名移动
+ O& Z9 G& F7 f7 L* k7 C: H) N
function move(fbox, tbox) {
. O7 V6 Y: e s4 ]
var arrfbox = new array();
, z9 n6 P- E7 @' N% |4 ?
var arrtbox = new array();
) z' @- @% F+ s+ d( v* K
var arrlookup = new array();
# E; M, z% D1 H$ {" r- Q3 l& ^; X
var i;
: y6 ]: Y! p. G* F' p; _$ o, I/ C0 { D
for (i = 0; i < tbox.options.length; i++) {
- [ d+ m/ H9 K# @. K( F
arrlookup[tbox.options
.text] = tbox.options
.value;
v* l* a: w3 J; x. M
arrtbox
= tbox.options
.text;
* L9 i4 g4 B' n6 I9 E6 {
}
2 r5 f9 l) E3 d/ d9 u# a- w5 o
var flength = 0;
, ?( P: j2 b0 i4 [3 h
var tlength = arrtbox.length;
! b! H6 ~! U6 p/ G% e0 `4 ]. }
for(i = 0; i < fbox.options.length; i++) {
4 s% g2 T5 {# u; ?
arrlookup[fbox.options
.text] = fbox.options
.value;
6 \7 i5 X& l( S: K# f
if (fbox.options
.selected && fbox.options
.value != "") {
. ]# E1 A6 { y( C$ K0 S8 [
arrtbox[tlength] = fbox.options
.text;
8 Q3 D- S9 J% F9 K6 S# d) _; O
tlength++;
, R' p- n$ A4 m, @3 c
}
; o H$ ?5 p* {
else {
, M& T# `5 I: y8 M) \* N" m( S5 ^
arrfbox[flength] = fbox.options
.text;
# p1 ~* I0 z, r# @
flength++;
( h1 {3 m2 {% v' s5 k' N
}
( E+ c7 Q3 v$ Y5 Z
}
/ E8 X8 T) @* \0 g) G9 H$ [4 I
arrfbox.sort();
5 j C+ `7 t0 B& _8 ^6 H( K/ k
arrtbox.sort();
, T1 U6 B( G1 ^
% @" I! P! O: n8 @/ [ G# @/ h- Y
fbox.length = 0;
. P- o% @$ s% h* X
tbox.length = 0;
' A( t) ^( z8 \! d
var c;
& R7 T6 w# x `; v7 S$ }0 _
for(c = 0; c < arrfbox.length; c++) {
E% R6 j& @% J A- u
var no = new option();
" r9 Y+ ~1 G6 t- h* K9 w
no.value = arrlookup[arrfbox[c]];
* |0 f1 f8 d! Y1 z4 n
no.text = arrfbox[c];
# P1 G2 V# O3 ^ F# j: g
fbox[c] = no;
& \* S1 \: m( u7 C" A4 l
}
2 M) w2 [; E; w
for(c = 0; c < arrtbox.length; c++) {
: [: B/ ]9 V- V. c
var no = new option();
1 e6 F, m, L2 Z# l$ v
no.value = arrlookup[arrtbox[c]];
8 ~2 W9 i$ ?( y6 R
no.text = arrtbox[c];
9 E# u9 U0 N, m* s/ t# ^: F. f, s: r
tbox[c] = no;
) G+ B9 m3 y+ K) d
}
9 n7 R7 T, W1 I9 }
}
. w4 Q9 S3 j! r) g) l* S" }& ?+ V
</script>
4 l: D& V" O- E. d- g3 s; c0 y% r
</body>
8 O1 p) p# E/ X% e. V! y
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
