标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
( F9 q" W k' a6 Y* E9 O
c pageencoding="gb2312"
6 M/ w$ o" [2 S' ^, {. e5 o. T
%>
9 w6 V/ m% ?* k: l# j
<style>
+ @) T2 p8 l8 x8 ]# a! r2 ~; W
.f9{ font-size:9pt; }
( v9 v* l9 c& H) X2 t
.bgc{ background-color:#aecaf9; color: #0033ff }
+ j6 P" T9 j" Q: O
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
7 J/ y! j% J: j N N
border-bottom: solid 1px #4e7dc1;
$ U5 T2 Q* Y! T& E. ~
border-left: solid 1px #aecaf9;
6 m- d5 V% @' T8 E8 d9 x c5 {
border-right: solid 1px #5679bd;
, }7 t, T% G* [; x" V U
padding:1px;
( Y8 a$ b: i/ L4 C) ]9 W0 Z
margin:0px;}
# V) @3 z+ T/ H8 u/ c
</style>
. O& m5 F( V$ ?, O2 j7 z' S( l
<script language="javascript">
" T/ G0 E T. O9 q
<!--
- s; T/ s$ f; V. |+ Q% Y
function rv()
* _& z/ R* ?" l: O
{
( \. ]6 H p8 a+ h) L$ C
var val="";
7 s/ p, _! o) R5 s
for(i=0;i<combo_box.list2.length;i++){
- Q% N5 |, j$ ?$ }
val+=","+combo_box.list2
.value;
, H) b" z; n; _4 }
}
; F7 k8 l) }% `' I2 { J
if(val.charat(0)==","){
* K7 B$ g. C3 ^9 B) P/ a4 \/ _) Q
val=val.substr(1,val.length);
6 }, S! p, a# L$ x3 |+ t) y
}
' q: u- M# u5 a4 a( L! v
opener.form1.frecname.value=val;
5 A3 g' B9 v& T$ k" h; i0 k
self.close();
3 ~0 ]0 J- N/ U+ x/ ]* J
}
" k& g' G5 ~' R0 M G/ n5 ?5 G
//-->
4 O: R$ R3 N" S6 g: M7 y
</script>
) X5 m! p& J: f$ h/ M4 `8 |8 _
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
% ~6 w4 ^% w, x. Z( S5 Y9 l) s' J3 Q
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
" _) Y" D. F, a% W+ `
<%
4 ^2 L' ?" M8 O+ x5 f" x1 Z6 S
cdatasource ds=new cdatasource(); //数据联结bean实例
- W( @) M s. n2 O- x
java.sql.connection conn=ds.getconnection();
, m: `4 z7 J* P3 Z6 ?5 A) s
java.sql.statement stmt=null;
& A0 j% P( a. e5 E9 c/ b
java.sql.resultset rs=null;
c6 y6 \0 M5 q$ j9 e- m6 l
cdatacheck dc=new cdatacheck();
( H7 e( g2 n1 b4 s
%>
: m. P$ n4 J. F# q
<%
9 R1 M" z" Z) H6 ]- n: Y- m
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";
! T/ Y; q$ G: ^4 @
stmt=conn.createstatement();
# W1 i) X+ m) o% _
rs=stmt.executequery(sqlu);
% t/ n' H$ ?' \% N( U8 J& m4 d
%>
) w# W4 Q# ]. u* M( t
<script language='javascript'>
& l. s; @6 G# R
arr = new array();
! P7 `" r+ \! S7 B4 G) p; A
<% int temp=0;
' \0 O- j$ g6 b! {$ D
while(rs.next())
/ M% Q* J' w' R0 S' ^8 T& P5 _2 N
{
3 o0 H9 H& X" Z; V. S$ r! Y% X1 h
%>
; s, N4 X! L9 L# Q& J
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) U( S3 k2 E/ c. E/ P* ~
<%
1 B* s$ S" }9 ]: T
temp = temp + 1;
; V! Q: X* K* Q: O' l, r9 W! m/ E
}
- n) @0 U, d7 z# D+ e/ M9 z
%>
) q7 b) Q+ M) F1 Z
temp=<%=temp%>;
2 s1 A/ s' g+ c9 A; l
function changelocation(id){
5 E! R2 V8 _" O: K3 O
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
5 ` H0 ]$ r, m5 f3 f0 T: T% s% W
var i = 0;
. x. i5 b. r" i+ \9 C
document.combo_box.city.options[0]=new option('-------','');
$ T9 _2 U# W5 h6 X
for(i=0;i<temp;i++){
% _4 i% o6 u8 t0 s3 Y8 h6 O( V: B
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
! K7 F% T% p G, g# \1 C0 n" z
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
1 t6 ^/ Q* \. r6 T+ f- @2 G' r, T" c
}
: C9 K) }* G/ o" T& \2 d. ?$ u$ F
}
; s3 s+ }. R8 Z) |2 _1 c4 |
}
+ b2 u2 r! W/ f, \: d2 C
</script>
7 n3 i- |3 L" e" K, _
1 B& K5 k1 {5 K8 V7 L( E2 a
<form name="combo_box">
& ^5 i) d1 ~+ ~; ^
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
* b# w# f6 |$ z5 x1 \ e& l
<tr height="24">
( j/ u$ x8 P: I4 v0 g
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
' s6 T0 ]. Y* j2 l+ i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
5 ]6 f) i% y) k" E! r6 Z; O8 `1 J, {
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
& N' c9 ?7 L0 C2 {( H7 l' B
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
5 a; v+ ^5 H% w& i$ X- W
</tr>
4 e5 Z4 J. o& N: x7 k# L
<tr>
8 ?. I1 `; s+ O% A3 f0 Z) X ^
<td>
' Y+ L. \+ e/ \& O
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
' t" i5 @0 e9 C$ @ Y
<option value="0">请选择部门 ---></option>
% r/ {9 s8 _* V1 z( s# j/ z
<%
# B; I/ l/ [- U' J9 n4 ^/ h( t
string sqld="select * from tdept";
, z+ u( @( ~! X" _7 F5 \
stmt=conn.createstatement();
, p) y' c$ _& {1 t' m2 v
rs=stmt.executequery(sqld);
* o* r8 m* B& C7 ]$ a' Y- ^
while(rs.next())
) [; `/ W: K) ]
{
/ e+ {3 Y3 p6 h4 ~2 U
%>
2 l# M& I, ]6 |/ W2 H
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
% @ t2 {0 N+ B2 J( r& l
<%
1 F! b* C A4 c/ ~" s' ^
}
& f7 ]# n6 e4 _
%>
+ p& @4 q9 [$ w: t
</select>
) K M3 M/ _+ c# T' @
</td>
1 N6 O: g* [4 u8 H9 {6 v% y
<td>
5 `+ k$ W# x3 |- U* _8 K9 V: Z
<select multiple id=city style="width:150;height:200" class="bgc">
* P+ w" v. i3 L8 d. S$ p: z
</select>
4 J. _( H0 U+ r3 A. i) W5 E
</td>
; T. e+ `. r: ~% b/ |9 ^6 `) X8 X. G' l) ^
<td nowrap align="center" class="bgc">
4 f7 E7 `% ]+ _- p- z5 \, D
<input type="button" value="<<" class="buttons">
- q+ d! A1 G8 I" D( x" p0 @+ q
<input type="button" value=">>" class="buttons">
& u5 v0 }" v; Z& o+ `3 F+ Y k# k5 P
</td>
& m7 l* \ J# [5 }2 S
<td>
$ q6 P5 n+ N' B. \% a
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
/ u- s% ~' J- t3 c
</select>
7 T+ ?3 |4 i/ J
</td>
0 _: }+ p1 Q/ N6 N0 L, O) @. v$ r+ {
</tr>
1 z9 ^* q2 l+ ^/ R+ N5 A
<tr class="bgc">
' w- P2 Z2 J* r9 Z2 ^
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
: `1 T$ g7 E& s$ A
</tr>
' A5 x0 ^8 J5 M+ X N
</table>
$ W8 S' a/ h$ J. L( J
</form>
# |3 i; T6 f0 i
<script language="javascript">
. N( H5 U# H* Y- q
//人名移动
4 c, v& R' J9 ~) U8 f5 b7 d
function move(fbox, tbox) {
4 D: J0 A, D# g. `
var arrfbox = new array();
" M) g( j C8 J: R% J
var arrtbox = new array();
' Z8 u; H6 U& n- ^* c3 V* Y5 G4 y
var arrlookup = new array();
( } N6 a! H8 y4 Q* T6 V
var i;
$ r* }! c9 L' n3 I) F
for (i = 0; i < tbox.options.length; i++) {
& ~! Z3 j9 {% D5 T& H; o' s
arrlookup[tbox.options
.text] = tbox.options
.value;
0 \1 ]- d8 G- @# ?( [1 d
arrtbox
= tbox.options
.text;
% |. S: r) i9 F' t$ s( `
}
& Q3 E: }. z; Q6 Q0 [/ |- q
var flength = 0;
7 X. P" Z2 k( O" M* O: H
var tlength = arrtbox.length;
6 u1 t7 [" a R, l; \: {5 D% F* k8 t
for(i = 0; i < fbox.options.length; i++) {
7 p6 k w5 n, @! ]3 \
arrlookup[fbox.options
.text] = fbox.options
.value;
0 x! n, M; P8 t. n
if (fbox.options
.selected && fbox.options
.value != "") {
' ?6 _) W5 T7 D& p- b. ?" ?
arrtbox[tlength] = fbox.options
.text;
, N! J& w! s* | M3 G6 ]
tlength++;
) ]/ m3 P- `+ V
}
5 X1 J% G0 d- K& M
else {
1 C. }6 M2 c7 M( o/ ?' R9 C" _ ?7 i
arrfbox[flength] = fbox.options
.text;
+ V) x" z- r4 }! f k
flength++;
, Z5 G0 {0 G1 l: f! N8 U
}
. I, G; R% k7 ]. I9 f9 s% e- A
}
5 J* O/ R! C0 c- O! a
arrfbox.sort();
& i/ c/ B1 o) a% o Y
arrtbox.sort();
6 K, J ~2 K$ K* b
! ]- b; |0 p+ o6 L9 S8 J" s
fbox.length = 0;
% g; p, K G+ S a
tbox.length = 0;
8 p1 s" k M) h* L+ B
var c;
1 r* |1 a$ {$ ^: d3 x1 _% A& J
for(c = 0; c < arrfbox.length; c++) {
& b; G! Y/ v% v4 L Z$ L
var no = new option();
& B1 B1 O& e0 i& y% G( W7 ]: B
no.value = arrlookup[arrfbox[c]];
8 X7 V( _* p4 M# r# X. o
no.text = arrfbox[c];
8 Z; |. [3 J: Z9 z
fbox[c] = no;
- m: J7 v( E7 s. R8 |
}
# k& Y S ^' y/ j: w1 }: h
for(c = 0; c < arrtbox.length; c++) {
* U, \9 K4 n# m6 W# C# t# T
var no = new option();
" C6 J# r: q9 T7 K" P
no.value = arrlookup[arrtbox[c]];
6 @7 ?6 K) d2 ]/ q) m6 a4 K" _
no.text = arrtbox[c];
L* k& b: i6 d1 R9 j: B5 ]
tbox[c] = no;
: m! r* _! f! {! z* c r
}
. d- O: \5 h! y( D$ \
}
; z6 b% e( T9 f, I4 V) r
</script>
% q/ D5 }# H, P4 Q; ]
</body>
0 D- N. J% K. P w. e4 j% Y
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
