标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
7 w: i1 Y6 M/ e' A3 j5 Z S$ _
c pageencoding="gb2312"
; |0 A) n- s- `) S4 \
%>
- z" }+ ~) {! J9 ]* a$ r; e
<style>
3 v2 v0 d# l& A& R7 F9 g
.f9{ font-size:9pt; }
+ B: b! e. I* w) `
.bgc{ background-color:#aecaf9; color: #0033ff }
: x8 S- s9 \, k% O+ m7 L. `
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
! \* v2 C& n9 s' ?% D2 z& H
border-bottom: solid 1px #4e7dc1;
; O8 e6 p1 ~) K4 n
border-left: solid 1px #aecaf9;
]8 d, G, P {$ ]/ ^
border-right: solid 1px #5679bd;
" K1 ~0 i: r. y( s, b
padding:1px;
: ~! ~" x$ P2 r* ?3 p6 D9 \
margin:0px;}
5 X2 A) t+ u( x% T/ I
</style>
3 j& X. \( F' ~* ~& B/ a. g
<script language="javascript">
% l* [8 ], N, ]! Y
<!--
9 |- ]- j. C+ J4 r' N `7 z6 v
function rv()
. `8 `. D1 l( f
{
" G$ f1 _+ T0 B. ?; O5 r# _
var val="";
- q' w( ]" k: Y9 v' F
for(i=0;i<combo_box.list2.length;i++){
# |1 j$ B3 a! m$ u/ b3 P5 e# ` T
val+=","+combo_box.list2
.value;
W6 w( M i3 Z" p" D% N6 B
}
+ S% V' B' B( Q: h4 {! V; n
if(val.charat(0)==","){
% I2 b$ r$ L0 M. r0 V/ s0 h
val=val.substr(1,val.length);
0 J. w% o8 }% P$ @/ H
}
/ D$ G9 S# E. G9 n$ l6 u# x9 d
opener.form1.frecname.value=val;
: ^- I7 d6 G$ o2 p5 M+ I) x2 f: f
self.close();
( B$ z" Q' f* i& f* e
}
% [7 b; A2 ^( O! F
//-->
- e. {/ ~$ A& j$ W/ H4 s5 b
</script>
0 F1 ^2 y" P1 F4 r4 h! M
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
$ w2 k# j4 H3 h- ]. p1 Y
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
0 l2 j: P$ F8 J
<%
* s; ^, f4 ]. T q" `! b3 p1 _
cdatasource ds=new cdatasource(); //数据联结bean实例
+ e! P% @8 G% Z$ }2 X3 Z. g
java.sql.connection conn=ds.getconnection();
; x$ e4 t+ s; |; c% r3 j
java.sql.statement stmt=null;
# b+ R, p; c T: |
java.sql.resultset rs=null;
7 G* L3 r. ]; j% w
cdatacheck dc=new cdatacheck();
J7 s3 O( s+ v1 L4 @8 R* U
%>
9 a) B/ e; e0 j1 b
<%
3 h- {% c5 B; r- {$ _ 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";
' d, f Q- ?; t- p0 e/ u Q6 j
stmt=conn.createstatement();
2 F0 h0 z. U, }3 _. W% O: [
rs=stmt.executequery(sqlu);
3 e9 y7 z& \" h) l
%>
8 w4 U( c# p4 J1 o( Q
<script language='javascript'>
6 U- j. k+ h9 Q2 J( X) J1 E. M9 G, G3 t
arr = new array();
" K% B* D0 s: e% Q/ b$ ^
<% int temp=0;
' ]* a* n" }$ |, k
while(rs.next())
" [ W5 Z6 t. D x" _* N3 G
{
& n. U, E+ Y$ e/ y" i% X
%>
: N; j3 V$ n( f" [/ F9 q1 i
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
5 }' I, g1 q' {
<%
# J) z5 {4 D# ]! j' m
temp = temp + 1;
. r8 U; w+ s* X
}
7 S+ g* n4 u" Z
%>
& s) ~$ n% o7 {/ N
temp=<%=temp%>;
' x6 H4 s, X; g0 {6 \
function changelocation(id){
5 \1 J% ^/ ]4 c F: C% a8 [
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
, _0 z1 N6 |" ?2 ~ S9 \
var i = 0;
_- |9 j q3 A# r8 O
document.combo_box.city.options[0]=new option('-------','');
1 d! V: T2 y6 w- h6 |# u$ d- ]: \7 I. W' O
for(i=0;i<temp;i++){
' U+ a$ n. V) f1 z
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
) `! e+ j% |, w: z0 ~' W1 J
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
" d7 G/ r2 ~$ G6 x( @) s, n
}
- |( K; {7 {; g4 d. Y
}
- n9 H+ [3 G" j& r
}
- }( E( n" j5 g$ _: R0 k% Z- l
</script>
( X- p% m* a6 u; ?; {
* P# w9 p4 a$ p; J! r$ r" n
<form name="combo_box">
+ S% l1 s4 b% t! q+ N& B( ]
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
0 F b5 }5 {$ B6 N, y
<tr height="24">
. e# Y, p* ?! h/ ?% y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
& Y6 v! J. b' u. s$ _
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
% _0 q5 n7 C/ v) Q q
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
! ]; e/ W/ G& q( Q! g# S! i/ T3 \
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
, ]1 Z/ ]% Z# E" d- |
</tr>
. m# D9 }- c5 O4 l$ M6 ^
<tr>
: L: u& g% X# o, g& u- L9 a2 H
<td>
, u: u3 ]2 }' `" [5 I! f. F
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
2 w* a5 D8 X2 d1 b, x
<option value="0">请选择部门 ---></option>
# |6 @+ U% V: L: P. V
<%
\( [/ P. v! x# A. A: L s/ R* U
string sqld="select * from tdept";
9 a/ A, A" G/ P( N2 m
stmt=conn.createstatement();
8 E: T: i7 h1 p% c
rs=stmt.executequery(sqld);
$ }% D2 K& @. d. A
while(rs.next())
: _& `2 E, t0 R, }
{
. D" ~# M0 y4 V U0 j" o
%>
5 ], E1 ~8 C( _! A& k" b; s: l
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
0 j3 b5 `, D) n: u
<%
# Y8 b) r+ j$ h0 e% ^
}
1 B% H- U- R% E5 X8 M- i- i
%>
6 b# I0 f3 u J7 p- j
</select>
2 g* O* m1 c6 E% T; P! t" V
</td>
% h ^" r4 H( S6 x4 F! v: `8 h! v
<td>
0 M! A% q, S2 B/ i" C( }9 `
<select multiple id=city style="width:150;height:200" class="bgc">
: _- a) S7 Y' H9 P, q: \# e
</select>
; _6 o) a9 J1 |! F! {. K) ~
</td>
9 Y, k4 A3 j- I2 f, S0 g: v
<td nowrap align="center" class="bgc">
( S! W0 {0 w- p1 J
<input type="button" value="<<" class="buttons">
) r) s1 t. N1 j( e4 P
<input type="button" value=">>" class="buttons">
" [5 C: R, }- D( h& l6 ~! S8 i& h. ~
</td>
5 ]8 X) t: j/ T! |& x
<td>
4 \) [" ?" I' i6 y8 f9 \
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
# P1 ?3 S1 l5 k5 W
</select>
0 R; m) \) X: u# z
</td>
4 `1 Y7 L- H) [8 d+ x& G$ u
</tr>
; L4 E! D$ ~8 G! }0 U% z, r
<tr class="bgc">
) `5 u& ?2 K7 u$ B8 E5 r% J- \
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
. I2 o3 J& H: [' w# P9 g, \( Y' l- T
</tr>
& l% u# U l4 Z, a: @2 ~6 h/ E
</table>
0 u/ w# W; @ z" ~* o% d2 G- y# N" e
</form>
$ W# c( p$ ~9 T2 y3 m
<script language="javascript">
8 u% [' J! h2 }9 m5 K
//人名移动
0 _8 T& M0 Q- @6 A0 k" ?0 J
function move(fbox, tbox) {
" h& b, F& m7 B. Q
var arrfbox = new array();
8 X& E+ C! O) \. }; h, l- R
var arrtbox = new array();
: ^" ]5 \# S3 a8 A( j2 y1 b# z
var arrlookup = new array();
2 \" a/ e6 H" G7 w$ K6 d6 {
var i;
! k' i5 E* Q' a7 K3 f4 M. N- a
for (i = 0; i < tbox.options.length; i++) {
( e# v8 c2 Q7 N9 a& g
arrlookup[tbox.options
.text] = tbox.options
.value;
5 `: n- ^' G. @3 m2 K, {
arrtbox
= tbox.options
.text;
5 M2 v4 P* w& s h i0 O
}
) l- z8 y6 H- Q9 |
var flength = 0;
0 U* r- J# y$ V$ o5 a+ _+ n
var tlength = arrtbox.length;
4 e1 ?2 h: q/ I5 \; f. F K$ d" L# Q/ U V
for(i = 0; i < fbox.options.length; i++) {
5 I m9 V* W* A2 W: c" D
arrlookup[fbox.options
.text] = fbox.options
.value;
( R6 e e3 x$ U7 s1 ]
if (fbox.options
.selected && fbox.options
.value != "") {
3 p% e0 V2 j0 Q; F9 y3 l# R; X: {
arrtbox[tlength] = fbox.options
.text;
0 [! |- |. d% F5 i& Z
tlength++;
& h& D6 _ |1 h- z- j
}
# g: w% D% W2 r/ E9 ]
else {
( k" X, \) f& J ]3 P% e% E% {
arrfbox[flength] = fbox.options
.text;
7 q* ^& K; n$ ?( e6 | b0 a
flength++;
2 P+ [7 D: d `7 w9 \
}
( F$ Y# L U3 ?" q$ b
}
5 b( u# H' @1 J9 Q5 |
arrfbox.sort();
) L( V* N/ o6 b
arrtbox.sort();
/ n" w4 P) l* C8 J4 i
+ x5 K/ s7 U+ {8 b4 X: S+ I. J+ C& V
fbox.length = 0;
4 i5 R% T0 y9 c# [
tbox.length = 0;
& }' }; z3 Q& _- E, I: N O
var c;
6 ~. s4 c* Q; R6 O! T5 \
for(c = 0; c < arrfbox.length; c++) {
3 ~& I' o/ |) c: f/ M4 ^9 E3 V
var no = new option();
" [4 `6 |0 B! D- C$ }
no.value = arrlookup[arrfbox[c]];
- p* ]4 z0 T- v$ j2 z
no.text = arrfbox[c];
1 q6 O9 `" D4 N7 F- m$ X
fbox[c] = no;
- w! [/ `! d& h) h# Z0 T
}
1 D: o$ b1 `" Q3 t" d4 o8 K1 m( V
for(c = 0; c < arrtbox.length; c++) {
! Z0 P2 A, K3 ^' r' d d2 q8 \/ c
var no = new option();
+ H# q& b' U1 E' Q. Q {
no.value = arrlookup[arrtbox[c]];
# `8 g7 M/ V4 R6 Q4 w
no.text = arrtbox[c];
. g1 q( y- k! Q# d! m
tbox[c] = no;
( _$ X6 Z" h$ r) |6 @ w( z
}
+ q& K* s% Z, z: }. ^
}
4 R! Y# l, l0 K% B- z, ?" q+ x( N
</script>
/ B* C0 S8 J8 X
</body>
) Z. O) O# H; X! z3 _1 m3 o, V
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
