标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
$ [( }* O5 \, b6 l# E' f
c pageencoding="gb2312"
: i7 c( C2 G/ H1 T& J& n
%>
6 ~! X7 t% ]7 G& P9 |/ v- v
<style>
) c7 E8 }+ U/ X
.f9{ font-size:9pt; }
( @6 H6 S( |$ A8 y; T
.bgc{ background-color:#aecaf9; color: #0033ff }
* N0 L4 i- @& P- x5 j8 `" A
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
! D) ]) S1 {8 X+ a: R
border-bottom: solid 1px #4e7dc1;
' T. P; T1 A1 R( t A
border-left: solid 1px #aecaf9;
' G& B, j9 U1 @% S D
border-right: solid 1px #5679bd;
* _& C/ o: @* `2 Y: q5 P
padding:1px;
- q2 B& E" |; w: O
margin:0px;}
$ D, O9 @2 N; h: j" ^ n, Q
</style>
* K! N; M2 Y+ g$ X6 \
<script language="javascript">
1 [% `, K. G' }: |
<!--
2 q2 Z9 F8 H' p9 W& }( f8 [
function rv()
5 W F% @ K" l: z9 {% q- J/ [/ X6 q
{
! k) E: M. }8 n3 l6 \. M, k+ o
var val="";
9 ]2 Z& V2 M- @- X$ F
for(i=0;i<combo_box.list2.length;i++){
& t, J; s- ^' c D0 _
val+=","+combo_box.list2
.value;
* E; M2 `- Y& R* k
}
# i" g/ g. U% N4 d) K
if(val.charat(0)==","){
( R$ c( Z- ~& C; ~: Z
val=val.substr(1,val.length);
8 Z8 Y; ^, c1 p$ q j
}
+ q* ]( y- |2 c( F% f3 n: a$ |8 o
opener.form1.frecname.value=val;
+ g+ I; d* u: c
self.close();
7 d% [/ l; e. R- Q: `. X/ b
}
5 n F5 k8 o( s
//-->
" `- b/ V* O/ F0 ^7 m/ R7 j. V
</script>
/ t5 P% G' W! V( e$ N6 |4 P1 Q) F
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
p V! ^) r- L" B C
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
0 H7 g2 t: A: k. J: c6 Y9 W( s& V
<%
* c8 B7 |' O7 u' ~ C; b+ E% ~
cdatasource ds=new cdatasource(); //数据联结bean实例
0 p4 o% g1 r8 B& H" E1 {1 h
java.sql.connection conn=ds.getconnection();
$ u& _2 E d+ B! z9 [
java.sql.statement stmt=null;
# @, {6 X, J# r
java.sql.resultset rs=null;
+ c4 `, F" X8 u
cdatacheck dc=new cdatacheck();
* D: X# f- M- o$ p, x1 K
%>
/ M0 W( H' ` r" U6 q
<%
) B% j5 g$ M* r' j/ N
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";
6 x2 e9 R I# e: o$ s6 P7 v
stmt=conn.createstatement();
) m: `" @0 n [& n
rs=stmt.executequery(sqlu);
" A$ }# R; p$ l3 t" a5 |
%>
& r i( f" ]4 W' I! j- e
<script language='javascript'>
; D* v# z: F/ p+ ^" p; c& k
arr = new array();
' ~5 y( W6 d0 g, w9 N
<% int temp=0;
/ H" w5 w7 O' p8 y: h
while(rs.next())
! w. Q% z2 }8 G' h U
{
j4 {: \" r( \
%>
: h0 e0 I2 ^) @; r$ I& t( a+ p, t
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
8 k: ^! Y- U- L) {( T2 I# T
<%
' n% x% o$ y0 S+ B, X: L
temp = temp + 1;
' {4 ?# |# B% t8 b" w7 Y
}
' b. k7 c& q, W b
%>
- c1 J1 @5 p* Q/ N* z/ s" C
temp=<%=temp%>;
3 z" _3 C' P0 Y: u' \; r1 k
function changelocation(id){
- r) f+ m E/ m
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
# j0 y* U8 h e0 A2 r/ O
var i = 0;
- G! m* ^. c* j9 @7 M
document.combo_box.city.options[0]=new option('-------','');
/ V, d' b; k+ F+ Q* q D
for(i=0;i<temp;i++){
& S$ `7 d0 a6 y
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
/ i9 y1 M5 @2 z( P2 U P$ e* X
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
2 N5 D" w3 ^' j
}
$ D, Q8 L# `5 t" n' G o4 g [6 L- F
}
2 S1 ?) z: i7 @
}
" S% v: k t& s: ]( M5 ]$ k- c2 n
</script>
+ i( o6 R0 H8 ~% e, o/ _5 Q L
+ k: d7 R5 Z c! t) x
<form name="combo_box">
2 S1 n2 W/ y: B
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
5 {3 I- S! @; o) y/ F( G
<tr height="24">
4 f2 h" Z* o1 d9 y( T' y2 U
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
' x; w: l* z1 D, C. S& P9 l
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
/ l. R- {5 x4 m. T& K. x6 F4 q
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 n3 X. [( I' g' ?
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
1 m+ P2 e! b* n( H
</tr>
/ }9 @4 d7 T. x/ Q2 k3 t
<tr>
1 s0 @ K& ^+ U+ m9 G' r4 ~% y
<td>
9 q. h% U3 x2 N' l; {
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
0 J$ w q/ E/ |
<option value="0">请选择部门 ---></option>
2 ?2 k% G0 }6 f7 g5 T
<%
8 M& S4 p9 N) ^ ?, O% w* m
string sqld="select * from tdept";
6 I1 i. Y2 y/ u3 P' F
stmt=conn.createstatement();
( K& E2 ]/ Y& ~' ~0 ]- A" `7 |
rs=stmt.executequery(sqld);
, L% f# A9 P4 J# T
while(rs.next())
: | E/ u. ]. A A- ?
{
* }9 [0 g% D9 I1 g5 C3 u
%>
& J" f5 D' f" S0 }
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
) k l4 N5 ~/ C0 J
<%
; q8 n2 d, J3 J% x- p, O' T% N" z
}
; H; ?4 V% ~" i3 S& f) w' ~
%>
6 ~8 e! \) M' E$ D! Y3 Q8 d1 a% B+ \
</select>
5 {" w& o( W) o' w$ v
</td>
; s+ V) ?" X6 j* u. g& w
<td>
7 j t4 z* _6 b* ]+ T9 ]& C
<select multiple id=city style="width:150;height:200" class="bgc">
5 ]1 V) [$ M/ D! M
</select>
( p- t; A4 v: D
</td>
$ U* Q0 K3 \/ P* V
<td nowrap align="center" class="bgc">
5 h- ?9 M! B7 N1 ~7 g- E
<input type="button" value="<<" class="buttons">
0 X( e# D* N; [6 ?8 e' _8 g$ x
<input type="button" value=">>" class="buttons">
; ]+ t8 x% Z, B% F) T7 f* n
</td>
* K, o) b5 E8 B" C2 N" Y
<td>
, Q: l% ~. w3 x
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
! K- t/ s- V' `8 r; O
</select>
3 j+ s c8 ~ g
</td>
/ f6 T+ d& C# y' Y2 w4 Q5 z1 W
</tr>
$ v1 ~3 W; ]0 Z# H
<tr class="bgc">
, v# ^+ k P% F* A7 M! I* `# j
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
$ j* s; Z8 D, l! q+ M
</tr>
2 d/ y6 b2 C! L) U7 S4 ^" ?) R
</table>
9 S9 P6 _8 ^5 ^+ [' B
</form>
- ~- _2 O- `3 N5 z8 r: p: O+ }
<script language="javascript">
# i! m" \4 |3 k" t- d; s9 _# e
//人名移动
+ H; C3 H; i% J
function move(fbox, tbox) {
, V. W" \4 K( M. W5 U5 B
var arrfbox = new array();
. [/ f; q. R* X! E% f" \6 C% J
var arrtbox = new array();
8 k7 U. K/ X0 w
var arrlookup = new array();
; t/ X7 [4 W& W: Z% j5 e( F
var i;
3 a* G# P4 w* r4 G, t) A! m) ~
for (i = 0; i < tbox.options.length; i++) {
- p2 K7 Y' E3 |* \" X0 W
arrlookup[tbox.options
.text] = tbox.options
.value;
8 x7 [' w0 @, O* Z @8 E
arrtbox
= tbox.options
.text;
& b4 l S4 u) z/ Z# S* }3 Z
}
0 Z2 e: g+ J! e0 {; t, W& o
var flength = 0;
; k. X1 g; M) C. w* `" q" |
var tlength = arrtbox.length;
2 q, A9 e5 }! u4 L. |
for(i = 0; i < fbox.options.length; i++) {
; \1 f4 @; g- j
arrlookup[fbox.options
.text] = fbox.options
.value;
c8 ]) v4 L+ b" l) [- v# O0 V" I
if (fbox.options
.selected && fbox.options
.value != "") {
, D' c8 M! K. y0 Z* @! I/ Y
arrtbox[tlength] = fbox.options
.text;
6 q# k' |( n- Q; @+ z
tlength++;
1 ^1 [! Q U/ C, o3 z: V! H9 ~
}
5 a5 d D0 \. n! p: T3 J0 z" x$ r
else {
. Q5 Z2 I7 }* q- T+ {/ z
arrfbox[flength] = fbox.options
.text;
4 q) j8 r! T7 o: \ n8 b: y
flength++;
$ t# P% e$ S9 D; K! P- k; A
}
2 f/ E+ r: |3 q" |& ~
}
5 b2 p6 _, ~2 d1 C7 ~; |3 S. P9 T
arrfbox.sort();
0 @& [- p# P h+ V0 Y" J7 o
arrtbox.sort();
) z7 W) m' F$ J* K6 |
# @+ h3 n/ @( _4 j! S2 y' E
fbox.length = 0;
: s% L( i2 k, b6 o1 ~ R# C' P0 u
tbox.length = 0;
& ^0 ~. O6 V) @8 K& t7 _! r0 ?: G3 {
var c;
2 q. {9 U& _7 r( Y1 |( O
for(c = 0; c < arrfbox.length; c++) {
) g. N- Z( d! V \, y7 F* R
var no = new option();
2 ^# U+ Z' ?3 @" o$ y, `
no.value = arrlookup[arrfbox[c]];
9 l1 l- D. e4 E$ Q) w% d; D
no.text = arrfbox[c];
' k- v4 I1 x; b4 O
fbox[c] = no;
# w( Q& ]" a& x6 H( r r% X% a/ w
}
% c0 w: z( Z9 E; H& P6 W( g6 w
for(c = 0; c < arrtbox.length; c++) {
1 N2 U! n' H4 l; B; _
var no = new option();
/ ]9 U, Y7 y7 W9 S9 y
no.value = arrlookup[arrtbox[c]];
# t4 ^: G7 u' P6 B9 Q
no.text = arrtbox[c];
, n. m0 g* E6 ` f* X3 ^
tbox[c] = no;
6 h i4 [! Z; z7 {0 Y3 c& x9 s
}
: d/ E8 J+ D N: H% a
}
s& F2 C% I5 u6 z0 q
</script>
8 F) m1 {: m: x l6 l' \& v
</body>
4 e& t# J+ M' P3 N& F* b" K
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
