标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
3 I y! T9 K, m) ?- Q4 I: A! `
c pageencoding="gb2312"
. u0 e" p6 `6 B3 w8 m
%>
g# j+ H1 S9 A9 ~4 v2 Q
<style>
9 b' E* Q5 i: r
.f9{ font-size:9pt; }
3 R4 P, Y( @0 [! }$ i( B
.bgc{ background-color:#aecaf9; color: #0033ff }
3 o' u, Y* x) s7 G' y8 B9 J; ~
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
, |4 f4 J6 |6 g u
border-bottom: solid 1px #4e7dc1;
/ p! J8 U9 \) i, B) c
border-left: solid 1px #aecaf9;
9 F) M* Y q& b0 J
border-right: solid 1px #5679bd;
$ X1 D! n- P/ I& S8 n: D8 w
padding:1px;
' P/ M) ]' x2 o$ H _
margin:0px;}
) P: D4 c. Z$ B0 y* [! ]/ C, E0 }
</style>
0 z o2 |( y" b/ O) [. N
<script language="javascript">
! N* A; w) O, y6 k S/ D
<!--
- N* \& H' j( F3 I3 w) t% H) U+ m
function rv()
3 a- i4 Q0 w6 Q7 P' k" y
{
$ K5 V) K! j+ I; S* r! ~. u
var val="";
( E/ ?0 C! y) M0 @. D
for(i=0;i<combo_box.list2.length;i++){
% _! L' J$ p9 R) u! I
val+=","+combo_box.list2
.value;
% T$ y5 N. ~ d. o- F& |
}
; z3 J' W( m r5 y
if(val.charat(0)==","){
+ x, C& v5 K# X
val=val.substr(1,val.length);
, }' D( |4 W6 F& `$ g
}
$ K: n5 p6 ?0 v! }& G, ]' R
opener.form1.frecname.value=val;
% }) y5 p! X' M# B' O E/ Q
self.close();
8 N- _2 f, u* V5 H
}
5 F" ^ @8 I3 a( v' B6 T7 m
//-->
2 O) G- h* F8 P/ w2 O
</script>
5 E0 |& v7 [6 l- J/ J+ ?
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
. ^) B# s9 r2 i1 N! B. Z! m y& i* K
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
$ R( M. J+ N/ u# G
<%
! X6 j/ C- I" L! O2 G
cdatasource ds=new cdatasource(); //数据联结bean实例
3 G/ j3 M$ G' Y/ ~* y3 V9 G
java.sql.connection conn=ds.getconnection();
8 @( h( H+ o; J/ k8 y
java.sql.statement stmt=null;
3 M4 n% b6 H9 V# U, L- \
java.sql.resultset rs=null;
& s! L) G2 D2 ^; f
cdatacheck dc=new cdatacheck();
) B* o, q f* b/ y A
%>
5 u& Y. d3 F$ v* J$ s" S" ^5 m
<%
6 L6 \8 Z1 V1 ~! t0 v8 Y* H* `0 _
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";
3 D- E3 g" B) \# @+ {. H- F |- a
stmt=conn.createstatement();
+ H# r/ U0 W. `7 b$ @+ f! o
rs=stmt.executequery(sqlu);
6 I; l4 @& n) b1 i% w4 q
%>
8 B' U# o8 b0 v; x# I+ b' F- G
<script language='javascript'>
' p" z. V- _2 P5 ~2 G. {$ [9 ~- ?
arr = new array();
. H, [" W7 Y. T5 N% ~) ~; V1 z
<% int temp=0;
2 f; r3 M! B z) z! N9 w
while(rs.next())
$ M& r0 B0 }/ L. x% q
{
/ s5 [) [5 _: b+ [: p, O4 e3 _
%>
8 T- k% F) F& a" Y% t
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
$ P& J6 I2 n5 [* d \. }" m
<%
' U' V# R* ?3 d% f- ^
temp = temp + 1;
1 L' X+ O7 A y& ?( U, l0 Y K
}
! F" Q: b# ]6 ~2 h/ @: d) G
%>
. ^% I' Z' `+ Z! ?- `
temp=<%=temp%>;
% c' H: O$ I5 ^9 P6 j R, o
function changelocation(id){
6 W B5 U4 g6 V W: V3 p1 ~( E& }
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
5 ?, K/ f4 z& y! S, \
var i = 0;
. ^! j: w! }, T. l( x6 Z
document.combo_box.city.options[0]=new option('-------','');
, P; |; H2 v6 `3 O8 i
for(i=0;i<temp;i++){
' w' {, A- P0 x" Y# `# O9 |& O
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
- \5 }6 G6 L& d( \
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
. m, s0 i/ n7 g- @9 i6 u1 m H; N2 Q
}
% s3 Z5 }3 ^& k$ s8 ?
}
+ A( T7 {( D7 O! J( E _4 X5 m( j
}
& ^+ W+ t( [/ N3 f5 G2 }4 I' ?9 G
</script>
$ _8 W) }: J5 D% b" Z
# C, i0 w( Q5 T6 c# y, x1 }
<form name="combo_box">
, `; q: K! }$ Z7 M
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
. I% ?# a2 Q. J
<tr height="24">
" a, U5 f% p- H2 f; |. m# F) r
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
% x% ?$ G3 w9 ^8 N3 m
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
& C8 d6 V, _4 ?$ L5 z1 V6 w
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
7 t! v6 F7 d( _/ V5 A
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
4 C3 o% q( `; V7 Q! }( \( F
</tr>
9 f4 S8 ~% M" w& ?9 p+ }
<tr>
- f! R: v$ b+ L$ ^2 n
<td>
+ g# h7 c2 _( h0 v8 x
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
1 X" t8 B3 _4 F4 n! r u
<option value="0">请选择部门 ---></option>
" @! {" d5 y) Q$ k% d
<%
: i" N. g2 F1 f* D
string sqld="select * from tdept";
[3 h9 @4 s) B4 Q* m
stmt=conn.createstatement();
% N' J# M$ W! u5 h
rs=stmt.executequery(sqld);
! O0 X& Q3 g* t4 o7 t9 c& ~& o v. ~
while(rs.next())
6 v1 M- T8 C7 v- J1 {
{
4 d& }/ l+ l ^/ ]
%>
9 t: S. e& D! O0 i, I. C- {
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
* ^; e0 p: J. v0 N
<%
' U/ f1 d/ `% |# w; p2 `; ~2 Z! i
}
' t0 S5 V; W) f; v1 f* W8 h1 A
%>
7 c y) w( r8 L! n# f# y! |
</select>
, k, p' D' G0 \: a, I+ W0 Z
</td>
+ [; x4 d8 r$ X9 q- t
<td>
; n- D2 \6 |' K4 K2 ? ^
<select multiple id=city style="width:150;height:200" class="bgc">
* n1 {& d. P. N. E$ r( h& c; k
</select>
r7 N7 T* p* w' P
</td>
. s1 P% F+ R6 o, v) ^% v
<td nowrap align="center" class="bgc">
' k& j9 Z3 y, v/ l; g! n# \; A( Z
<input type="button" value="<<" class="buttons">
! d. t* E( u' L
<input type="button" value=">>" class="buttons">
2 p* G/ o- B$ u) b! Z
</td>
8 Z; P- Q6 |0 q7 v! {
<td>
6 d! Y9 A) e0 }% Z6 F1 C
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
& z9 _: T1 F' h" }& r: T
</select>
4 @ H8 A0 X" l- d/ H% `
</td>
2 L5 z4 N7 M+ ^" } X* {1 x
</tr>
1 c' l/ y2 e- \, n2 N- s
<tr class="bgc">
, e- ]% l- Z2 `. P' V
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
5 ]2 R$ t4 j& Z* X
</tr>
4 Q/ ]. c9 A; D. s
</table>
" Q8 Y8 g; k7 X% ]0 p! G6 k
</form>
" Y$ O9 e, C4 p# s( _# W( y
<script language="javascript">
; Q2 Z" e# A2 j( O0 w) x7 q2 |
//人名移动
e6 B1 H' `* p0 T
function move(fbox, tbox) {
) h I/ F- k+ a
var arrfbox = new array();
. i* J9 J- N+ ?; e& \* O+ D& {
var arrtbox = new array();
' S& w! A4 e" d9 G, y
var arrlookup = new array();
& F5 Y3 z1 ], o8 Q' _* X
var i;
4 f9 n( h Y! Q: {1 f6 N1 N! l
for (i = 0; i < tbox.options.length; i++) {
) p% a4 y, l- w: h+ D
arrlookup[tbox.options
.text] = tbox.options
.value;
; o8 E- H% _8 @- b3 \3 M( E
arrtbox
= tbox.options
.text;
7 g+ H, X# a5 T% l- ~% e! Z n
}
, C$ x! x! a- D2 K% ^
var flength = 0;
( H1 w2 m% t- H% w6 h
var tlength = arrtbox.length;
O Y j$ a! l u4 \7 F% H
for(i = 0; i < fbox.options.length; i++) {
1 y, x2 ~1 m+ m& p7 S1 a
arrlookup[fbox.options
.text] = fbox.options
.value;
% s2 T- S2 u( E; y6 A; Q0 `7 } j
if (fbox.options
.selected && fbox.options
.value != "") {
3 C( O7 `& Q3 k7 n5 u# o8 @( H# j
arrtbox[tlength] = fbox.options
.text;
7 F) V6 M. o9 F4 A/ q
tlength++;
7 I4 \( }% \1 n/ C& i2 l" Y
}
, P( c, j( o( ?6 x
else {
1 v9 o/ E0 Z$ X l3 H5 y3 q
arrfbox[flength] = fbox.options
.text;
* r7 [6 P O: m" R
flength++;
1 l/ H6 w' Q. l! o
}
4 _- N9 B a6 K8 E* ]
}
8 N E9 D5 b, i- \% N2 L# o, P, u3 P
arrfbox.sort();
; ~ `7 Y, P" @7 v1 T+ G
arrtbox.sort();
/ j0 }/ Q$ w6 c2 k& ~) k
7 l8 J* N$ _0 H; [0 h
fbox.length = 0;
5 v P; }- i( v$ O; W
tbox.length = 0;
- [# J' e. h( r6 \
var c;
) Y3 Z p. M* ^* r' c3 q
for(c = 0; c < arrfbox.length; c++) {
! ^- {2 o$ |" Z) W: \
var no = new option();
1 K; O6 A, x- O" }+ u4 I
no.value = arrlookup[arrfbox[c]];
# m( \5 s7 r9 f
no.text = arrfbox[c];
7 R6 l/ }* Z3 i! p# ^7 @
fbox[c] = no;
# }9 v9 D! Y: a* @$ V" }+ }) R
}
' e: i: F" H3 n/ j; ~
for(c = 0; c < arrtbox.length; c++) {
7 b7 F0 t# S$ |) v4 C o
var no = new option();
/ s2 h1 o; z9 k9 ~; ~- e
no.value = arrlookup[arrtbox[c]];
2 W8 h& ^ d$ [- e
no.text = arrtbox[c];
, ]- H% H% z, l9 A
tbox[c] = no;
@4 ?$ m- S' A* Y2 V
}
8 u2 @, Z( S& S! a2 m3 L; ]
}
* v- L7 |! o5 _5 e- z1 i& N
</script>
2 n, G* _: a' `% {. r
</body>
0 H5 o# P* h! T1 p: h5 [
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
