标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
3 y& Z. s4 Q- O
c pageencoding="gb2312"
* ~+ O* `4 {7 ~7 R) S/ f, }' y0 w
%>
; E* l+ S- I" Y- A( Z6 B: `
<style>
) q5 G4 l6 y! r% ~
.f9{ font-size:9pt; }
& }" o5 V5 V9 { U4 x6 I) h
.bgc{ background-color:#aecaf9; color: #0033ff }
$ ~/ g: G5 g( \+ D% A8 z
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 H( S5 r5 E. \) M0 n
border-bottom: solid 1px #4e7dc1;
# v8 ^( |$ M# a% |, M/ V. e
border-left: solid 1px #aecaf9;
6 H+ K& m& H0 U) e' S0 W, _2 b7 S
border-right: solid 1px #5679bd;
+ b8 O7 ]' b. J" c2 j
padding:1px;
' z1 V- M# J! F" I- \' m5 {$ _: s
margin:0px;}
" h5 d) W( B3 g9 a
</style>
% o8 I7 ]1 }" V' x9 @
<script language="javascript">
5 q9 v1 u2 g" [: \
<!--
$ f1 h% G3 F! d, o( N
function rv()
& s) h2 J+ g0 M( u; h! m
{
: ~: P% o6 a7 F: Z
var val="";
. q' h+ V5 N' X2 A. r
for(i=0;i<combo_box.list2.length;i++){
, m( e7 Z4 u% q+ L8 C- H
val+=","+combo_box.list2
.value;
4 p- h- K w7 d* l# A8 b1 u% \+ m) l
}
- |8 d8 l2 j& [. `
if(val.charat(0)==","){
) S2 F+ O' b) @0 C! u' r$ n: b Y, g
val=val.substr(1,val.length);
) t3 R5 a. _# W/ _ J; z
}
: t/ {. h P4 ^& E; t; j
opener.form1.frecname.value=val;
5 i$ I/ L5 q( w4 E, o) L
self.close();
7 Y1 B. p3 L6 O8 t
}
7 h/ F7 }+ B' @# f
//-->
1 ^3 ~& Q5 r6 s+ Y6 _
</script>
4 Y/ M `7 U4 f; S! H4 A( d
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
/ G9 D# S7 w& w7 g4 m1 I
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
5 e, W9 ^( F* X. \# a1 F
<%
1 r; ]& h7 q" O
cdatasource ds=new cdatasource(); //数据联结bean实例
+ T" y \* z% J5 X5 \
java.sql.connection conn=ds.getconnection();
2 \/ _3 e, H) d, e n6 l
java.sql.statement stmt=null;
) s6 E1 ` C* \' d, c5 y0 p
java.sql.resultset rs=null;
2 z7 g+ K8 p# ~* b$ A
cdatacheck dc=new cdatacheck();
; N: e+ J0 i, O5 ]. _ X+ S
%>
/ J$ q* }2 r% A2 {( H* A
<%
1 q3 b8 C' [4 ?1 e5 F
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";
! _: w, I3 s# w. ^" h' D3 k
stmt=conn.createstatement();
: r: Z) v2 g# w6 {5 u$ g; s6 ~ l
rs=stmt.executequery(sqlu);
% n# [3 p4 ^* j8 b6 m$ s
%>
) O$ y( l3 ^2 w
<script language='javascript'>
# }8 z- A. ^: M ^3 p `
arr = new array();
5 ^$ ~, q( a- G0 \9 U
<% int temp=0;
t. x1 W: Z# n2 h; `! s1 ?
while(rs.next())
9 }* b+ @5 S5 j ~
{
4 O$ @" Z2 z) {! i7 H
%>
0 y/ @6 H% k# ]( {8 ]6 f
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
/ v/ U" m; x8 m
<%
. @! |! `& w( D, S6 J% H
temp = temp + 1;
# c) S, @8 G) @$ Z: T/ O! _
}
3 y+ h. C+ c q
%>
/ @4 H( g0 o: x6 ~ X4 e
temp=<%=temp%>;
: P: L* n5 o# e
function changelocation(id){
5 G- ^. O0 ]1 j! n; x7 V$ V
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
8 v: v' k/ g6 G: B, d( j5 |3 A
var i = 0;
9 t6 O0 K6 [& A
document.combo_box.city.options[0]=new option('-------','');
! u: F' |2 N# m, `3 x0 X8 b
for(i=0;i<temp;i++){
$ g. Z2 `/ t: [0 q$ G% B' i
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
8 Y& o# O" r5 g2 L. l8 _% g) ?, z
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
- A/ l- ~- c! d6 T" t4 Z4 C
}
: E3 O/ X& Z) Z' a
}
4 T- C( ~' J& J- l2 u6 R( ]
}
: V. Q/ g2 t3 ]; K3 ~ w" T* H
</script>
8 U0 U/ A5 x& {
& O T0 u+ \7 B9 O) m
<form name="combo_box">
+ \/ E+ A3 ~# ~
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
+ }/ e5 s& C, k% {% c) Z. p
<tr height="24">
/ z6 x, H. d- y/ C0 Y! A& ]
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
; X- E/ B N% Z, s5 y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
5 n. ]9 d# Z- \
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
/ p. f* Y% V( ^* v; u% E: S$ @
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
4 J+ b# s8 N, k4 W u c. q
</tr>
0 l8 z4 I; F8 T g# Z V7 D& Q' F( ^
<tr>
$ v# d6 Z, s- y/ u( u' j1 y' w4 e
<td>
h, D9 I( d" m' b7 x' ]* J
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
5 H5 T7 i5 P1 D1 H
<option value="0">请选择部门 ---></option>
3 F' ]1 Z) j6 r
<%
- J/ U S8 o7 T! ?* J3 j
string sqld="select * from tdept";
. F7 K" [, P+ u6 |$ w" I6 c
stmt=conn.createstatement();
; v8 m B7 |) C1 L5 a9 k; U) g
rs=stmt.executequery(sqld);
: q2 B5 C: R$ p/ b7 I% o
while(rs.next())
" |, K8 ]: b/ ?2 h) A# V' W3 T4 p
{
/ c% o' M5 k3 l. T+ @
%>
. u- B: Q6 u$ u
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
+ R8 ]7 N' h7 G) K: M
<%
* n4 F( Y- e8 S' }& n
}
( y; v, _ D2 p% i
%>
0 J6 ?# q* _2 v$ J1 @/ p
</select>
( p2 { a H& ~8 e/ y
</td>
& k+ [$ Q, c; i; x( \
<td>
3 J( X* ?7 Y: J. M4 V9 H, J+ R
<select multiple id=city style="width:150;height:200" class="bgc">
8 y# ?0 ?8 g; s$ M/ f+ B$ x8 X
</select>
. G. k! G0 g( G; ?2 m6 F* \
</td>
$ M+ K8 `8 l' ~; N9 ^
<td nowrap align="center" class="bgc">
" O7 k g7 x) j& H* ^) Q
<input type="button" value="<<" class="buttons">
( Q9 S! \* w7 N' c
<input type="button" value=">>" class="buttons">
* ]' B" Y( N+ R6 n2 ~
</td>
$ d, |' K! p+ r( _) V5 E( ^
<td>
5 u! f" [7 ^: S8 j, g
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
* L3 G. w% J% O* N
</select>
/ i: J9 c& [, v5 f& n
</td>
1 H; D! S$ Z) g. J2 H; @$ k- D# t
</tr>
" b0 c# h' u0 e+ B; q' s0 g' m
<tr class="bgc">
$ C" |7 P1 d$ J* G( F& g
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
" i, }4 j+ A3 c! X" H9 e9 |' { \
</tr>
4 M" f& [/ u5 r4 ~! q
</table>
7 g9 X- o9 w' U! E7 x8 @
</form>
/ H/ h) A% y* i- }4 a
<script language="javascript">
% L% \& R4 d1 O ?6 d, A
//人名移动
. K: r! `6 \5 W! k8 B
function move(fbox, tbox) {
9 p5 S# W* {$ A6 M
var arrfbox = new array();
7 t2 X2 @2 O$ e, f/ a V
var arrtbox = new array();
1 x/ t4 c5 `+ U+ U0 b, ~2 t
var arrlookup = new array();
; Q- L( a7 Y d3 q
var i;
7 x4 Y% ?# |, W) l
for (i = 0; i < tbox.options.length; i++) {
( E ]7 |/ ]; \8 F4 X$ e' f
arrlookup[tbox.options
.text] = tbox.options
.value;
" f' y1 _( ?" |% {, h4 Y. D+ e3 [
arrtbox
= tbox.options
.text;
* a5 G, q, w2 P/ p$ U
}
; Z1 I* e9 p; E5 [- Q9 g# z
var flength = 0;
) v( f0 d# h# J2 ]4 g8 m% B
var tlength = arrtbox.length;
3 H. G) u/ v# d D ^9 L0 K
for(i = 0; i < fbox.options.length; i++) {
* s' _ I a N- {: D! i
arrlookup[fbox.options
.text] = fbox.options
.value;
3 z6 H# L6 C7 t+ a- C1 j5 k
if (fbox.options
.selected && fbox.options
.value != "") {
* A! t" p$ H3 M8 y8 Y
arrtbox[tlength] = fbox.options
.text;
! k. o* [! ?5 g' v+ Q
tlength++;
0 @# i% b; \/ p# X1 G
}
" D3 Y) f- E, e D- j$ U+ f
else {
1 L. b4 l! T V: J# P" S6 N3 V
arrfbox[flength] = fbox.options
.text;
1 t1 B' i3 q v) C, V4 {8 Z' K5 }
flength++;
8 C% M1 @7 S4 Y0 X3 o; S6 x
}
- Y) v8 }* n) u: a* t% q# d( O
}
- m" c1 N6 f9 \) f" g9 a: s
arrfbox.sort();
# O6 b! S/ t+ y( ]
arrtbox.sort();
9 a* C1 b- J) D3 h; l2 Y' v
! P( |" R) W5 ~) y. j$ s4 K5 n
fbox.length = 0;
# w3 g, i' ~& ~9 S! V
tbox.length = 0;
+ j ~) \6 a7 r3 l8 k! s2 G3 ?& h: x p
var c;
b/ l L+ Q1 Q9 {: ?& S
for(c = 0; c < arrfbox.length; c++) {
9 f7 a. F) _! R J; L# r3 ?- G6 H
var no = new option();
% I! j0 [. P/ `0 {! U: U' ?/ L Y' T
no.value = arrlookup[arrfbox[c]];
e- D) y6 u; I$ W4 h# n- ~
no.text = arrfbox[c];
) R: U& q" Q0 J( c, L; a: B- ]
fbox[c] = no;
0 c' i7 \7 c4 Q9 J1 H
}
, b w+ D3 g5 `5 O) b K( Y
for(c = 0; c < arrtbox.length; c++) {
- D: C4 b+ |' I: W$ G! r
var no = new option();
+ `- n2 P) ]- @ E8 P
no.value = arrlookup[arrtbox[c]];
! P0 \6 V; E! ]
no.text = arrtbox[c];
& Z4 _ O0 @/ v4 F; ^5 S# N9 G, x
tbox[c] = no;
2 W7 `1 e0 S& b; M, Z- H! r
}
; X: J' G6 y% x2 g) G
}
" g) t$ i5 I& h; e
</script>
$ M7 ^( ?; G- c& h( j! Z
</body>
! B" `% Z: X+ q l% n5 f% e. q
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
