标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
3 w" D' f* \" \/ U( C8 k% H9 ?
c pageencoding="gb2312"
; J7 S+ K8 U9 y& T( T. ~
%>
4 e1 `! t {* Z) F
<style>
) z, |1 ^, \% d' o) h( y& R, i
.f9{ font-size:9pt; }
/ K; l0 c5 U9 m9 S' K0 x
.bgc{ background-color:#aecaf9; color: #0033ff }
. H K7 j3 z- k2 m2 }; }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 a* o' z8 U6 ^) @ Z
border-bottom: solid 1px #4e7dc1;
) V1 k% _! I9 A$ [& x) O
border-left: solid 1px #aecaf9;
- V3 Q' X9 q1 w4 f
border-right: solid 1px #5679bd;
8 e+ Q( i$ P% B7 \+ o% U; O2 b( L. h
padding:1px;
3 F8 k8 R, |6 |1 c
margin:0px;}
4 y7 ^$ M1 f: ?' p/ |4 i: W
</style>
/ B# i; e, @! C1 |+ a( V
<script language="javascript">
3 C) B5 ^8 P( d& \- z4 Q
<!--
9 P& u3 F0 O6 r! _! [
function rv()
; L, N" O& q" M, j) O6 t$ }7 F
{
# p/ \6 O; k D8 R# |
var val="";
" W% _+ `/ e+ d. ~4 K- Z! S! n
for(i=0;i<combo_box.list2.length;i++){
/ {6 O v# x9 Q$ k
val+=","+combo_box.list2
.value;
" ~5 g! {) K; O! h
}
. ]# ^! L- y- x; n
if(val.charat(0)==","){
. F0 d4 r! t8 b E7 w0 D3 h
val=val.substr(1,val.length);
4 ]$ f7 |* t5 k! N3 @! O! F
}
+ }' u2 ?9 m# a" P/ Y' S- {
opener.form1.frecname.value=val;
5 h R8 Q+ H _5 h+ M
self.close();
|) w3 {+ I9 d* Q. j
}
8 {6 i b: k5 \/ A+ P
//-->
$ m6 f2 m0 W) r1 Z
</script>
* G' s ]4 x7 Z u* b9 F
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
# F L& U; S1 {4 V, L( m
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. N& L/ N, k$ E: B
<%
9 s" ~; Z( }. y
cdatasource ds=new cdatasource(); //数据联结bean实例
1 o) V6 r5 B, e3 f# l: H2 v
java.sql.connection conn=ds.getconnection();
1 y6 [# u: }; ]4 K. ^7 @( R7 G
java.sql.statement stmt=null;
5 o8 R) Y* o# _3 V; h/ N
java.sql.resultset rs=null;
4 L4 }) d5 C, c
cdatacheck dc=new cdatacheck();
6 B7 A5 z+ x0 Q$ T, V/ Q% G
%>
$ G( h0 V& @- l* T* J+ `( s, |
<%
+ z, J+ |- ^9 @
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";
5 U4 x F: T& D$ M, b& D1 \
stmt=conn.createstatement();
% Y4 u' d% v! ]" W
rs=stmt.executequery(sqlu);
6 b) Y0 r% }" c; \( B, M
%>
' @7 G7 P8 D* t# A
<script language='javascript'>
$ `4 V5 h9 x! U- _ ^. y
arr = new array();
7 ?5 }/ S2 U; Y2 ?2 x, q
<% int temp=0;
/ q0 H9 |& v) L, y x0 M
while(rs.next())
6 s& m" w3 i3 l4 B6 j. [2 t
{
$ K, P5 k4 q: G/ a
%>
: C& [$ K1 D- y- L, |
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
% u. t5 L, m7 t* s! ?4 S' X- t; h
<%
, j6 j# R" n6 m8 S" L5 q1 g- k& ^
temp = temp + 1;
* i8 I0 A% X+ s( F& Y1 { R/ h
}
3 I% U" t( y/ ?' Q8 r @$ G2 `( _( e
%>
) t( [7 }9 _8 O4 R
temp=<%=temp%>;
- U0 K( D" K7 c5 L# g" E
function changelocation(id){
' ?1 y/ u+ O! f
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
9 x! U5 V& f+ T/ e2 N* c' }" v
var i = 0;
8 k8 @ V- a) v, V/ r4 H; z
document.combo_box.city.options[0]=new option('-------','');
, W& F5 C9 `; }
for(i=0;i<temp;i++){
( S. L, f: c% X' R3 p
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
3 {+ G( o+ M. R& F- t9 P) d' Q
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
# H' d' G8 U2 t$ [# L2 e2 [
}
; j# J) n3 ?1 y# g* U" }
}
) O1 G# `) F8 T2 Q* p! [& I F% M
}
& {: \$ m' t6 N/ d* d8 O5 ?5 @
</script>
3 `4 _+ d" O s }3 ~
) x. k- t0 S: g) k, P0 A
<form name="combo_box">
' f3 ~" J9 I/ s+ T5 ~. h
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' x+ E! D' ^8 F: \$ ?
<tr height="24">
( T7 `) U" ]" ]
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
; e% {0 e2 t& G/ a& p
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
2 d) Z2 N# d( }3 J$ k
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
& R4 {# G& m9 N& K5 n" f6 r! g2 w9 y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
. e6 c8 w; c$ E- E5 `
</tr>
4 l& R2 ]" g9 _) _5 [2 D" I: c( N
<tr>
! u; B) z& c8 z0 q% h8 V
<td>
7 y4 x, d% y6 K3 R0 V
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
- Y) x) u! X0 o$ ^/ g
<option value="0">请选择部门 ---></option>
7 J% Y! y0 Z5 ^9 C, O
<%
% O) Y* I! \- n. i' f$ @4 N( ?3 [
string sqld="select * from tdept";
' H" O: w. K. g& w; T: y
stmt=conn.createstatement();
T0 z: n9 z4 D2 ~2 G5 [
rs=stmt.executequery(sqld);
# `+ [/ x0 H3 l, l* q6 @% }
while(rs.next())
/ @% n9 H6 ]0 ~/ d3 }
{
+ ?, p* K G( d) q+ B8 a: k c
%>
6 w& P7 ^: I. Z, K* [" I+ f
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
7 t" l) H/ l+ _& e [& D
<%
1 b) m* n0 {/ v6 D' u4 p
}
5 \! Y. I0 [/ ], B$ [2 E- @
%>
c8 W/ A, H2 w! u% u
</select>
5 q1 L% Z: ` T/ s( K! f0 ^7 |
</td>
; j/ b X4 q) v# a9 S8 ?- L' L7 j
<td>
3 U/ ~, v. p( O ]
<select multiple id=city style="width:150;height:200" class="bgc">
_7 ~7 z: b3 S: p
</select>
. y5 g$ l" A8 y8 v5 _1 k) q
</td>
9 i+ h0 x5 k3 @/ h/ K4 g
<td nowrap align="center" class="bgc">
v/ X9 j0 R/ z# U: F7 O
<input type="button" value="<<" class="buttons">
) j/ Y( o) p7 p
<input type="button" value=">>" class="buttons">
- [3 g' V( Z6 m. n7 e$ `2 _" H+ b
</td>
+ A6 z: T6 {9 k6 C4 d" `4 g: y
<td>
: n0 j3 O) N2 W* Z n
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
0 e* W9 x7 j6 K! b' A" }2 S
</select>
" B3 Z; h+ u0 {& I# F3 b; C
</td>
8 }, o& y4 r Z% D/ `3 ^: c" V4 @4 [
</tr>
# _$ R4 k. T0 L+ W
<tr class="bgc">
: i) f& @* e- n2 D4 _4 T" G
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
! D+ Z! j* F: u8 N3 J, z0 v
</tr>
) a9 e! \& Z( Q. y/ T& i* o; R
</table>
" ^( j& @- j) _6 s. ~
</form>
+ x! R+ o: {5 w
<script language="javascript">
, n4 H; \8 P, |- D8 @9 P7 h' X
//人名移动
: y* S; T+ O5 K1 ~( Y
function move(fbox, tbox) {
% o4 b" L( K7 v5 b; n F
var arrfbox = new array();
; p- F/ j; o# F1 V# u G
var arrtbox = new array();
5 A" C0 W, }8 f5 {% Z
var arrlookup = new array();
) \7 U6 i( Z* X" Z! D* P+ P
var i;
. i5 ~7 T* E% O8 @( x
for (i = 0; i < tbox.options.length; i++) {
7 E. _5 C2 e0 U" D1 |( M3 H
arrlookup[tbox.options
.text] = tbox.options
.value;
; ^4 b; y% W) h, j0 l
arrtbox
= tbox.options
.text;
' a8 N! F F, r! \& m0 @
}
* K4 \+ R- K2 ^9 X( @& z
var flength = 0;
, m+ _! q& J2 h" V' [1 {
var tlength = arrtbox.length;
& O! q! R N: I1 |& T9 U
for(i = 0; i < fbox.options.length; i++) {
: N6 X1 K' t8 ?2 H h9 O
arrlookup[fbox.options
.text] = fbox.options
.value;
8 H: C2 R; {0 \% k# }' j6 H
if (fbox.options
.selected && fbox.options
.value != "") {
! |) M# p7 s; \ \
arrtbox[tlength] = fbox.options
.text;
6 N: X: |* d* S+ {
tlength++;
0 M5 ?0 |8 v9 W5 e: l4 a
}
# z, t# J3 c) F/ _7 Y h) S
else {
" O/ ^9 l0 z- f, r4 K8 r5 T
arrfbox[flength] = fbox.options
.text;
/ i7 G0 w2 V3 S0 o+ |/ d
flength++;
( J5 A/ u9 }5 F1 f0 l. L
}
1 j4 h/ f& N+ n) i+ s
}
* G3 J# I6 H0 V: a$ h
arrfbox.sort();
- J6 J9 }( z# C! f
arrtbox.sort();
* T+ I" w/ b' d% n0 O
/ A4 i& J* c$ T+ J E. y
fbox.length = 0;
, N; I T8 y0 C
tbox.length = 0;
7 h0 D% @2 c3 b$ e0 J! K
var c;
' E' S+ \7 U( [3 @) x7 r$ ?' l. E
for(c = 0; c < arrfbox.length; c++) {
4 `0 [5 [! Q8 `! O) F5 l
var no = new option();
, F/ m5 p Y! \- s9 O. V- Y- ?/ e; A8 Y
no.value = arrlookup[arrfbox[c]];
6 ^+ u0 `$ E) D8 R1 i9 O* @* O8 `/ l
no.text = arrfbox[c];
# v+ o4 m; v/ H7 ~3 T$ D% y$ m
fbox[c] = no;
& Q) ?7 O+ P, M4 Y4 l
}
/ L& [2 u5 l5 g; w2 o$ t! Y
for(c = 0; c < arrtbox.length; c++) {
! W. E) {" y5 Z1 F3 t, s( P0 N
var no = new option();
. P& Y) W' X. \9 ^
no.value = arrlookup[arrtbox[c]];
- e3 I8 R1 l$ v% x- }% B! h. T( s
no.text = arrtbox[c];
/ x# i5 L+ f2 p+ B: D
tbox[c] = no;
+ ]% K+ O* Z( Q/ R
}
: f( q! y& q9 w+ H; s0 b1 P
}
0 d7 b2 n. m' D, G$ D
</script>
! s5 |2 [) h9 Q3 @
</body>
, f( i) p' `6 U" n5 V4 B
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
