标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
# {! S4 }; \ o. Q6 w7 L
c pageencoding="gb2312"
( {* q, n% L3 w1 c# _& p% ~( W
%>
2 f* x2 @1 x- u
<style>
8 d" S% A) x" E
.f9{ font-size:9pt; }
8 H, F. ~7 S* Q7 d- |9 z: C f: D8 _, A
.bgc{ background-color:#aecaf9; color: #0033ff }
. o- `1 M4 ~$ e# o5 B; e, O s5 B9 ]
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
! U$ _$ A3 I1 T1 t
border-bottom: solid 1px #4e7dc1;
. ]: k+ I3 h; }' u
border-left: solid 1px #aecaf9;
0 M3 D- r$ r1 P. x4 h7 Q/ U' N
border-right: solid 1px #5679bd;
6 {+ v+ g! N. |1 g3 T1 L- [
padding:1px;
" L/ u4 f; q1 @8 @
margin:0px;}
, u& U' [; i' }! H; D1 M
</style>
( X+ T) t B: R
<script language="javascript">
7 R. n7 \( t0 P) Z' E1 {8 D! C
<!--
# |" i: T& _: `
function rv()
) @2 m9 x4 S0 R1 D
{
# m. x8 S9 I, y V3 `
var val="";
- m2 n, K& u0 C/ O% P# j- ^
for(i=0;i<combo_box.list2.length;i++){
1 U6 U" W7 u/ M1 e+ Z- K4 c- S& S& U. o
val+=","+combo_box.list2
.value;
* w$ j' D$ q* k/ E' o7 Y
}
" [' G8 N5 k: G u/ f
if(val.charat(0)==","){
* Q7 B7 N. F( t- }& l
val=val.substr(1,val.length);
1 u3 W! v% A+ a( F! `, R% C
}
. B" P" I9 S" B3 A. a% H0 T
opener.form1.frecname.value=val;
7 }7 |( D( [9 s" L* T7 L
self.close();
6 m; u4 I/ S, R- ^1 H) h; w
}
, q; W' }4 k3 e) M0 y8 Y
//-->
6 v5 c# A; h9 c) H* f
</script>
6 X( i0 N3 q' n* x
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 z8 L9 _( Y4 h$ {
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
0 d( [6 @% n+ b+ Z; E6 p9 e3 w) @
<%
4 J+ V/ z# a$ P* j2 y& l
cdatasource ds=new cdatasource(); //数据联结bean实例
1 Y/ Q, e% k) D) w
java.sql.connection conn=ds.getconnection();
. t8 o/ Z( y4 w6 o; B: G
java.sql.statement stmt=null;
s6 u9 l+ a1 J
java.sql.resultset rs=null;
! H/ h! A. E. e0 w: q1 [# w U
cdatacheck dc=new cdatacheck();
8 [5 m# t1 f# W( [
%>
$ q7 [6 Z7 Y+ P
<%
" V& j K! \$ o7 Q+ X
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 d- m, \- G) H& @) R4 X- m
stmt=conn.createstatement();
5 J Z2 L7 i# ^, z! R# e: T+ \- ^
rs=stmt.executequery(sqlu);
; B }, f9 I: @) \* a& r5 Q. e% [
%>
- I6 u4 [) `9 y( }$ t
<script language='javascript'>
) ^$ {4 k" J7 G0 I+ e
arr = new array();
( G7 y! j# p0 x! h1 a* ~
<% int temp=0;
9 Q$ t, E/ o$ s2 \, W
while(rs.next())
. t# A, @5 t/ Q5 w( \
{
) g/ a; O8 d# }0 W" y( W; H
%>
$ u Z2 G# a4 x/ i$ v
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
, e: s5 g1 P% U+ E
<%
3 d0 `; o; Q1 A8 U7 I
temp = temp + 1;
9 L/ [' c8 F" F C3 W4 h
}
) T7 I" x8 y' v- w4 `
%>
3 W5 i9 F+ O7 u: P' t8 Y' Y
temp=<%=temp%>;
1 z% h8 M/ ?4 r1 M5 ?
function changelocation(id){
* V3 I: g& \0 B, p5 X" D( y
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
) o- K, d* ]& V
var i = 0;
, A( }0 k4 W3 G9 m
document.combo_box.city.options[0]=new option('-------','');
6 _) P* Z, ]% R; e6 U' F- h# S% o
for(i=0;i<temp;i++){
7 A% t+ `6 g. o' L
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
# Y- E# p( }: y# A6 Z7 w* W
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
3 o7 F) m1 j5 u9 q( K3 P. s
}
. D1 G) s0 y% ?+ `. \
}
* z8 p1 }) N+ ~( A
}
7 I& `- W1 n& k: W9 J8 V/ V
</script>
, P4 Z; D& V; e/ F
: _% b* O5 P: ^% \+ t/ S o- s. }6 d
<form name="combo_box">
1 J, ^: _. ?/ ]8 ~! ?
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
# X) A u! E3 q1 u& g
<tr height="24">
/ s; g/ h2 d+ N, U! c* I& I" v$ Z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 R0 {* n, s4 A/ [
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
% s/ O5 L7 M7 n, M
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
4 N( d" L _/ X& c+ X9 P
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
" ^- v1 c' N& w _/ b, A
</tr>
3 z {- M8 }0 J* D% R l9 k
<tr>
# Z* ?- Y) ]6 X6 s4 O4 z$ m
<td>
6 ?% [* W6 s, I+ Z+ w9 g
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
' z9 X; \" u* J% J M. J' c
<option value="0">请选择部门 ---></option>
! c3 d% f) d0 }
<%
4 a' F2 w0 v. f" G
string sqld="select * from tdept";
# M1 F3 y4 y9 i9 T
stmt=conn.createstatement();
0 e' Y0 N4 c" ?4 W8 L
rs=stmt.executequery(sqld);
9 j% o% g4 Q: g0 c, {+ m, T$ D
while(rs.next())
/ |; ?& o' U, x6 r, f; V3 M1 W' Y8 ^
{
! ^" s1 Y) |0 a) a, _& Z
%>
" u' S; f5 H: r% _, H+ u
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
8 L9 x* {) g& K* c
<%
$ L/ `$ t) G' {) Y
}
6 a: B* U$ b0 C4 W: u
%>
4 i+ t7 w. o6 C
</select>
^' c" h3 ~0 G1 O# ~) z
</td>
- m* W3 F3 s, @* f, A0 I+ q) z
<td>
; h |4 @$ T4 A `1 p9 y
<select multiple id=city style="width:150;height:200" class="bgc">
' _% @) ]0 X+ v! q
</select>
2 |( m. s7 R0 l0 K$ Y7 W( v
</td>
# I! D& h& a( i: w
<td nowrap align="center" class="bgc">
D+ \* n& @# a# i' b) m: _
<input type="button" value="<<" class="buttons">
& I6 g9 C1 {* b
<input type="button" value=">>" class="buttons">
7 {8 ~! s- Z9 i1 g# y- r
</td>
' `# h: G* q6 S1 i, H
<td>
% z2 A+ t! C, R0 v7 _0 x+ y
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
2 G# i6 Y3 l) D% O' q; B" B' x, u
</select>
7 ?! f% E. g) D" r& z% w1 ^6 V( `
</td>
5 i6 F( F- z! z5 z3 R
</tr>
; W& Q2 Z" u& O4 E
<tr class="bgc">
% F. C% G( g& v( O* e* ^5 }, `0 j
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
3 @2 h4 @: M5 l6 O! r
</tr>
m4 D8 [( V; B* t7 P
</table>
& B6 |& x' _" N7 W5 v+ J
</form>
' B2 ~3 C- Z$ q9 X; p
<script language="javascript">
+ M5 y6 j e8 h8 P5 U
//人名移动
v2 K2 q$ W+ y7 X- f' E
function move(fbox, tbox) {
/ L5 [' O' C r+ o$ S
var arrfbox = new array();
- O1 ^1 I( F. N" l! v! A* x
var arrtbox = new array();
' s& S/ ]1 z% ~) \
var arrlookup = new array();
+ l8 ?4 o, v6 Q; O3 l) [ K
var i;
8 r) z: X9 N. F4 w) x
for (i = 0; i < tbox.options.length; i++) {
( e4 z" W- K8 y6 t O3 P
arrlookup[tbox.options
.text] = tbox.options
.value;
( B& O& {3 i. x, ~- E
arrtbox
= tbox.options
.text;
: x0 ]0 \+ t7 Q* F% s+ y6 d
}
2 p: Q; o. p4 t% `, J$ s
var flength = 0;
: ?: P4 m1 T& ^2 W
var tlength = arrtbox.length;
3 l4 _/ b7 }+ _* Z2 R
for(i = 0; i < fbox.options.length; i++) {
: E8 |' V% A+ }0 d9 l" _
arrlookup[fbox.options
.text] = fbox.options
.value;
; D6 i% l0 L8 x8 _
if (fbox.options
.selected && fbox.options
.value != "") {
7 M3 s; m. h. `) N# z. ~9 W1 j" ]
arrtbox[tlength] = fbox.options
.text;
1 |2 j+ R5 O5 K' I! U
tlength++;
( e+ ?& @0 ?5 J7 c2 A2 R
}
; o. ~- p3 O/ g% V5 m( z8 P
else {
/ F7 \$ W3 g$ {( `' ]
arrfbox[flength] = fbox.options
.text;
- a2 S I4 d3 Q3 [5 [) D1 [' O4 j
flength++;
6 F# G4 c4 N V% E/ s9 F
}
- W* w+ M$ y" P2 u: x- O# X$ X5 s
}
t; r+ R, u7 V; k# g: W
arrfbox.sort();
6 V9 N/ b! ]' ]6 |
arrtbox.sort();
' X" r( z0 H D/ o- J+ U" r( h
( H5 y, g7 X4 [8 f8 L) ?9 a
fbox.length = 0;
3 z: Y! `; V+ q! G9 m) D5 ?0 S
tbox.length = 0;
1 U- W T, ^9 Z3 ^# f1 a
var c;
h" R; I' c; h/ f/ g
for(c = 0; c < arrfbox.length; c++) {
; m) R" x* l5 g% a, A. F. U4 L
var no = new option();
( ?% \1 e' U7 T0 g
no.value = arrlookup[arrfbox[c]];
! k( D& D J- }& i5 Q J
no.text = arrfbox[c];
! r' a; \) M8 ?/ n: r$ A5 H% ^
fbox[c] = no;
5 ?& w; F7 f2 D, R# o
}
& E6 w1 e3 h1 A! }0 `- B7 [% B& j
for(c = 0; c < arrtbox.length; c++) {
. L8 _4 H! r+ w
var no = new option();
" k. O: K u% h
no.value = arrlookup[arrtbox[c]];
- ?! V3 c% W; n& I b+ l
no.text = arrtbox[c];
, N0 x A2 h: }7 C( p& X
tbox[c] = no;
' B( [1 e6 y) S
}
- O N+ s+ [& }: `3 T+ E3 ~
}
a: ?" d* p: n% S- { J
</script>
# z- i! T+ J! |9 O6 U
</body>
0 E+ n; T" ^# F. @) y9 o8 P/ B. Q" M
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
