标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
6 M! ]$ w2 h8 A
c pageencoding="gb2312"
* o! o4 x# I" C6 r& d1 J
%>
- L, U8 C9 |6 O' M. A
<style>
1 e4 ^. S# w& Q! i
.f9{ font-size:9pt; }
# w/ l2 D. a h# z% ^ _8 @5 T
.bgc{ background-color:#aecaf9; color: #0033ff }
0 J+ Z; e+ p& j2 ~0 b6 s
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
/ Y/ Q+ x% t* R1 y
border-bottom: solid 1px #4e7dc1;
0 u$ T" b( P7 V# j9 B3 o
border-left: solid 1px #aecaf9;
, n$ l8 I8 `) t. l% |- y1 M% T/ y% y
border-right: solid 1px #5679bd;
' Z# N# p' L8 G/ G2 q
padding:1px;
; v3 }( d8 N, B# a9 F z3 Y
margin:0px;}
% o& p* z2 `- S! }6 E" ]
</style>
$ z9 Z i& s8 I* T" m4 `! [" {
<script language="javascript">
$ ~# n5 U2 b! R* f ^* j
<!--
) W) \1 [; @3 H" }1 C+ O
function rv()
D7 m6 D- K* s
{
8 ]$ d1 J" H6 s- }4 e3 p+ R, r) k& o
var val="";
) K; A4 F/ c* }
for(i=0;i<combo_box.list2.length;i++){
m7 j; O4 `& N7 B5 S6 {( n
val+=","+combo_box.list2
.value;
& ?& l" L, K, O; p! t2 R& H0 t# K* n
}
7 p6 t$ a: ?4 w$ n7 W$ I
if(val.charat(0)==","){
- ], f; _0 |+ Y. {
val=val.substr(1,val.length);
& k# R- R1 V. `' L, l. R! E
}
7 v- G" @4 R' s1 f6 k
opener.form1.frecname.value=val;
, ?8 W& M# v8 n5 ^
self.close();
]( H+ c' V3 T& [3 K7 m
}
% j# i" |1 ^# n$ U
//-->
0 F, _: v- R* I
</script>
& r( v, m: t0 |/ F; Y
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 V; f7 w; Q0 \9 C# A
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
! E n6 G q9 i/ G, A: A% C- r X' ^
<%
# N' n& D7 u$ Y m) S# C/ M" U
cdatasource ds=new cdatasource(); //数据联结bean实例
y4 h4 {8 A _* c
java.sql.connection conn=ds.getconnection();
, ~) E2 w2 ^' L0 l* P4 B- o
java.sql.statement stmt=null;
; |8 f9 w) l" v9 J# |7 n5 A
java.sql.resultset rs=null;
/ N6 n* l$ \" d
cdatacheck dc=new cdatacheck();
& m0 S+ I: T& }( D1 c6 G8 ?) [
%>
3 O: |( j4 J c+ o6 f
<%
1 n5 k& B6 Z6 I3 k
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";
' u6 @3 p/ i( ?- Q5 d7 x; `
stmt=conn.createstatement();
% t4 r+ B( K1 ^: r! S: o0 z$ w0 C
rs=stmt.executequery(sqlu);
l! S7 p0 P3 ^1 c2 o* X
%>
4 T f5 R! O( x% h. a
<script language='javascript'>
$ d l/ Y2 J h$ j8 C8 w3 m7 v- u+ ]
arr = new array();
, ^0 U; P. X, l, C7 e! X9 r1 f
<% int temp=0;
3 {* K! n& T- m# O
while(rs.next())
8 w, H1 h! g5 _$ _' ~, v0 P
{
: s9 ~7 j5 @) S: Y! k, F
%>
5 y3 c, h3 h$ L' A$ U, X% i
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
& x& ]% c# d) @# [
<%
( F1 E8 P: T' J& B* _5 G
temp = temp + 1;
3 u; Z7 S+ P6 q2 h: T a5 G P
}
' S/ r4 d# k R$ X" c
%>
; A- y* E# t1 M* V
temp=<%=temp%>;
+ X* z: M: ^ N2 @4 Y# T
function changelocation(id){
& D" \' x. T( _; F5 R* l
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
: i: B& D- F, G9 }7 P
var i = 0;
2 V" c) o( L' M' H; w! J8 j7 T
document.combo_box.city.options[0]=new option('-------','');
- U' R" r/ e) k* C* i7 l% J! N
for(i=0;i<temp;i++){
* B& F7 A# }. `. I3 c- `0 |
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
, |) }* i* r1 M
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
0 `$ D; L7 V. q* I* L; ]* v
}
( O! X, H2 {3 A2 k' i f- z6 i
}
! j% l1 Y- {3 ]' ^
}
4 ~' L' u- R, `: D I# h3 n. Z* a
</script>
' U& G5 o. N& ]
3 S6 L& D+ ?: F; Q7 s1 a- j
<form name="combo_box">
8 y9 e6 v( r9 s5 P% d6 G; ^+ H
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
# Z3 E7 ~, Q: k% h$ \, m
<tr height="24">
2 B- }6 ^& n. Z6 S8 p6 s
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
; z2 u2 V! k3 ] d4 P* Y9 C- X
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
6 h) _+ B7 L! L+ N- u% e
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
9 m: ]7 O* K8 i H8 T# o' h/ c2 D
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
. y0 X& b2 {4 y% b
</tr>
5 z% A0 Z; e5 u9 K q& ?, k5 I
<tr>
2 z" f$ K: F( h* n8 [
<td>
6 Y8 a7 J. g2 U2 f
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" ]2 l- ^/ j2 {) Q
<option value="0">请选择部门 ---></option>
+ o. ?6 K: G0 u, @
<%
# S; j6 M; T! ]* k8 {) m; ~
string sqld="select * from tdept";
& j6 \5 }7 k- R, H$ ^# z8 T; l0 P
stmt=conn.createstatement();
/ }0 g+ g+ @$ w; f1 k* b) u
rs=stmt.executequery(sqld);
! V" `4 `5 y& W' o1 w+ C
while(rs.next())
% P6 l3 r# j+ l3 Q* ?% x$ Q
{
- g0 d+ `/ S, g6 d: ^. t* y0 |* I5 a
%>
. X6 g# a8 G g o2 _4 a6 g0 K2 K
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
) h; o4 i1 Q' E( T! g
<%
' s) w0 z+ {6 K9 f w) V5 @2 _
}
9 B( ]5 F# Q% _0 v
%>
$ d5 C" v \' g Y, J0 K
</select>
' O9 h6 \9 p a$ b) ]
</td>
* j6 y4 \$ B" V8 O. H _$ O
<td>
* J5 t6 T5 F. F5 M3 l
<select multiple id=city style="width:150;height:200" class="bgc">
- o7 w1 W( _; _$ ^: O9 M: d
</select>
8 _0 g( j& \; n6 `
</td>
" S$ u& I$ q( H. S" S7 @
<td nowrap align="center" class="bgc">
. b# c7 y3 U& M/ U1 f2 R3 P
<input type="button" value="<<" class="buttons">
+ ] Q/ ~, w7 X6 e
<input type="button" value=">>" class="buttons">
# _4 e# S$ {% B& j1 |5 I. X0 S
</td>
6 o1 Q$ l& k# c) `& m |
<td>
1 Z4 A* p/ P4 G" d* t$ I
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, t9 E" l4 K: o" U
</select>
8 a3 n; A9 Q& G j: _( G. [
</td>
7 b$ P. N9 Z9 x
</tr>
: t' P. J2 I4 Z
<tr class="bgc">
3 h( W% I' K7 V Y$ w
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
, _ O2 I; }. B e, N' s8 Z( K
</tr>
' ^/ z/ _# v' C3 k; T
</table>
- L" [3 i; G f! f# O. B
</form>
7 f, ~3 @. L) G" O4 N. F$ e
<script language="javascript">
F/ H7 X# N ?0 T1 v1 a* X2 K
//人名移动
/ `* A" k U1 X2 A
function move(fbox, tbox) {
3 k: Q0 H. c6 v6 m8 Y* r; h$ G
var arrfbox = new array();
, f/ J/ k4 u: `
var arrtbox = new array();
* b9 M; n, K9 U _ \
var arrlookup = new array();
' ^) P1 q& b N! f: w2 P' B$ Z, B
var i;
4 U- {$ W6 d9 E( @
for (i = 0; i < tbox.options.length; i++) {
, E* ~( R4 K1 @! }
arrlookup[tbox.options
.text] = tbox.options
.value;
8 p9 S, c3 }# R, D A" u
arrtbox
= tbox.options
.text;
# A4 R i; k4 |( h
}
- s, D' o, ^9 I* C. p
var flength = 0;
$ V$ M4 j8 P* y$ i/ @
var tlength = arrtbox.length;
, w' ? _' M2 ^" J
for(i = 0; i < fbox.options.length; i++) {
8 D! P# i |5 T
arrlookup[fbox.options
.text] = fbox.options
.value;
w/ b9 {9 o1 `
if (fbox.options
.selected && fbox.options
.value != "") {
4 z' M; d) B: X) k- C
arrtbox[tlength] = fbox.options
.text;
/ [) j! z6 [; Z5 o4 q- z
tlength++;
2 ]5 A' z9 \9 s7 E7 h7 P4 b: z
}
6 L- U$ a4 \- n! A7 `# C% U
else {
& p" I5 n7 c" S; s0 O- U# \
arrfbox[flength] = fbox.options
.text;
o( v1 R- v/ [; a
flength++;
# ?7 }: H! u' @" y
}
7 {& A. {- S& N* T
}
J' I5 R4 t" E+ D* `
arrfbox.sort();
& N8 t( U9 o' E$ P8 n3 h4 j
arrtbox.sort();
4 ~9 _7 _/ D8 X8 j5 E" O
, y5 Y: ^! Z P2 m1 o
fbox.length = 0;
5 l2 T9 o* V' p4 p9 V- p8 ?% n! _5 ]
tbox.length = 0;
2 P5 v T5 Y: A$ u8 G- F7 i( u# s
var c;
( ^* l1 ]- f! v) _% `8 Z* F% N
for(c = 0; c < arrfbox.length; c++) {
( f' [( a$ j1 V b# W
var no = new option();
* O% i: c) B* `& |; g
no.value = arrlookup[arrfbox[c]];
' A5 ^ ^& S7 ] m
no.text = arrfbox[c];
( q7 `6 c) a, m2 `4 O
fbox[c] = no;
5 t h- X. q/ }, _9 m* ~# }
}
8 ?3 x# B( |8 |$ C. J7 O+ U
for(c = 0; c < arrtbox.length; c++) {
# Z* C# o& Q- d1 J G8 r
var no = new option();
* {2 ~/ {# x) d0 p4 O! C
no.value = arrlookup[arrtbox[c]];
. } A; D6 T( K8 ^
no.text = arrtbox[c];
, _8 N' G% D5 e* l; ]
tbox[c] = no;
9 m3 b1 C+ C L+ x& M& z5 G
}
/ P6 Y( _1 S+ Z1 L
}
( I( Z& C. ~! c% n5 {
</script>
- d( x! S8 B c$ d; `. E
</body>
% q; c6 f1 E1 ]8 b L1 _
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
