标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
( t+ ^6 H9 {; t% q. N) K* t
c pageencoding="gb2312"
( d/ e& g) q( g# ~5 m
%>
. u) K7 H/ q* C4 } E) d
<style>
5 k2 p; C8 Z2 s
.f9{ font-size:9pt; }
2 O. o) x0 Y0 a9 j# Y
.bgc{ background-color:#aecaf9; color: #0033ff }
6 `8 I3 c+ S/ |0 z/ @1 b3 f
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
: R6 i2 B$ K1 l" I, K M
border-bottom: solid 1px #4e7dc1;
" R* q h3 n1 ?* Q- ?5 c7 d7 U
border-left: solid 1px #aecaf9;
( s3 [& _8 i4 B# q% v) t
border-right: solid 1px #5679bd;
2 r/ @1 B4 a, p+ l$ T }% o2 {) H
padding:1px;
. e$ o, i8 ?7 K" z' J m
margin:0px;}
$ p. Q6 D6 d/ I0 ~* X
</style>
1 s' ~! H& k" D6 S- `) A
<script language="javascript">
# W5 M1 @- p) l* F- P
<!--
+ U4 K5 q1 |8 b' c- f
function rv()
" R; o6 Z, _8 c- z4 a
{
* ?2 _( F6 s% k% n9 s3 \
var val="";
# j3 F+ Y. p) T" m7 ^' T4 B% H
for(i=0;i<combo_box.list2.length;i++){
/ h2 I* {" h# s6 }
val+=","+combo_box.list2
.value;
M. M# i4 X* _3 Z
}
8 F( h4 f8 I2 q& b- |# x
if(val.charat(0)==","){
2 E, X/ `& \" A4 f. Q
val=val.substr(1,val.length);
7 w+ J1 ?6 H& Z- n9 g7 B1 t
}
4 U; b& ]: J) \ @2 K* J# Y
opener.form1.frecname.value=val;
7 @) D- M2 g7 i# j, s/ D8 M
self.close();
, d" v4 ~- q' {* O8 d' F
}
; b7 K5 q% s6 J4 T D5 F, Y2 ^
//-->
0 _% M# y6 }# D" q% ?* Z- L- u
</script>
! z& D: ?" H! u2 {& I
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
5 W, F$ Y9 U" p8 S& D
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
7 n+ g6 V3 O5 G" P R9 F4 }
<%
! u+ Y( }* y* ~7 `- W. `2 \5 @/ t8 I
cdatasource ds=new cdatasource(); //数据联结bean实例
4 m8 ]3 f! I! o
java.sql.connection conn=ds.getconnection();
5 }/ {7 Z: O% ~
java.sql.statement stmt=null;
1 N' w) X# J, t
java.sql.resultset rs=null;
2 W4 u! \/ Z$ ?1 I5 R
cdatacheck dc=new cdatacheck();
" r/ ?5 M* F p9 h0 C! a1 ^6 k
%>
* Q5 c* }5 s# S% t% R
<%
( Z) T+ j* L( w4 s* A. A8 Y5 g
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";
: y) U9 n( K2 i. G. v; Y' w
stmt=conn.createstatement();
1 w6 L O- D \+ ^5 e! q
rs=stmt.executequery(sqlu);
% i( L5 D0 \: X9 u
%>
% p B. k- {# n8 s% s
<script language='javascript'>
t* y# x1 s7 ^3 p7 z
arr = new array();
4 M8 ^9 Y$ d3 w3 q0 T
<% int temp=0;
* c3 C! F" J5 g1 ]" Q
while(rs.next())
! E% l+ I. c$ l- l: y0 K4 ~
{
1 J! {1 I& M( r9 L" d- W. }
%>
* o$ D+ {2 v' S( ], c
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* R$ R! D( H& I# N- i6 H
<%
/ R3 C/ D: B$ x
temp = temp + 1;
- m! k' [6 c' S! f7 K! S+ O
}
1 W9 G" }) C0 t; E' y* U
%>
) o, X1 o7 Z. x- I
temp=<%=temp%>;
8 a, @" T) y, T
function changelocation(id){
D6 I/ p/ m: B. D
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
+ t; q' `. B6 u' p( g8 g
var i = 0;
3 x' S5 f" n$ ]9 ]8 ?
document.combo_box.city.options[0]=new option('-------','');
2 Z' K d$ E0 a1 i; M
for(i=0;i<temp;i++){
1 T4 G, U) A& |( I' w2 A: p( e! n
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
a" M4 B. ]! N( ?& T2 m& U
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
: J% M4 G# c( L; J6 f0 C5 b
}
4 [; C8 Y/ l5 b8 L& N2 B
}
; i. n; z9 z- p- F: s% y
}
. \3 ]0 Y$ Q! I/ H' c' N( Y x% @' Z; U
</script>
' p/ a4 t+ k5 F9 ~- w4 _: p
' U7 I! Y$ I# a2 l7 |& y! D
<form name="combo_box">
& A7 D& l9 T0 D; u/ w/ ~/ q& W
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' B% n8 [ |3 F5 L
<tr height="24">
8 s" P& F; U6 y7 b) O4 C9 U. Z0 {
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 W( ^& m7 P6 o: m" ?' }0 h
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
/ w5 u" Y0 X& q9 b; Z& X" `8 {( K
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
; g/ x D, N* A" o
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
! n z& Z5 B4 ?. M
</tr>
8 J6 H. F/ F4 e- w# X. f4 g5 o
<tr>
+ e: m$ b, L% j9 a0 X8 z1 C4 V
<td>
% K, ?# ~- T) t9 m# y" K2 }. q
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
$ K8 `* g5 j# Y( t1 P: ]$ E+ u
<option value="0">请选择部门 ---></option>
. j( z0 L4 g; e4 M \$ N& d/ L# u
<%
: P. e4 B& G7 Q: ~6 l9 W: u( o
string sqld="select * from tdept";
: M) B9 O7 C% O5 V$ A9 X
stmt=conn.createstatement();
* L5 A0 x/ T- v/ s( {* z
rs=stmt.executequery(sqld);
$ y3 q5 T8 J1 L( U: I
while(rs.next())
: t( n% |' O( X# h; b6 Z# B
{
2 q5 r' O5 d/ D- R
%>
) G( J R8 @$ }/ ` F
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
4 \) t+ G# l! X- I* g
<%
# s+ e: M' m9 S; o; ^1 Y% n
}
: {$ y' k$ ~$ P, o c5 }; M
%>
8 r3 O3 n& _: k. m4 ?7 T* Q
</select>
& H& ?" d" u' v( R2 z2 M5 y
</td>
" k1 r+ `2 g9 x9 `4 o
<td>
+ }8 s& {" _7 Q
<select multiple id=city style="width:150;height:200" class="bgc">
/ t2 \' N) c# }; D1 s
</select>
9 j$ f' h& f5 W$ U2 K! l
</td>
/ g, t/ ?+ c$ V! O
<td nowrap align="center" class="bgc">
$ P9 J6 @, N$ O1 L( X
<input type="button" value="<<" class="buttons">
. K6 @0 g1 V5 h1 h9 k4 |7 l
<input type="button" value=">>" class="buttons">
7 f6 g+ ]6 p' }2 n6 z- Y
</td>
/ z( M7 k# ]4 B. h
<td>
' X5 K7 \( _! ~/ ~; c
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
* c/ O3 m) q1 q2 W8 a
</select>
5 }- ~0 G2 |! G" @. V
</td>
( y, y+ `; L8 ?$ `8 j7 b2 M3 o i: k% v
</tr>
; |! I' t1 H# ^. x+ D
<tr class="bgc">
8 r6 d9 o; c5 A1 f9 b8 ]
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
9 w" s$ V% x$ i; \. r
</tr>
0 z) Z& q4 J; R0 a
</table>
7 g& w( r2 f* F8 {: c. Z
</form>
5 s& V0 a5 @8 Z- b/ |" r+ n
<script language="javascript">
2 }8 z/ j& g; N7 ]
//人名移动
' L; h, h& S- [6 W" S) X |1 ^
function move(fbox, tbox) {
+ B0 Q3 g+ N* M" t0 D5 ~
var arrfbox = new array();
4 o! C* B9 P' ?: @, e; L2 L' ]
var arrtbox = new array();
0 |; S/ V: y" e
var arrlookup = new array();
! e: @# p, p) t& G2 W% Z6 D
var i;
+ g, }% B. X5 @+ S8 v
for (i = 0; i < tbox.options.length; i++) {
& U# h& C2 q+ M/ `1 q2 `- z
arrlookup[tbox.options
.text] = tbox.options
.value;
# |% X4 K! A. V' k, s1 M/ m1 n
arrtbox
= tbox.options
.text;
! u9 x, {; ~: B& s
}
0 ]) H' D" `8 a% h$ j9 F1 D- ~9 n
var flength = 0;
1 U) ^8 S$ k: l5 r6 I
var tlength = arrtbox.length;
( ?9 j2 A m; v( K. z
for(i = 0; i < fbox.options.length; i++) {
7 Z! r3 q2 d H, P- S9 \
arrlookup[fbox.options
.text] = fbox.options
.value;
/ s) W- T% t8 C
if (fbox.options
.selected && fbox.options
.value != "") {
+ w2 O' Z7 w- }# o/ O9 x0 k! p
arrtbox[tlength] = fbox.options
.text;
! n9 p4 U; \+ N; T6 g9 Q- s
tlength++;
) i) z) A3 N3 z4 e. b5 ~
}
5 U! V/ h# P& s
else {
K9 |$ o2 L8 _: ?
arrfbox[flength] = fbox.options
.text;
. p: g2 u H& g
flength++;
% m( _- t, ^$ c* O1 c6 Y( i
}
b" d4 X$ _& Q; r, G2 ^; U
}
; L: ^, R7 R7 n
arrfbox.sort();
9 c) k; r. s% U t; c# D
arrtbox.sort();
( `% x+ X+ A" N8 ?* D0 z
) R" t; ~" ^2 }8 `' l) `/ {
fbox.length = 0;
' R' I4 [5 @; k5 }% S# f; W
tbox.length = 0;
4 X c8 E- A5 q% N; _ |- t
var c;
0 q; @' v1 k5 ?4 S# [
for(c = 0; c < arrfbox.length; c++) {
; @6 {/ x& B, r7 `( h
var no = new option();
1 B7 U! w1 Y( ^9 k
no.value = arrlookup[arrfbox[c]];
0 l3 i) n2 D" z- V f
no.text = arrfbox[c];
. i3 g$ f7 X* h5 }
fbox[c] = no;
* Q, k! b/ H8 {. F0 z7 Y1 ~
}
, R7 E9 a, V9 X, }
for(c = 0; c < arrtbox.length; c++) {
9 D3 n* b3 f% E7 ~2 ?; p6 k. ?
var no = new option();
" l: a- i; ]2 h
no.value = arrlookup[arrtbox[c]];
1 s1 P+ v9 P, D9 p+ j
no.text = arrtbox[c];
) s: @. c" P3 R$ b
tbox[c] = no;
7 Q% }7 \* `( b* ]& _& U; |
}
9 x* Q! u' L1 i2 K4 _/ T8 i
}
: F8 k& u0 U6 n; l, ~: F, z* Z
</script>
2 o' e- V; f& E& f3 ]! @
</body>
. Z" z! w7 h( H1 \. f! A
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
