标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
; q. k* d; \4 o
c pageencoding="gb2312"
( x5 k3 E' l& V: e% v1 Z
%>
# b6 L3 i1 Q1 I$ f/ J/ R7 p
<style>
0 k* E: k; X' ]- u, ?
.f9{ font-size:9pt; }
: J% V% l/ @/ v+ g3 L* A6 ?/ ^
.bgc{ background-color:#aecaf9; color: #0033ff }
' F) {' O+ L( m: J6 E8 C/ ]7 n1 Z3 e% _$ }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
% X8 C; d n2 T/ R4 H5 y% k r
border-bottom: solid 1px #4e7dc1;
1 a3 d. P9 j1 Y9 U( E& m
border-left: solid 1px #aecaf9;
! t2 w+ Z" q/ Q( K
border-right: solid 1px #5679bd;
1 S3 J! s3 m, l& o1 j
padding:1px;
* s7 W$ C# n: [
margin:0px;}
! d9 E& [# t% v5 o7 ?$ N( ^, N
</style>
$ a% N- |! d8 [" _9 q J& Q3 d
<script language="javascript">
- B5 W7 S W/ v6 A
<!--
* {; Y7 E$ d' g
function rv()
/ k" K3 ~+ P& g& a, U+ c) B
{
9 B" l; k& |* h0 E
var val="";
( o* I* \ i- `3 w6 f
for(i=0;i<combo_box.list2.length;i++){
1 Y4 e# z' {8 ?
val+=","+combo_box.list2
.value;
4 _6 O1 }& l* p6 w2 G9 o9 d
}
/ m2 c5 A. c- v/ Y+ [6 H9 Z; s
if(val.charat(0)==","){
8 j$ m$ J+ W# o$ i, x8 W8 ?& a
val=val.substr(1,val.length);
2 j1 A& `0 @: Z: {. ~& s. b) I0 V) T
}
u3 |6 p4 F$ O" K0 c- I
opener.form1.frecname.value=val;
u& Z/ v' F2 D! g' v
self.close();
' v' Q; w/ z4 d6 @- s7 T( Q6 N, O4 \
}
6 v+ Z% q$ }6 g
//-->
/ p k$ u1 o Y2 @0 I% n, f
</script>
6 K% \% g% F# i5 B# s
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 \2 }/ R! @# @. i
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
3 `6 f$ H! x# @7 D4 h# G
<%
* V/ \3 d% `8 N, W# I
cdatasource ds=new cdatasource(); //数据联结bean实例
4 a' _1 u; h! j4 S$ R
java.sql.connection conn=ds.getconnection();
8 {) L% U" f' v: l c/ |' @
java.sql.statement stmt=null;
- Q) {6 L8 k, Y- ~( e: T
java.sql.resultset rs=null;
7 i" }; G: b0 u, G7 P0 }" X
cdatacheck dc=new cdatacheck();
& K9 C) z8 k6 l$ l& |
%>
5 i& f; Y* V8 k; p% Z6 ^
<%
+ w. S/ z8 [" l0 p2 t+ 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";
2 ^9 s* V9 O E0 g% ^- k" h
stmt=conn.createstatement();
+ T: t! `% `; ]4 ? O5 @3 p0 @
rs=stmt.executequery(sqlu);
6 [7 w6 e# C' X0 I+ c5 _
%>
% H+ N2 [; n C f
<script language='javascript'>
% @; l6 R; i1 }+ H
arr = new array();
& b; p: d M3 R: s: p
<% int temp=0;
0 T" r. |8 u( R: n2 M* ^
while(rs.next())
) A# U* m3 h2 u6 {
{
6 ^8 h" t. f: ?" q8 X( q2 @
%>
5 O3 S# E. g/ h2 t: r! R# Z/ v
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
( d; |, U8 f8 M8 g! y! u& W
<%
: w( R& d) B6 X m% E
temp = temp + 1;
, L; o" w, W6 W- G) F
}
( S3 R- }1 d/ C& o5 W3 y- d0 j2 V8 O$ L
%>
, _$ j+ u8 t5 t
temp=<%=temp%>;
' P. e5 l! B$ m- Q1 [) e
function changelocation(id){
0 X/ n/ Z6 ]2 Y& J+ Q- ]
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
7 z5 Q4 P5 \0 V( K
var i = 0;
5 u! G- F W: p
document.combo_box.city.options[0]=new option('-------','');
) @0 n0 _& m. W( N
for(i=0;i<temp;i++){
Y- E; r' g% D0 A0 g9 q
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
: f& t4 _; E# s2 X3 s
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
% G5 n+ F$ k7 J/ L) ?
}
0 B" L1 j* x6 t' H2 G7 s1 A% |
}
/ A+ K, C1 x1 C0 ~! d3 _) M# K
}
2 v1 u" R8 u, d# I
</script>
: J- K7 ?( h) e: f
* g% K9 W! e+ C- ]4 ^# d
<form name="combo_box">
, L9 ~$ [3 s+ D* h$ `# a5 S! B# ?8 E
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
2 |1 R* j8 N, t
<tr height="24">
5 Y) r9 d1 Q5 _8 b
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
1 E* g4 a4 q( S+ N$ O7 t6 v
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
( B& J4 {' b" j V; Q
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
: [3 j' r' t% {& z5 F) l6 q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
S# ^* M5 [ d U) n0 r# A1 f9 _
</tr>
2 Z; j7 b1 N: D% `% s; M6 L
<tr>
" j$ B' U' s2 r5 t+ @; I
<td>
+ @4 Q* @/ Z: N
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" U3 E5 `0 n% J) |0 D- b: j) x$ l
<option value="0">请选择部门 ---></option>
& a. r- C/ t; k
<%
8 G! H" w2 Z1 N2 z# G
string sqld="select * from tdept";
9 n: T. y: E2 Y7 U+ J) b: c/ ]" L
stmt=conn.createstatement();
8 A6 n1 W1 n/ H7 ]4 T' M; W! y% h
rs=stmt.executequery(sqld);
( `& e) `, Z# N% C
while(rs.next())
6 y# ]% i# U. P+ r
{
% E; i! Q Y3 _
%>
4 U4 c, r H1 k6 h! [
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
- W( [! u+ W2 K# M( ?2 k6 V$ C5 Q+ f/ z
<%
0 |8 S9 I& P( v4 Y3 l% @
}
) r1 L( r$ M! }7 t: _
%>
- @, k# @+ X/ [/ F- u: v h
</select>
' l+ w) d& U( E
</td>
3 f# V8 L* {# u* p4 D) H1 \
<td>
1 s: _ K1 r' p, g
<select multiple id=city style="width:150;height:200" class="bgc">
* x) W6 k7 ]0 |7 \0 a
</select>
3 |3 o9 z% ?3 J2 \; g3 I
</td>
1 v3 M1 Y$ F3 ]6 C! b
<td nowrap align="center" class="bgc">
; z0 k: x# Y8 V! h! J3 p: I
<input type="button" value="<<" class="buttons">
* D# m. o9 ]& q) U5 C3 {
<input type="button" value=">>" class="buttons">
% v8 n, f% N: X; U% q
</td>
$ X) D& l1 m( u9 E+ P
<td>
( m$ I) k6 A, }
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
0 e: b) G _ t W
</select>
; B1 `4 k3 G/ m$ n
</td>
# V/ \, n. j( f+ b7 D. |
</tr>
+ t5 _2 n1 M/ e- [" x
<tr class="bgc">
) F- I( e1 g- s6 H! A. S, l
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
$ y+ w4 h" h5 \( ]% x
</tr>
+ U; T. t* W) _( s1 \1 ]6 t! I
</table>
! H$ r# \# F) A t( E
</form>
# Y% P* b9 N! [6 L
<script language="javascript">
( M- `4 _+ G% z2 ] N
//人名移动
) r$ M" K* `( E
function move(fbox, tbox) {
1 }2 g. N' U8 _6 v
var arrfbox = new array();
p" q$ U. f q; Z6 B* y$ e7 E! W
var arrtbox = new array();
& A# C9 z: `, Q# H1 `6 V* r
var arrlookup = new array();
5 q0 m4 D- c# T8 ?- b
var i;
8 X4 X _/ f+ q$ m3 H
for (i = 0; i < tbox.options.length; i++) {
1 l( `8 E( T4 n! e4 T
arrlookup[tbox.options
.text] = tbox.options
.value;
7 }/ z, l1 P+ K ?0 j" C* t/ X
arrtbox
= tbox.options
.text;
/ d' L6 U* x2 S( A
}
; A* X, U8 b6 W
var flength = 0;
5 [. A, ^4 o" B3 I8 J0 A
var tlength = arrtbox.length;
$ p+ ]# p9 d4 U3 T' O o/ }
for(i = 0; i < fbox.options.length; i++) {
- ]; C s8 D* Y7 u7 F- P( r% Q
arrlookup[fbox.options
.text] = fbox.options
.value;
, r) _" C) C2 U8 i9 {9 C% x# v7 |- {
if (fbox.options
.selected && fbox.options
.value != "") {
/ |' {% |; E; o2 \: p& `
arrtbox[tlength] = fbox.options
.text;
* `3 G& }& ]5 D3 D
tlength++;
5 K" W6 p$ @/ Y
}
3 \' o& Y/ Y0 m9 o# t
else {
; ^3 \& o1 i6 Z( W6 h, c
arrfbox[flength] = fbox.options
.text;
: f2 t/ X; n4 Q$ W* S
flength++;
' k) b) ^( y$ ]) b
}
: N) ~4 ~- X' A& @* l
}
5 x! e' @- \8 o! l" t
arrfbox.sort();
9 u! ? M# i9 `9 D" L/ ^
arrtbox.sort();
0 b5 Z9 B2 Y/ H) k/ a- H2 z* k
( A% i& B, t% S$ @' L
fbox.length = 0;
" @ |1 h# w d3 x1 E0 I
tbox.length = 0;
a* i5 X3 O2 U7 g6 g8 p0 z
var c;
9 Y4 ^0 [& N+ u# T. N3 \
for(c = 0; c < arrfbox.length; c++) {
$ A X" L! C' p
var no = new option();
0 I1 r! `" b5 Q9 |
no.value = arrlookup[arrfbox[c]];
- v+ Q$ H$ m3 ]9 g6 B9 q2 [# _( y+ F
no.text = arrfbox[c];
% Z% E# c! s7 Z4 z
fbox[c] = no;
* {1 t- l- [* K( F3 h5 c$ O- M8 Y
}
' R% `% `; X: G8 c+ h
for(c = 0; c < arrtbox.length; c++) {
" l3 ]0 e: U2 O; o3 L! i
var no = new option();
: f1 Q: y# m q0 b# O- N z
no.value = arrlookup[arrtbox[c]];
1 q7 V; Q. ?, c& Y4 [
no.text = arrtbox[c];
# [8 G0 t+ g, ]0 y
tbox[c] = no;
3 _$ p$ a2 z' C
}
n" p( h+ H7 j! T; k& c4 }( G% V
}
0 i; s2 T' o0 I9 ^# h$ R3 w
</script>
* P3 r; m4 U9 p o. _ z
</body>
& O2 E5 m) r* T' I
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
