标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
- o3 ^# @2 Y) C; w9 S+ }
c pageencoding="gb2312"
" J$ D9 C# h* B4 N4 h/ B
%>
* R& q+ S3 s1 S9 D& U+ l( B
<style>
6 J4 {7 d! A# |+ D
.f9{ font-size:9pt; }
, C; m+ A: T+ U2 m4 A' [
.bgc{ background-color:#aecaf9; color: #0033ff }
, v6 p; u5 k8 A3 n" @, ]
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
~" V# w( D7 ?- w" c3 C
border-bottom: solid 1px #4e7dc1;
1 S5 k o$ D8 L- e/ x- O) h1 `
border-left: solid 1px #aecaf9;
4 ]3 m! i% U# _1 k5 E v% F8 F5 y
border-right: solid 1px #5679bd;
( N0 T; O6 k, S- i
padding:1px;
; z$ V. g- E0 t: D
margin:0px;}
3 e( }( l% p/ u L! d+ k$ W& l' V& D
</style>
% L9 S- e4 ?6 U0 W$ x
<script language="javascript">
/ I6 ]+ j6 i; C" p. H4 N2 z
<!--
7 _8 ^% ^0 W) \9 U) ~8 w
function rv()
4 V. V& _- h! K
{
. {- M2 k/ A+ w5 _' Y+ z2 W% I# @
var val="";
; T9 k/ w8 a0 O/ C% m( i
for(i=0;i<combo_box.list2.length;i++){
# S2 U8 `9 {# Y: T+ d" B6 T
val+=","+combo_box.list2
.value;
2 N: j3 i1 p' G0 X, T3 v
}
) y' `$ g8 \ b% I8 J( D
if(val.charat(0)==","){
8 E: i9 F. e) L+ A& o h5 D
val=val.substr(1,val.length);
6 h$ e/ X6 d3 R' q4 H
}
& q+ ?" N, d1 v& X) O
opener.form1.frecname.value=val;
1 x4 N( v; V" v' B
self.close();
8 E2 s% u3 d% ` O/ I I' P
}
U3 D, p. H) C. M
//-->
$ {( D9 f" ]) O6 t
</script>
& t+ e: E8 [; q% h- g) I- P! }
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
: I! Y% v4 {$ P0 M8 q4 l
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
2 I5 K8 Y. k. y0 O& e S
<%
1 D( {) w2 n4 V" P. g V h* j
cdatasource ds=new cdatasource(); //数据联结bean实例
- H/ }* }8 h0 d. F+ z
java.sql.connection conn=ds.getconnection();
. M9 |/ |7 d0 i. Y
java.sql.statement stmt=null;
6 ?1 x1 N) ]8 C- y7 b
java.sql.resultset rs=null;
3 ~5 o* [( }$ }' f: k1 t/ H6 |
cdatacheck dc=new cdatacheck();
3 b; w! A) Y. Y5 l9 |1 m/ A0 a( O& _# j
%>
2 u, n" V' D2 u
<%
" ?5 U& C& L4 J/ _2 s f T
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";
, L' n% G1 A" Q" y+ D( D
stmt=conn.createstatement();
) G8 T1 H1 _3 u- J \: ^
rs=stmt.executequery(sqlu);
: l$ ]2 N4 }. y, U& \! u7 i: G
%>
" R1 N4 c- d; [# Z& U
<script language='javascript'>
5 q" I0 V/ T1 k( C6 f; R
arr = new array();
% h& z- m+ C' e5 f
<% int temp=0;
$ i! U1 f9 B7 N s6 M) G
while(rs.next())
; p$ F+ y- k4 P( s+ K- {
{
- N' d3 ]; Z P
%>
9 L, x* x) L8 I2 W$ Z3 s
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
, w( z' ~9 V: G. D3 c" f7 J$ A
<%
( s; \" U8 D7 W! L0 ^
temp = temp + 1;
" O- E1 k0 I9 H1 a8 Y0 {
}
$ N- r. S: J% D- h; b0 o1 q5 A
%>
3 @" O% T7 l5 S6 p; c
temp=<%=temp%>;
3 e4 V5 _- ^! [# p
function changelocation(id){
! H" k3 I6 L# t8 R' e# ?
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
' m" Y* {, A. v/ K
var i = 0;
- ~% E3 Q, F2 S6 S" ]( z: b ]
document.combo_box.city.options[0]=new option('-------','');
7 R' z/ i V4 a* _3 u5 L9 j! j
for(i=0;i<temp;i++){
n- c2 ~1 O' O5 m
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
- O$ }% L' D/ s8 Q
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
" B3 {0 ~& [- F/ I% N6 v
}
% |+ o( ~( ~) ^- [
}
! T" _3 S& R+ \) `. ^
}
# E5 z; o% u6 ?
</script>
( j# W6 {# o, j% K# B" Z* |3 _
% a) Q: B9 V" F/ I A5 y w
<form name="combo_box">
6 H1 s. u+ J7 e7 S8 V: Q0 Y
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
( y4 j! X0 j; p) G; H
<tr height="24">
$ ?$ `: W- {( ^% t
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
# `6 l/ u3 g5 F( N& l. t
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
( t6 v% I9 p8 C; b1 Q* T
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
1 o6 N' g4 j0 v' n; R1 \
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
# x0 b9 g+ e8 ~; T( p, @0 u5 Y
</tr>
+ \6 s% P; G$ a) W+ V8 O P- |% c
<tr>
$ z$ N: x9 S6 B. a5 e
<td>
1 |* G5 l9 k y! x& f) g8 t% c/ G: v( V
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
1 F: P y# }3 D4 g% k* }, n
<option value="0">请选择部门 ---></option>
8 R, w3 ?+ N1 |2 j8 @/ l2 X
<%
( e4 r$ \/ W4 F: o% X$ i# Z: D$ ?
string sqld="select * from tdept";
5 M) G- _$ T9 w: R
stmt=conn.createstatement();
; V% G r0 p4 `# v+ g! t: R5 H
rs=stmt.executequery(sqld);
; ^0 b( Z' @# j. z! v' |8 a
while(rs.next())
8 [' _( {+ ]' N$ d
{
8 n' _6 Y, B9 K) c7 o3 \
%>
/ V& `7 j8 J" b% _6 o9 F- z
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
! c" c' t: C. A% z! v/ C
<%
F" G( G" C/ T* }7 b. s
}
( l2 t h2 i4 S6 S3 i
%>
0 C7 u% `$ I2 Y
</select>
; u9 `& ~) ?! |! h6 M- b3 C
</td>
8 V- Z5 E' f4 `; G% ^
<td>
* r& {- {& y0 s6 Z" f* \
<select multiple id=city style="width:150;height:200" class="bgc">
; ?- V& x: d, v
</select>
2 }8 |# h% Q9 m2 ~( | h; r$ A
</td>
: X" O) \& b/ K; o% K8 a) D, e
<td nowrap align="center" class="bgc">
/ P2 S; ?7 h0 ~/ w
<input type="button" value="<<" class="buttons">
' m |, g7 ]9 z9 u7 v* ]8 h
<input type="button" value=">>" class="buttons">
3 j6 z9 F1 i1 v' H$ y+ ]4 n/ U6 Q3 \$ ~& @
</td>
0 `- q5 d `& V
<td>
4 f6 d' Y( ~+ G, T
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
$ b% C1 ?$ T7 I' Y+ L& _' K
</select>
9 ~$ N" B4 G; j3 ?% |
</td>
: y) g" D& D. e* Z
</tr>
K- w2 {0 a( v: E2 Z' x5 Q5 k+ E
<tr class="bgc">
( V1 A' Y9 M K
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
# U& Z9 D- {9 W( S, P2 H
</tr>
% A3 g% N; J( H" F1 z+ z" ~
</table>
# n, y# t: Q1 m+ ?! g( F# T" s. l
</form>
* v% H; u9 x3 K% w9 i* [! E' N
<script language="javascript">
, q' f/ b: ?& F1 W6 e% J
//人名移动
4 H% A2 _# S# k# z9 g' H) ?
function move(fbox, tbox) {
. w# c3 M, i* u$ ?
var arrfbox = new array();
" E U( m/ Q: K& C7 F
var arrtbox = new array();
- J+ ]3 R8 B4 }5 J6 `
var arrlookup = new array();
7 q4 {3 z# I2 G1 w b. V- {
var i;
- r( L+ ]) |6 Y% E5 O( D! k( a% y
for (i = 0; i < tbox.options.length; i++) {
) b& s& o3 N/ d( w, \
arrlookup[tbox.options
.text] = tbox.options
.value;
# m$ E. g w% a' i7 E
arrtbox
= tbox.options
.text;
0 y5 S% ~- j; e. A3 o9 b" x& p
}
/ B$ j9 ~. Q5 H; s8 Q4 g
var flength = 0;
$ m: o* `+ \5 L ^( W
var tlength = arrtbox.length;
' q! G* d3 ~2 V) E( h6 G
for(i = 0; i < fbox.options.length; i++) {
" o4 X# p1 |% p$ k
arrlookup[fbox.options
.text] = fbox.options
.value;
9 n, r7 l' i( P- `6 A. C
if (fbox.options
.selected && fbox.options
.value != "") {
2 M- m! [: E, X
arrtbox[tlength] = fbox.options
.text;
; a8 l) @1 r3 M0 b% F
tlength++;
% U6 L' B- f" I: T6 d
}
" E# B& C2 ^4 P% c
else {
' N4 [& i% e$ r$ A: o* l
arrfbox[flength] = fbox.options
.text;
+ o/ z: [; m. ~; l
flength++;
) a! T5 }. ^+ y V+ P. q
}
; s6 V$ l4 {6 N5 k4 E3 h: J& i
}
* Q- [/ l) [- [: Q. T3 t3 O% ?( a
arrfbox.sort();
1 ]0 k+ Y3 S1 L3 W- ?6 C
arrtbox.sort();
6 p4 L! y2 j% D, ]. e: ~! Q1 G
' d) f; V* m7 k! i9 r
fbox.length = 0;
6 Y0 O" P4 s, i* e; ?% W
tbox.length = 0;
3 y; I' C, z9 l0 F
var c;
2 z, F& J. _; b4 z! p
for(c = 0; c < arrfbox.length; c++) {
_; E% y, u2 Y+ [5 |
var no = new option();
1 {$ t. e& c( g0 b$ h5 c' ^; D* k
no.value = arrlookup[arrfbox[c]];
1 m* Q& U, ]9 V- y
no.text = arrfbox[c];
/ F0 k$ i' m9 }9 c* g8 y
fbox[c] = no;
$ m/ E t' q9 J& [ z4 I6 {5 `
}
( I6 r; g, m' o( a4 E( A
for(c = 0; c < arrtbox.length; c++) {
8 K! V. I/ T. @ P8 B8 \& a D+ k
var no = new option();
# F& G$ u6 [- s0 k2 ?( R# _ h
no.value = arrlookup[arrtbox[c]];
t& Z; Q% b* P+ _8 Y4 f
no.text = arrtbox[c];
5 A9 l( `; W& h$ F, D( K
tbox[c] = no;
9 H, I( |- w. T. r! B# `
}
3 @+ [ Z7 ^- @, D) m% B
}
# B+ q* O9 |( F% X; {1 u
</script>
* I& E: T1 Q2 ~3 E- J# u: R6 [
</body>
/ W+ F. T1 F2 n1 Y5 |9 ]
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
