标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
" b6 A1 L S, K" ~7 y
c pageencoding="gb2312"
# p, M: V e8 u, s- Z
%>
! x9 W. o/ ^% V9 H! M; B7 z/ H
<style>
7 M3 @0 r& {6 h" J1 A
.f9{ font-size:9pt; }
, v' s6 J- j# `- C/ `2 n
.bgc{ background-color:#aecaf9; color: #0033ff }
. ]1 g: A3 N/ J; b& f
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 m/ J; i; z* x0 Z% U, s- o, B
border-bottom: solid 1px #4e7dc1;
+ O% L: f! l( i& {$ b# _' J" _7 M
border-left: solid 1px #aecaf9;
2 i7 ~; ~8 r# Q. L' @- |6 o
border-right: solid 1px #5679bd;
* Z! r) m. S4 N* U
padding:1px;
: r4 `; J+ B! }8 g6 d
margin:0px;}
. Q- k4 }' }1 m4 T( E3 O
</style>
/ i! V- [! a9 p. O# d$ \
<script language="javascript">
9 t! g9 F- x9 F }
<!--
0 Z4 M/ i6 W6 t* B& A. c
function rv()
6 u, l$ i/ @9 R8 Y' p* y, [& r
{
. b4 n: [1 _, R/ i
var val="";
1 f1 Z2 ~: |" e& Z( a
for(i=0;i<combo_box.list2.length;i++){
2 X+ L* B! p9 z7 w' ^ S* b
val+=","+combo_box.list2
.value;
7 ^5 g* n3 R* l/ E' R
}
3 P g( X& P$ z: R# C- S* ]9 x
if(val.charat(0)==","){
2 F+ m& z O; {) }- L
val=val.substr(1,val.length);
1 {& \7 d; L/ v4 G% \
}
, F0 g1 I0 |1 y( a8 b% ~
opener.form1.frecname.value=val;
, R8 ^9 A8 l5 W& F, ], A* o
self.close();
0 @+ u; d9 B! j1 e6 l* Y0 w# M
}
# y. M3 f+ @6 L) E! V: _0 w' P: F
//-->
# D! h, t M+ L. W' M: d( R0 M) Z
</script>
& l6 u" o$ S8 c1 q
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
- ?" @+ O8 v3 L0 s5 l+ W
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. M% Q: b6 D! }8 C) L
<%
: i- e u- p$ Q' d$ X V7 D8 d( {2 u
cdatasource ds=new cdatasource(); //数据联结bean实例
1 {7 |( y+ Q" b6 t( d3 {+ J. j
java.sql.connection conn=ds.getconnection();
. l) c. ~6 v/ {# ~ J% {
java.sql.statement stmt=null;
- `0 y. K9 o. |" t( S4 f6 C# ^
java.sql.resultset rs=null;
) p# @ W# g, l) ?
cdatacheck dc=new cdatacheck();
$ Q& P. Z; F9 ^* i. w7 h7 p* t
%>
- H: s1 B. k* ]3 s
<%
8 ]- L6 D* i! g1 w) G- Y
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";
' M9 ~& ^$ O, N2 O1 M# T4 D
stmt=conn.createstatement();
5 \9 b4 n0 \8 {
rs=stmt.executequery(sqlu);
m+ |' y# N) u0 I
%>
0 ]7 j8 l& E! C3 J, V0 h, Y
<script language='javascript'>
- L# x, s7 { s
arr = new array();
/ k; P y$ h4 S6 u" ^' C5 J
<% int temp=0;
6 R$ u5 k7 R }7 d" Y! H& V
while(rs.next())
4 B+ @" T& x9 L: @% U& Q0 y
{
1 @: f$ i7 S5 ^% t$ n6 L+ z4 v* T
%>
8 s% @. }2 H) s5 T1 V, V7 F( k6 B
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
# j& N: J3 ~* W2 b% g; U& I' E! e
<%
& t& Q& c& g0 W
temp = temp + 1;
0 z" O" K) u1 J8 I8 k0 ~2 O+ g
}
5 T! q: h' G8 U- S) f
%>
; M. V0 y4 a. ~% K9 o/ g9 p2 F
temp=<%=temp%>;
: v+ S, w) t8 }' _, E4 t% s; S3 [
function changelocation(id){
0 e5 G) O! {; p' p9 V2 z8 e. u8 N2 ^- B
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
3 Y0 G- `( Z- n" a5 p2 Q; `1 h
var i = 0;
2 m: W5 k: T! g( n0 S% m" M* p
document.combo_box.city.options[0]=new option('-------','');
0 _) W, }( `" s
for(i=0;i<temp;i++){
+ v) k; N6 T% C- m2 _" j$ _3 n2 f
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
0 @: t# |4 w; h
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
+ d/ L; D/ }! x: S
}
$ Y( G' u. ?0 }! ^
}
' g' L8 \/ M8 ^3 J# X/ K1 u0 `
}
8 ^8 k! G1 b) N( K: E- ]
</script>
7 L% E' R/ J# h- Z/ F
9 J6 T3 f2 w2 h" t% M$ l+ w
<form name="combo_box">
! w) M0 D, @& h9 b- m( u1 R
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
- m1 \7 ]2 w+ V' B+ N- M
<tr height="24">
4 y) c0 d" Y, k0 m# Q( g) C$ Y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
* M6 f. G# O }# C. Q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
' M7 P+ z1 k# `% a$ X2 t* f" Q8 _* |* i
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
$ j1 L( f/ c* G7 P6 O/ R+ z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
4 m- `. b, C" K8 H; I8 l; ]
</tr>
; X: R: J* y: g& H
<tr>
{$ @( }9 G) i5 y( V! C$ e
<td>
3 p) g; y: Q6 u. r8 A- H
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
# E, ^" z3 [" k7 `0 e9 F$ Q. O9 u
<option value="0">请选择部门 ---></option>
$ w: o* E) b9 ]0 x: F
<%
# z4 m5 O9 p$ v' L
string sqld="select * from tdept";
! r# O6 u! n7 @
stmt=conn.createstatement();
" ]4 }' \7 m6 H9 M H
rs=stmt.executequery(sqld);
; |6 S1 G, Z5 @' a
while(rs.next())
* | g: T y! F- d4 L- a N* Y
{
$ G' U) ?8 W" G+ @1 m( w4 | e7 e% Y
%>
; q: X# Q! k/ V" G ^
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
$ ^& J R4 M* U/ e T1 S+ I
<%
+ V3 D e: L* g! H, f
}
u, L+ p0 T) ^( Y- {% t2 w
%>
3 t, j2 y$ T7 @5 |
</select>
9 w' ^- h& X( k0 G9 t; i
</td>
/ d: Y/ d' }( n; z6 }) \
<td>
7 _0 X9 I6 V8 U1 ?' I! s5 d/ b
<select multiple id=city style="width:150;height:200" class="bgc">
" f7 {3 L0 v4 v. x P7 Z
</select>
8 z8 K) @! ^) @7 z! y9 F
</td>
- e+ K* Q1 _! S8 Z8 Q1 a, K
<td nowrap align="center" class="bgc">
* b. S$ q. l' ~/ P& E, d
<input type="button" value="<<" class="buttons">
D6 E' e% ?! R, z& Q! ~
<input type="button" value=">>" class="buttons">
. c, t( \9 F6 b6 G6 m; t+ `& ?3 Y, |
</td>
. H0 j5 ~# ~ W' m, `" E; W7 N
<td>
+ Q/ r5 b2 L# g( a) s4 k1 f
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
: U f7 z( x0 a, g1 X; m4 L4 r1 `+ V
</select>
; b7 d" e9 M* j5 A' E) Y/ K
</td>
9 O/ P% Z) ~5 ?# K
</tr>
8 z* Q6 c+ J) G4 j6 _# P6 z
<tr class="bgc">
S. [* ^8 P# P7 K) A3 B
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
7 j& I: V+ f5 Z2 v. l5 `! ]/ ]
</tr>
, m) z1 T9 o( J: S& V
</table>
2 Q {- @5 R* R+ I: \* E
</form>
/ |4 }1 Y3 U4 H J j0 f6 |, ~1 W
<script language="javascript">
5 Q, d* }6 ] }4 h) d n9 J. g
//人名移动
6 L) |: v9 g8 R. @7 R0 V; _
function move(fbox, tbox) {
: S O! Q, ~0 D7 S# I7 ?/ {
var arrfbox = new array();
' `! p) k3 ~7 Z9 G; X! a
var arrtbox = new array();
% _2 [2 g! B, O: S. ~ y
var arrlookup = new array();
2 |/ H+ X$ q2 i
var i;
( k6 |6 ]' x& p& b- [1 z, A0 O
for (i = 0; i < tbox.options.length; i++) {
* D' r0 r, p/ d2 q3 b
arrlookup[tbox.options
.text] = tbox.options
.value;
- _7 _4 X# e6 v+ b% K
arrtbox
= tbox.options
.text;
! i4 R t: Z; A3 M: t
}
+ B- L4 T2 a! v( {" n
var flength = 0;
9 J4 j, `4 a9 @5 `4 n
var tlength = arrtbox.length;
2 S* u( @* ?$ Z. ^8 \, R5 R3 V
for(i = 0; i < fbox.options.length; i++) {
v' }- F* q/ S9 v( d; N1 A
arrlookup[fbox.options
.text] = fbox.options
.value;
$ F) D# R- P1 W! T, X" g
if (fbox.options
.selected && fbox.options
.value != "") {
/ R" E4 c; p3 U7 p: [* T/ f
arrtbox[tlength] = fbox.options
.text;
3 Z- G6 {* u/ a7 \& {
tlength++;
" G- C* W4 t! B6 H8 A5 z: i
}
2 w# I7 v/ ]" L
else {
- p4 s( V, L5 E: N, n; P
arrfbox[flength] = fbox.options
.text;
) `9 f; C+ ^2 y1 E9 ~# s5 q
flength++;
* P+ f( k, r! Q( [6 W/ Z
}
$ S' d3 x& q& a" G
}
, W- M' ]. ?% _& g
arrfbox.sort();
5 J% e/ q+ q3 x: s" f g- z2 m* P
arrtbox.sort();
. i/ ~, Z+ y, f6 F) H9 E! A D* x
7 \! G' U, V: [% @) u8 D7 K
fbox.length = 0;
9 g4 ~( T2 J2 b5 T; w; O. |6 }
tbox.length = 0;
8 i+ ~' w5 g0 k# D
var c;
5 ?, f6 g) \/ C* V$ f$ e! r8 V
for(c = 0; c < arrfbox.length; c++) {
8 |% x1 t3 a; K% l, B% q6 x4 @
var no = new option();
" h6 F% Y9 f. g/ f7 V4 \
no.value = arrlookup[arrfbox[c]];
& {7 g5 a, [* h
no.text = arrfbox[c];
) V0 f5 [5 s y$ A Z7 a
fbox[c] = no;
0 u# \' k0 Z: H4 q! K4 k
}
* u9 B8 {/ U [9 ?
for(c = 0; c < arrtbox.length; c++) {
' T, y0 ?5 V& s$ O/ ^2 t& G3 V
var no = new option();
! i; `7 m) i9 Z$ \5 E! l1 n
no.value = arrlookup[arrtbox[c]];
2 W) i8 g6 i6 o! j
no.text = arrtbox[c];
7 [+ B4 Q9 O( Q# |
tbox[c] = no;
; W4 ?3 [# F, d% b
}
& M' L& k1 \. @1 W$ E" n7 N/ Z
}
2 x0 ~& B* A) r8 c8 v* I1 l
</script>
* L0 [5 e" g y% |6 T' _) d
</body>
5 i1 ]+ A( @6 \* Z( A* j
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
