标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
, |* }9 x1 O# y, i
c pageencoding="gb2312"
" h* Z( H o7 v0 Y5 k( ~( `7 Q& x( X3 t4 p
%>
2 @! i; g- s( h* A& ~, z; ]
<style>
# w9 o% h/ X6 ^) y& }: S% O; a
.f9{ font-size:9pt; }
$ p1 ?" p( w3 S
.bgc{ background-color:#aecaf9; color: #0033ff }
/ J0 _5 B. F! i, K" V6 o9 w& z
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
& G# E3 R0 I$ Z$ ?+ M9 ^5 a
border-bottom: solid 1px #4e7dc1;
4 }" ]9 S) M7 v) w' b \
border-left: solid 1px #aecaf9;
: M- ^* t, }9 X+ {6 o
border-right: solid 1px #5679bd;
( `2 X. ^* t' K: G
padding:1px;
0 ?' n2 O9 G. C) ~
margin:0px;}
" a+ t0 F% k: ~
</style>
! I3 x; T: j, N, V' r# F
<script language="javascript">
1 U) {( f4 |3 e0 U9 t6 P3 I: H- W
<!--
1 \; V3 P. q5 h1 P) {- p! X# q% O
function rv()
4 R( Z p# h1 c. }$ {) \6 q2 Q
{
( }& M& N6 M( }0 O1 Z4 v
var val="";
' e- a+ L7 K0 o* ]
for(i=0;i<combo_box.list2.length;i++){
) u) m4 Y! D, v1 _( ?
val+=","+combo_box.list2
.value;
" a/ B/ P, q3 K
}
& p6 [' D1 g N+ M! f
if(val.charat(0)==","){
2 ?: ^6 X& I, Y) ~+ ]1 y. J
val=val.substr(1,val.length);
- Y; C0 H! G1 L4 v5 u( \# R
}
& S* ^' s: o u8 E
opener.form1.frecname.value=val;
# l/ O8 V1 h2 K/ j: [: ~
self.close();
2 f2 M: X ?! e7 ?
}
. |' t' N. B4 R% }# S
//-->
9 }4 O! P7 k8 k3 {2 Z( X- C* Y9 ]
</script>
( H2 l$ O/ O" c3 d/ v2 f7 P- `
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
! N/ e3 I5 d3 M% Z! R, M2 M. F
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
5 w% {+ X x1 r5 V' I% @
<%
- j! @7 K q2 Z$ S/ J3 |
cdatasource ds=new cdatasource(); //数据联结bean实例
7 C; W2 P2 S- n0 u
java.sql.connection conn=ds.getconnection();
6 }; L+ @% `: b3 Z: i
java.sql.statement stmt=null;
Y8 o! L( X" R1 j2 C
java.sql.resultset rs=null;
, P/ P- \2 D( n, X% b: s/ J' [" N: c' O
cdatacheck dc=new cdatacheck();
' o1 ^( z; j' b3 h7 _1 p
%>
! G9 B5 H+ @$ y$ y, t& [, L
<%
4 j6 O4 @! m% c" A- s
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";
/ Q$ J* z a R# w6 d2 \
stmt=conn.createstatement();
) \) k8 `0 d2 l4 p% Z& q' B# S1 }
rs=stmt.executequery(sqlu);
+ U7 N& U+ x% l U( H+ y% s
%>
$ D" D Y1 G, Z, d) Y
<script language='javascript'>
: R8 |) D# U+ ^0 P: {. {3 E( d0 G
arr = new array();
( ^: H' X- w ^, ~$ N8 _4 O# N: X
<% int temp=0;
9 V5 Q4 U5 [' ^# w
while(rs.next())
) e6 J$ R8 u4 e; G8 I- I7 I8 b
{
' i* c* ^* [6 k! _6 M' F9 \( i
%>
' y; i" w" a% _( Y
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
3 O$ G) ^( o6 `; G% h
<%
j) _. e' C$ N; X5 ^
temp = temp + 1;
& h+ x# N" s) N7 z8 u
}
5 T n- v/ E Y0 B) G# p
%>
! P, t+ D# z+ [
temp=<%=temp%>;
9 H# {+ G ~" r6 \. N, B* _* R
function changelocation(id){
& R7 i$ r" d, g) o9 ^8 o
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
+ d/ i ` V8 M, v- f/ ]
var i = 0;
9 r1 }/ s! _& a
document.combo_box.city.options[0]=new option('-------','');
9 D3 p4 J: t( v; m, Z5 h
for(i=0;i<temp;i++){
6 S5 o0 ?( ^. F1 K! w) M2 r
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
" g+ [$ x( s6 ^1 m: k# ^
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
+ E7 E- _$ k0 O
}
# _ I" R/ ~- ~( Y1 g
}
4 N; K+ C, G" F, A; x
}
$ V& T6 T) H; C) i0 _; P7 C
</script>
- _6 ]+ U' o# B
" r! L1 `5 |, L% [% P6 d
<form name="combo_box">
% b# P0 u4 R; _: o l
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
6 S) M# z T! m& B) Z- n, n ]
<tr height="24">
- g! K3 z0 j; n" v6 ~; l2 h
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
1 I8 l, n( v& t: f; T, f4 c' I: j
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
+ K5 k1 @% H: P
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 f N! [' x8 O% h- J& [: P0 i# h
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
1 z z' v" x% x% R, m8 W( V
</tr>
6 U/ g x$ S# f. d6 I
<tr>
# I( I2 K. Z8 y2 j% |/ X
<td>
( x9 F0 ]/ q, I: I# d1 @1 |, ^
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
- I8 {9 F. M( P$ T0 }
<option value="0">请选择部门 ---></option>
9 r! y, K# p! v; D' k, U
<%
+ ]0 b Z, g; t1 z# C9 U* y& |
string sqld="select * from tdept";
/ h0 _' P4 e' o% }2 H* e$ X0 A
stmt=conn.createstatement();
# J- `8 U7 ~, G* T1 r9 `; K5 d
rs=stmt.executequery(sqld);
6 s9 i" T$ K, R% i: ?( f i
while(rs.next())
% V+ p6 V- e: X5 k# ^
{
6 K+ Z. K- e1 S
%>
/ T# p; V" }. j4 Z# a3 Q: i3 w% `% l
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
6 r: F5 a( Z) R% ]
<%
' ?. m) f# U1 h6 ?. k8 q
}
. Q: s0 @5 }6 Y& }6 H1 t8 r
%>
3 ? W9 A1 {5 f( j1 m; L# ? x
</select>
' p# }2 }# b6 T3 j8 d
</td>
+ j& Z# l# x. L7 ?
<td>
. L" w1 D/ e8 ]# D
<select multiple id=city style="width:150;height:200" class="bgc">
6 q2 I8 l& K7 n7 q5 x( q( W, W! x6 w7 J
</select>
4 }' G# }4 A8 \; F4 B, {3 R' o
</td>
4 k+ s( k9 T5 U7 D& G! L& ^, I6 h
<td nowrap align="center" class="bgc">
$ _ ~+ {3 N1 ]0 K, @$ J
<input type="button" value="<<" class="buttons">
8 `6 b2 l4 F7 j7 @
<input type="button" value=">>" class="buttons">
. n8 i5 B$ _4 r4 v0 _
</td>
# Z/ e1 F( s/ B1 w. E& [& K
<td>
* @6 l5 {: G$ f4 Y6 c
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
* W5 m% |6 v4 C# ^4 ]1 q1 N
</select>
6 ~. W5 g' A( ^ {( j( {2 K
</td>
2 _& ?7 d: N T0 V& s1 a* F+ P5 ^
</tr>
# t6 Q0 E" e1 K8 ? c
<tr class="bgc">
5 E+ l# p2 E8 G7 \% z
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
- J- K; O' {( N( C+ P
</tr>
/ o7 Q) f9 N+ d3 L9 x/ u
</table>
, K3 e0 q8 n b/ ~/ f, a
</form>
, a J) H4 T- r) m' z8 @' w" E
<script language="javascript">
) U5 Z1 z% e6 k* g* i3 c. ]- r
//人名移动
) A" Z6 w8 Y C2 M/ p a% ~
function move(fbox, tbox) {
4 j8 {" {4 m2 x3 U% i
var arrfbox = new array();
4 b# V, u/ k7 w/ f
var arrtbox = new array();
! b- E1 r+ o6 T |0 K- A) c- S
var arrlookup = new array();
0 x: j4 w. h k4 d$ a( K
var i;
; a% F7 {% r. D% B3 }
for (i = 0; i < tbox.options.length; i++) {
( V, i! s# }7 i& C/ d
arrlookup[tbox.options
.text] = tbox.options
.value;
- t( H9 u8 {2 \* ]$ ?
arrtbox
= tbox.options
.text;
: K( n% I5 ]/ {* k3 p3 q" ^3 |
}
; R+ C" R5 }0 _0 J$ |/ ^
var flength = 0;
/ ~4 e1 B7 k# s' H# d9 r" b" g
var tlength = arrtbox.length;
1 o1 K) j+ B: @7 P/ A W
for(i = 0; i < fbox.options.length; i++) {
% R7 ?+ ^7 m8 w, e( R! B& C
arrlookup[fbox.options
.text] = fbox.options
.value;
) |7 C3 }+ t$ c+ H) v2 P
if (fbox.options
.selected && fbox.options
.value != "") {
8 o2 N" i0 U/ a9 \/ i
arrtbox[tlength] = fbox.options
.text;
$ g* f; v6 A- { W, [) y
tlength++;
+ N% y# K" K" R- P U" }; v
}
& _- v+ R, P( h% ~ t$ c6 L: E" B
else {
9 U; p) Z2 i& v$ ~0 }2 s" ^) T
arrfbox[flength] = fbox.options
.text;
& I! K8 T% T% O& B: G
flength++;
% O3 y! o0 l7 K G+ ?$ H1 X
}
3 p1 ]. D, G) Q+ q, Q! X
}
6 C S5 S( `" P
arrfbox.sort();
8 W @' g+ a; u, _$ m" x
arrtbox.sort();
& R5 A1 B1 ?- R- Z
3 H" c! z, R& d) I1 `- [! v7 ?
fbox.length = 0;
* h" n- L2 k% b& q% H/ r
tbox.length = 0;
4 F& v$ o/ S9 ~% k7 o9 D
var c;
' b4 ]' w8 r. G" e6 \
for(c = 0; c < arrfbox.length; c++) {
9 b. D4 p/ O7 M! b
var no = new option();
; H. F3 D c# d
no.value = arrlookup[arrfbox[c]];
- c% s3 P" O' L1 c) D& ^# E
no.text = arrfbox[c];
9 w# f# D. u- t" U) p
fbox[c] = no;
& h1 z w3 L: e# ?) G S% m F
}
: G Y' x1 I% E1 N
for(c = 0; c < arrtbox.length; c++) {
4 c* v' b, z- d7 H
var no = new option();
5 w: z, P6 i! E- A0 c
no.value = arrlookup[arrtbox[c]];
, p8 x2 O% s8 i- H
no.text = arrtbox[c];
0 ]4 D9 O3 W' M/ O/ m( D
tbox[c] = no;
- A! C. l% \" {4 ?, @, L
}
- T9 i6 L( I* [9 g
}
1 c& N2 X6 `* A0 B# u( e0 B
</script>
( g2 D+ D' g! V2 s
</body>
u# D7 K7 m, d9 T( s, Z7 X+ }
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
