标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
+ D" L% j. s9 q: K
c pageencoding="gb2312"
" e) E: f' {" l1 ^( z/ V/ z
%>
/ ~' r/ I+ \6 |' U
<style>
0 v W- U- {9 r9 Q7 b: x' S3 ]
.f9{ font-size:9pt; }
+ D# N' I( _6 {: S- p" H+ u* a' [
.bgc{ background-color:#aecaf9; color: #0033ff }
- ?; G7 F; T8 z3 R3 {
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
6 p5 Z2 G8 e- Y4 D, o
border-bottom: solid 1px #4e7dc1;
4 h |9 H2 `1 Z* K; ^
border-left: solid 1px #aecaf9;
4 _: A; K0 P: Z% u3 E
border-right: solid 1px #5679bd;
4 ]0 T7 q9 r& h. M
padding:1px;
" Q9 A4 l/ F# W2 U! s! ^
margin:0px;}
' i/ G# D& ?# g- X
</style>
% \( Y4 ^7 Z7 J: C- L
<script language="javascript">
6 a; _; m$ V) \8 V7 i
<!--
% Q; Q) M3 r3 e) M+ S: w
function rv()
; N5 f! Y7 ~, O! c! C
{
3 J8 A# \) c9 Z& z/ R; B0 b
var val="";
6 E* b: I. \/ @ ?0 `
for(i=0;i<combo_box.list2.length;i++){
; N4 N+ m! c8 t
val+=","+combo_box.list2
.value;
2 }3 d) O2 X" n& _1 K
}
8 k6 r4 s/ b, \2 q( w0 j
if(val.charat(0)==","){
' C: C$ K' v% b2 o2 B$ o0 F
val=val.substr(1,val.length);
6 h2 L; |. L% c5 X
}
3 z& B& n* ^9 i$ L1 i: ^
opener.form1.frecname.value=val;
1 j% r3 F& m2 O/ ? |, v
self.close();
( r3 x4 e' m/ m, n0 D- c: w
}
$ H7 u) ` S2 L% G+ v- h2 t
//-->
) I4 |& U! G- W9 h6 v" o: B) B
</script>
# P+ ^$ i- I2 F
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
3 Z) r7 g. Q( \0 N
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
* b/ q9 |3 l5 C" F% {8 E
<%
' k- r# h& }9 X, k; J6 X7 t
cdatasource ds=new cdatasource(); //数据联结bean实例
: u' n- E7 p0 [* e
java.sql.connection conn=ds.getconnection();
# F0 A4 Y) Y. f B/ t2 \; |
java.sql.statement stmt=null;
. ]/ Y; _7 U3 t! B' J U
java.sql.resultset rs=null;
' Z% I! |) ?* T% w
cdatacheck dc=new cdatacheck();
; _1 Y% J5 F6 r0 x7 N, r( B
%>
0 B' r! A1 W6 z
<%
, O* ^0 r# `2 \
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";
+ S; v3 C8 \/ s
stmt=conn.createstatement();
: g% ]3 K- m/ Q0 d0 b# g
rs=stmt.executequery(sqlu);
; G4 \/ p. `" E' M+ @% P
%>
7 o! a/ }# g5 w" s& V: J9 Y: {. V
<script language='javascript'>
6 \* H9 ]) o9 m6 n l }& O
arr = new array();
( u+ K9 z, _ o0 M
<% int temp=0;
5 f: `! g: c" D$ e; X
while(rs.next())
0 a& U4 L% x! @/ M/ c g, ^
{
( Q" n% s# V' w3 ^6 ^' W% H
%>
; s/ N4 u$ F5 R1 P, n
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
5 e/ e( ~" U9 g- k! h; h% ?
<%
. N1 f( D; w: z" @6 x
temp = temp + 1;
* `9 q0 s" _3 W' H. x5 b; A. c$ ^
}
@* x# @5 @% M% {, | g
%>
8 R' F6 w5 ?/ R
temp=<%=temp%>;
& G: R' P. G# g2 X+ p5 ^: v
function changelocation(id){
4 `4 |- y) C% W4 K1 _# O
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
% G- ]4 T' G" k- ]# }# G
var i = 0;
/ ?) q: |' z7 E1 w% {
document.combo_box.city.options[0]=new option('-------','');
. W: Z6 ?" v4 G% `1 E
for(i=0;i<temp;i++){
2 c u# |3 g! N5 k' d" J) Z" J) j
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
j9 l" `" s* m& L9 b/ \- [
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
" W2 b' {* y, c0 I) }! h
}
4 ^, {% ?7 d% k4 X& n" f
}
4 g @3 s1 A @' Q" d3 n
}
3 F3 s, H0 C8 Y1 N
</script>
( M" @$ w6 W5 @
; g# a" `- L1 S' p7 o2 x0 g
<form name="combo_box">
, F; T* s: c2 r# }8 g
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
* g/ v' x3 _+ X- z% G" k% K
<tr height="24">
+ W( J" e8 q& X' B) t
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
+ Z" o3 Y" L" |$ y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
2 \- E6 q1 e- U) g* h
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
: g* F$ B; E7 Z2 U3 e$ i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
X4 ]$ [$ k+ H) v& s+ i9 D
</tr>
3 j9 C: P$ M0 x" _) w
<tr>
4 G, i" j; t6 d+ \
<td>
7 P, Y+ }4 j5 t6 E j
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
: h) c, Q: O$ a! c! ?
<option value="0">请选择部门 ---></option>
% K+ B. [. |9 y
<%
% S5 [, g# D0 I5 C0 j
string sqld="select * from tdept";
, r" i4 i3 d L7 c2 Q5 l
stmt=conn.createstatement();
3 \) Z* ]! a! g5 C- i! c' g$ j
rs=stmt.executequery(sqld);
( X$ A& h/ S+ Q+ W" d6 U
while(rs.next())
. Y7 a" A8 L' U% g
{
5 q h- ^: E/ p% A+ ]/ a, z
%>
+ X7 N9 i! n" a2 ~$ I8 P0 T |
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
6 \) D) p1 l- {
<%
6 z2 P4 ^+ h$ {
}
% V0 z. L" N, G+ O7 X+ m
%>
9 k& `) I5 J2 }7 C
</select>
+ v: C) g! D) e( w. d. d. J
</td>
* G3 i% {$ ^: b- z
<td>
: c9 _8 L$ f& A0 j- U0 H G, c
<select multiple id=city style="width:150;height:200" class="bgc">
$ e; T+ O! R$ P3 ]6 {( ?
</select>
% m" h1 N6 }% I' r$ ~" G! V
</td>
* M3 u0 `/ k2 Y5 i% x+ ]/ \, @/ U
<td nowrap align="center" class="bgc">
3 ^3 |$ B# i, Q! O4 ^
<input type="button" value="<<" class="buttons">
- p$ h7 ]4 P5 ~ A
<input type="button" value=">>" class="buttons">
0 i9 c( l. @5 K9 N: A5 S, M2 K
</td>
5 v: R0 }' ~, y; j' L
<td>
! X; C F; x4 e
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
- o0 F% S" V, P; {
</select>
8 W6 R: P8 \ L& l1 n, D% U0 H0 t
</td>
% |1 {4 B. U1 E" M$ |* {
</tr>
. k; l# \( p, G
<tr class="bgc">
- _7 k8 \0 W1 \! M
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
4 }0 U. O$ o8 F$ T e; O. {# T
</tr>
: K2 E) w7 Z4 {. V1 X( I1 Q
</table>
& l {; u9 ?$ u
</form>
: A- D" v+ V/ w- V9 [1 k
<script language="javascript">
1 X3 |, [- D. x$ f3 K0 U' _
//人名移动
2 @6 C K4 E( d7 v
function move(fbox, tbox) {
" t! f/ a1 a( v% A' E
var arrfbox = new array();
7 u4 O- I! J1 k" C
var arrtbox = new array();
4 ~& C1 w" g" R l6 u3 \
var arrlookup = new array();
$ [: g: `/ S+ p1 Z
var i;
* X7 m1 _" ] w5 Y+ s* Z
for (i = 0; i < tbox.options.length; i++) {
+ u5 R/ x8 k& p( d
arrlookup[tbox.options
.text] = tbox.options
.value;
" A' }* i: Y+ L3 c0 S5 _4 _3 Z+ b
arrtbox
= tbox.options
.text;
1 [6 m: r9 s* k) m+ U2 a
}
Q! m0 Q& J% F: X
var flength = 0;
) r5 e# _# I* y$ S1 Q2 @- u
var tlength = arrtbox.length;
2 \1 l5 T2 S# S8 X) l8 M
for(i = 0; i < fbox.options.length; i++) {
1 ~- ^+ Z+ I7 M" y
arrlookup[fbox.options
.text] = fbox.options
.value;
) C. F8 l+ A$ _' i& f3 m2 O
if (fbox.options
.selected && fbox.options
.value != "") {
2 l, ^8 [' G0 S! _
arrtbox[tlength] = fbox.options
.text;
" Q ?' d! _9 A$ b
tlength++;
, L7 N {( d! q- z r9 a
}
( {9 v; @ K6 k2 C
else {
& ?0 a1 q( _7 }; J1 S0 D8 \4 q* S
arrfbox[flength] = fbox.options
.text;
+ N/ l* ?" L7 L
flength++;
9 ?: r% _- O, P, G' r' a# O/ d
}
* }$ q/ A. D& B
}
; ], a n% ]' f: g* {2 ^9 Z. P
arrfbox.sort();
( _& k+ J4 }- S+ T6 P* h* R5 _
arrtbox.sort();
+ R. v# R, s8 M% l5 |( g
& }+ |% l& V+ ~# O
fbox.length = 0;
! ~) h$ j( @5 G1 Z- T8 M; e) G @
tbox.length = 0;
" A& g8 h; e2 @* j
var c;
# i' G, N9 g7 t2 y4 ^: L0 R) C
for(c = 0; c < arrfbox.length; c++) {
3 h) s7 S+ _: `; `" P/ }
var no = new option();
# n6 m, V- |% s0 }" i* y# H
no.value = arrlookup[arrfbox[c]];
$ `, Z7 p& A4 E9 ?: R
no.text = arrfbox[c];
: X, }2 ?# A9 F" q8 m
fbox[c] = no;
- s; t. ~0 `( h. K* H: L
}
* o' H5 ^% x4 |) L3 M0 a' }6 {: X6 M
for(c = 0; c < arrtbox.length; c++) {
, K9 F& y* {, e
var no = new option();
/ P$ R1 o: o+ ~7 y+ j3 E8 f* B
no.value = arrlookup[arrtbox[c]];
9 [' e0 D$ Y* ]- I+ m; @8 w. L& \
no.text = arrtbox[c];
8 _4 S4 L# [! Q Y8 d% F9 t4 C6 f
tbox[c] = no;
) Y: M$ u" \1 U% [$ {
}
! ], T/ r9 a+ O7 I1 r
}
/ E4 \; R0 \: X o: {! C+ o
</script>
( m$ P$ ?9 n" O. c1 w) T
</body>
$ w( q2 Q; b" R# H
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
