标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
$ X8 v* @( |5 ]6 D, I
c pageencoding="gb2312"
4 w' l" x7 W% c$ ~- M
%>
9 V. F5 P. ~$ T
<style>
& F4 C; ]% g7 L G
.f9{ font-size:9pt; }
1 w+ K% h/ W5 `& j! P- \9 b, w8 v
.bgc{ background-color:#aecaf9; color: #0033ff }
4 l/ ]% ]5 y) B( a" F- [, q
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
+ e {: ^9 J/ r1 z' l0 E
border-bottom: solid 1px #4e7dc1;
. k; y5 v. Q: }1 o. }9 T a( [9 B
border-left: solid 1px #aecaf9;
2 N- j0 [4 U1 S4 k; T7 x$ B
border-right: solid 1px #5679bd;
* T |6 q! U2 i& @2 S. r% F
padding:1px;
4 y, R# C6 e/ O1 `6 G/ y
margin:0px;}
, D- c. X" a4 X; _
</style>
9 l$ q @$ s1 c+ ?" K. g
<script language="javascript">
& \ q+ i- Q% N. K% M) G$ `
<!--
! m2 r, O3 K4 Q; W8 i+ t' [
function rv()
- M' H, A9 ]- ^# U
{
% [. i) Z" P- |* q9 j6 }
var val="";
& ~5 F7 n( t! w) A1 p' b: c
for(i=0;i<combo_box.list2.length;i++){
0 S. V4 ^% ^. `8 q- B2 X) |1 c
val+=","+combo_box.list2
.value;
Y/ l& W2 {4 @$ @. {' I
}
* p, [& ~7 z( H& z4 b
if(val.charat(0)==","){
9 f% |* B# X4 d
val=val.substr(1,val.length);
$ c8 E. G$ s H" T; }
}
0 `# }' @ @4 G, l
opener.form1.frecname.value=val;
+ `! _3 n2 T# g! d+ w
self.close();
+ E% j4 X) {5 |6 b. p/ S
}
; {3 {1 E% C# ~1 D
//-->
8 p5 p+ ]! l) b0 e
</script>
1 R; z' u& q2 w- I: D- [0 a
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
* L& |+ _: c0 Q8 D4 Q1 q& X
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
6 n, j+ \( J2 v. u/ o2 ?
<%
9 U; T4 v3 y) g$ W/ p- ~- y( \* e/ E% l! Y
cdatasource ds=new cdatasource(); //数据联结bean实例
: n {( `" y/ h
java.sql.connection conn=ds.getconnection();
/ V7 C+ P: N; d, B, k( k
java.sql.statement stmt=null;
$ ?& s; y* d, M! }
java.sql.resultset rs=null;
7 S- g0 |: a v" t) g
cdatacheck dc=new cdatacheck();
4 k3 Z/ M' p2 k2 h# d
%>
7 l0 o2 n6 H$ B2 i( m2 L
<%
- f6 y- j" f# c
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";
7 m& {0 }! e* L& D6 w
stmt=conn.createstatement();
1 {% u" |% F( r* e6 b
rs=stmt.executequery(sqlu);
; s& C0 P4 l6 S/ D# y1 }" P0 B
%>
7 N, G5 S: g$ T+ M6 r
<script language='javascript'>
- f- G: K4 ?7 K* h7 @5 L: l" I
arr = new array();
6 c4 [1 ?+ |& l% C2 b
<% int temp=0;
) {5 T x9 Q0 G1 C
while(rs.next())
$ _+ V/ N' D: z- J: K0 a1 C' O
{
0 c+ B& p8 R8 g1 l3 C- u4 J% i
%>
# w! k+ Q! {& }; H* C3 j
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
# H1 k. E5 X) c
<%
) t+ P% G& P+ f; Q4 D& t
temp = temp + 1;
5 l4 b. D; d- Z- P3 z) G
}
4 Y& P) A4 _" s+ C& L
%>
! c: e0 @* o9 h! q: o
temp=<%=temp%>;
j. p) l, m9 ~' J
function changelocation(id){
3 w! j: U) ?7 `* V/ M
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
; S0 P p$ P. E9 P3 U* \
var i = 0;
3 n; W9 a! \6 ^$ B& Z$ {. J: J
document.combo_box.city.options[0]=new option('-------','');
* f5 M, f0 d; [2 h( F
for(i=0;i<temp;i++){
! n$ @: J7 g1 ]2 q* X' b
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
% c. D1 S0 F$ J" u6 U$ M
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
3 ]( f: c$ G8 \! m0 U
}
6 X6 C* Z& f; Y0 d+ R* E, V8 U/ ~
}
7 T1 ?8 ^) E1 v F. [
}
& F1 J% G6 u2 R
</script>
2 ?' g. W) t* _4 L% u
+ Q* r' z' {3 o. e9 p3 O& n$ ]' ?
<form name="combo_box">
! y/ ~4 {9 s- Q3 }/ i! N+ a% k: f* J
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' J9 B O6 o/ r% `0 E
<tr height="24">
; S& }7 Y; Y( [. n! ?
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
: w6 c, X& K& c% }! P# o7 ]
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
0 i1 q6 ~# _- R" ~, M
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
# z8 [, A* n" G: G! h
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
' a1 A9 {2 P' ~4 M7 z
</tr>
8 ~" x. r2 M) S
<tr>
! ?/ i# {$ k* l4 ?
<td>
- V; g5 H& D) x- S
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
8 T/ E% h: f# ?
<option value="0">请选择部门 ---></option>
% m- T1 w+ w) a3 Y9 Q4 ~: j
<%
- N! X+ ]' u3 f+ N; ?0 c5 _3 [
string sqld="select * from tdept";
% t! ]. M% m8 `
stmt=conn.createstatement();
! M9 W, o! x( [# ^" g; M, D. ]
rs=stmt.executequery(sqld);
6 d6 j0 i8 m0 K/ p& a( Q! K6 s" f0 q
while(rs.next())
8 |8 [8 A6 w/ g8 k
{
( f( M, D% ~+ K/ ~% n
%>
7 ~+ s7 v) \" t
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
% h9 w5 R# V0 ?, }* |
<%
# a6 k( D) z# `' E
}
j3 d! \% i' }7 w
%>
" n0 g/ j/ ]5 X! P+ @+ i7 V
</select>
3 P4 J- j) k2 \/ w
</td>
$ u2 W9 c4 V# z% z3 D
<td>
% K/ r- p2 j. G
<select multiple id=city style="width:150;height:200" class="bgc">
, R8 G* P& K# v
</select>
4 n0 v4 x3 |1 k; K3 A
</td>
, n( f5 v5 ]. ^1 g& G
<td nowrap align="center" class="bgc">
( d) b. ^; Z' f- l9 e& a! {
<input type="button" value="<<" class="buttons">
/ _6 L$ H. J+ w* @
<input type="button" value=">>" class="buttons">
+ H* b4 A! l6 ?$ v! B" Z, e2 m3 ^
</td>
& |" H! b( T( V
<td>
" @6 N& B8 X6 e) E
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
+ {' h, B7 K7 {& N
</select>
! {; s+ c* d* N( x
</td>
! _' G* w0 B( z
</tr>
7 Y+ p! Z5 D5 V, b( S
<tr class="bgc">
, d3 U) v4 [# }! _
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
) B4 r% h/ P6 }3 X! @
</tr>
9 n1 X# f- W. v7 k: D9 V# v
</table>
! ^; v2 e# U4 @
</form>
" D! I Z% U9 y* d& b9 g6 A
<script language="javascript">
; h' a5 [( F0 O# i
//人名移动
r; ^) L7 D6 n; D
function move(fbox, tbox) {
2 b$ {- T5 T, p) E
var arrfbox = new array();
* A; M3 |6 A- J6 l
var arrtbox = new array();
0 ^/ J6 Z- \* @' b8 S
var arrlookup = new array();
2 D$ p3 a, ^ _' p0 l0 W+ E
var i;
& x3 r" f; s3 b. T k6 ^! e( y4 C
for (i = 0; i < tbox.options.length; i++) {
8 q2 K7 d0 z7 q& }! ?3 t
arrlookup[tbox.options
.text] = tbox.options
.value;
0 \+ d' U8 k6 p3 `+ z4 i8 I1 G
arrtbox
= tbox.options
.text;
. k5 s$ \3 x+ P# q2 D
}
7 w# }4 J& ]' N! B( M# P
var flength = 0;
. C7 T* i6 w5 `1 V4 r; K
var tlength = arrtbox.length;
; H+ Z5 g1 N3 l" s0 C. C4 M
for(i = 0; i < fbox.options.length; i++) {
" `- e% ^5 _0 x
arrlookup[fbox.options
.text] = fbox.options
.value;
4 |. j2 ^* ]; n" T. ]
if (fbox.options
.selected && fbox.options
.value != "") {
4 Q1 j* t' X2 c. S h& d' ~" R
arrtbox[tlength] = fbox.options
.text;
! j$ r, {" N, ?( P2 s
tlength++;
# T7 i+ G6 z9 A" k4 R2 x1 t
}
5 r [- x" s$ Y# o
else {
" g* }% `" E+ _; A2 M E; J
arrfbox[flength] = fbox.options
.text;
. J; d: G1 g" C5 w' O( A' [2 ?
flength++;
6 e k$ I9 V9 v( ~
}
, y/ y+ g: W7 k# P ^3 n
}
; e+ c4 ?4 f. n+ q) d+ t {
arrfbox.sort();
( ]# }* c# E9 @4 B# q% ^* g
arrtbox.sort();
; U8 [! b/ h' B) o7 Y2 E
9 G9 i: [4 t' S4 N; \2 W
fbox.length = 0;
' \. o0 |5 B- g! w
tbox.length = 0;
1 A( m" d' F3 I6 m
var c;
6 Y% i! c1 i; o0 T" r1 b! t
for(c = 0; c < arrfbox.length; c++) {
0 r( n" c! H7 E
var no = new option();
$ `3 `8 F* S( L$ B
no.value = arrlookup[arrfbox[c]];
5 b7 ^4 `5 ~+ G, L. k
no.text = arrfbox[c];
% c; w' e. M6 j8 V1 C
fbox[c] = no;
9 C- k I3 F, s, l
}
9 Q- ]0 B9 _% G* ^
for(c = 0; c < arrtbox.length; c++) {
5 w3 R7 E& u1 K% k2 q8 H
var no = new option();
, t" E: d& O/ a5 ]
no.value = arrlookup[arrtbox[c]];
! k6 U7 ~ e8 x* A1 i) m Q, t
no.text = arrtbox[c];
% Y4 R* U! ]: r7 W
tbox[c] = no;
3 k9 r3 F$ t. _' \7 M% Q
}
- T8 u$ X9 X& [: @ b
}
, @6 {% O1 q ^! F
</script>
& s* l# D+ h* u }! [
</body>
! [! X: Q$ ^! e2 H7 A; g" F( n6 B
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
