标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
6 ~" Q, E' e3 K
c pageencoding="gb2312"
8 i0 D' d; o8 O- W4 Q& _# q6 F
%>
! Z, j& R6 Y" p8 C' @/ F5 h6 S
<style>
X& Q2 L' v" ]' V. Z7 H
.f9{ font-size:9pt; }
) h2 T% r4 S0 u% |
.bgc{ background-color:#aecaf9; color: #0033ff }
) Z# ~9 I* ^0 V; Q: ^
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
: I; \& t# {+ A0 [5 R
border-bottom: solid 1px #4e7dc1;
K: G, K5 v# N6 y3 X. [1 ^( Y
border-left: solid 1px #aecaf9;
9 O; Z4 M$ q& s" S7 R
border-right: solid 1px #5679bd;
. B6 R& m- h) X% S
padding:1px;
. _& U0 d% Z* x/ n& |" q
margin:0px;}
' f, e4 @' f/ M& t+ W5 a" P* |9 E& `
</style>
. I" W0 p* o; B' `
<script language="javascript">
, W; O$ k! ^- o( D3 P
<!--
3 L a, P, o" R. }
function rv()
4 G- x" k9 M/ l8 v. K3 W% M
{
$ y/ _5 X. [2 L8 R3 q" P! P0 G
var val="";
& f; |- F1 n# h* R& G$ E$ T
for(i=0;i<combo_box.list2.length;i++){
6 A- ^1 }) |5 x- ?, T. |5 T& i
val+=","+combo_box.list2
.value;
; n0 P% K$ ^6 N7 t2 S
}
+ V9 ~1 ~* s- |3 Z2 R) J* [3 ^
if(val.charat(0)==","){
! N \7 L: x5 B' B) _! c/ R
val=val.substr(1,val.length);
# j, B2 |8 ]( C5 N( v
}
8 c1 Q* q0 t! c( J
opener.form1.frecname.value=val;
4 M; @; I/ {2 y+ t! m- R' }1 W
self.close();
* R( R) `% d% r, D0 `2 d5 e6 ~
}
! x+ z; x% }& ?% z
//-->
5 X( N9 ]' e) ?0 W
</script>
; \8 r% h7 D; q$ n
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
# B L( B% ?; s7 ~' p
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
: s5 Z- R, t9 G
<%
* Z+ G" e& K/ K6 C7 r
cdatasource ds=new cdatasource(); //数据联结bean实例
, \% Y7 Y. `4 p0 r
java.sql.connection conn=ds.getconnection();
( i7 J3 X' D1 D4 v9 T
java.sql.statement stmt=null;
* B4 U$ H- r2 u8 q, J0 R' w
java.sql.resultset rs=null;
. ]8 r- Q& H( Q0 y! {- b
cdatacheck dc=new cdatacheck();
2 z! M: y0 i& m' e; `
%>
/ u k3 \9 m5 K" r' b
<%
; v" u L% h& A/ D- m" J' C
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";
, u ?$ W: x/ j: o9 C! [; T
stmt=conn.createstatement();
7 w- o, I$ m) M% f5 b7 i* l6 l
rs=stmt.executequery(sqlu);
# X- B! M/ |3 K- c
%>
5 I# k( t( l3 N1 `
<script language='javascript'>
# p. B. H6 q- t+ [# x7 K
arr = new array();
% b" |& h3 R% ^9 f1 C
<% int temp=0;
& r% w9 C" S& H2 V6 O% y
while(rs.next())
: F6 w8 A3 D. v5 U' W8 {' d+ q
{
" C# A# t w+ Y3 R, f
%>
( D& E4 G' m0 v& h
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
; A' {, u# n4 C( u8 t9 I" ?9 q
<%
" ?+ f Y: j# ?$ p
temp = temp + 1;
- r) t# S, c* {
}
' D2 `" @- X( i( d$ [ @
%>
( g) Z0 j0 G+ H
temp=<%=temp%>;
8 Z3 u+ ^$ S6 m, a
function changelocation(id){
8 ~1 _/ `/ S$ g/ x: I# }8 M
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
! m6 C( ^2 [$ R& Q1 k) e
var i = 0;
( n& n( S" n; w8 x2 C
document.combo_box.city.options[0]=new option('-------','');
" I# Z) O. T% D" f" d$ z4 x
for(i=0;i<temp;i++){
" d2 w7 x0 J7 e* j6 {
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
! e- R; t0 m; r, j
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
6 U; J: ?# J0 J/ h+ o8 i
}
; N8 w2 \: @* D5 v: Y
}
( j i/ {8 d6 U
}
) R) _: z5 p$ i0 _5 l- f. o
</script>
3 {, k3 a! u4 c4 n0 a
! o5 ?1 Y/ T$ o2 }5 h( Z1 ]
<form name="combo_box">
( C0 V9 g- M \4 X1 a0 V, l
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
+ A) d. q9 T2 j g1 }6 N0 _( r
<tr height="24">
- c J2 o1 L9 B! q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
8 }/ x9 M5 c* L
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
$ x P) n' W' ]. e. J
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
9 p. M5 ]( g4 U4 E% p
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
* S; y- o& p$ V- w0 ]6 F
</tr>
0 }- p+ H$ ~! q; ~5 V) Q8 @+ G
<tr>
0 O* X- T$ H, o' I0 @4 n( Q3 x, k
<td>
8 v/ w. s# s. u B8 B
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" k6 {2 @ R. S4 ]
<option value="0">请选择部门 ---></option>
3 M4 D& V" N: @6 F
<%
( o3 ^4 j- m! v, @0 @
string sqld="select * from tdept";
: Y' u; d# M( c# e6 t
stmt=conn.createstatement();
+ _' F- W |# @& s- V( d2 d3 X+ d+ T
rs=stmt.executequery(sqld);
5 l: O& H7 O# f/ j6 N- L
while(rs.next())
3 k0 y7 Y% O1 y% v8 U4 ]9 Y% H
{
& U. m" P5 d: i4 T* J5 q
%>
4 N6 P1 J' G4 W$ `6 h% ?+ t5 A
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
/ U0 p' }: Q9 Z" z# k! ~
<%
! h8 M3 A% r8 c7 `4 [0 w! _& |8 p
}
$ Y2 L% x8 c0 t" P/ H- ]
%>
4 R, i# x8 M) o# m. e& n4 B
</select>
5 H C+ n0 Y7 W! ?' {5 v. t
</td>
5 K0 u- m8 C6 i2 `9 ^9 B- y- T
<td>
2 a1 U0 D# t+ ^8 C+ b% g2 Q2 l- d
<select multiple id=city style="width:150;height:200" class="bgc">
. c2 X4 w& L4 ]5 k+ E" [
</select>
' L; ?4 u8 c* `3 }) ?( _# p' Z
</td>
# z8 f ]5 ~! i4 j- N& ^
<td nowrap align="center" class="bgc">
0 c% |3 [# W' T' z W
<input type="button" value="<<" class="buttons">
" P, E# M" U6 M; j' ~. c' A7 c
<input type="button" value=">>" class="buttons">
, w! {9 W1 G% A8 q& W: ^- q0 C
</td>
# X! ]! B! ]0 r; C7 ~5 X Q
<td>
! g$ X) M1 c4 V" U/ \: g: h" a" f
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
$ K5 L, [1 }. V* U1 d
</select>
" r& e# g" k- c4 E( G5 K
</td>
% w$ j6 Q1 D' y3 f Z( }
</tr>
* M9 L4 m/ {8 o5 F6 L
<tr class="bgc">
5 e$ X( P4 B' R' w$ S3 g( I$ ]
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
$ |" O" S( ]. C5 X6 q7 Y6 w5 H
</tr>
) n7 A/ v' b8 b1 I1 Q
</table>
* G# D. j# V0 d, ^
</form>
( Y8 K' a. h" G4 T
<script language="javascript">
8 O4 V7 o4 y7 x6 I; ]8 l- e
//人名移动
) |7 M2 O2 E4 T* T. u! t
function move(fbox, tbox) {
3 }, b1 X& z; c# H2 K$ V
var arrfbox = new array();
, v I) O" O9 }& V5 ~, W2 ~
var arrtbox = new array();
# c' S% y$ q1 \. B; m$ E, f
var arrlookup = new array();
2 H. _3 N( z5 i) U
var i;
# W$ [2 Y5 m8 L8 S" G. N9 f! W
for (i = 0; i < tbox.options.length; i++) {
4 l! e! Z9 V& t5 z- t `# B4 H
arrlookup[tbox.options
.text] = tbox.options
.value;
7 C% l- |. ?" g2 s
arrtbox
= tbox.options
.text;
8 r: @; G, @& E& i
}
0 V8 B) H9 G0 O- K3 a3 ~1 _
var flength = 0;
& O) f; R1 ?# @
var tlength = arrtbox.length;
+ R$ i, M, B! L; k u+ g) k# {- p
for(i = 0; i < fbox.options.length; i++) {
+ }* l3 I, R7 s: u3 ?; f
arrlookup[fbox.options
.text] = fbox.options
.value;
7 [' C0 U9 Y( p7 I, n% u& W
if (fbox.options
.selected && fbox.options
.value != "") {
$ @- f1 }4 w" E9 V: h8 [
arrtbox[tlength] = fbox.options
.text;
* B, a Q( s& [/ G6 P
tlength++;
- x9 w* F) p2 f I5 i) C* H; ^4 a
}
2 \9 l$ [9 c) `, y* Q
else {
4 l1 j' m+ O& f5 C! o2 M: ~; `$ f$ S
arrfbox[flength] = fbox.options
.text;
+ d* V3 z' j5 @, o
flength++;
8 g8 H$ D( s" C
}
* E9 N% Z; B( {8 ~+ [
}
; {$ a6 U, d0 q! d; s# |2 q& n
arrfbox.sort();
. n7 l; T! j+ e, G% f5 k
arrtbox.sort();
; ]: B: v# ]) E$ r7 G2 z
, }8 z" I! A" N, f5 w+ Z5 R
fbox.length = 0;
- h( r; S! p7 F9 {1 o
tbox.length = 0;
" U6 m1 b# C h
var c;
5 G& O+ ~2 J5 f8 ]! q$ F
for(c = 0; c < arrfbox.length; c++) {
9 j2 H: q: q) D m# N; s- h
var no = new option();
/ m4 C! V% i% ?0 n
no.value = arrlookup[arrfbox[c]];
5 l/ f6 N _) G) c
no.text = arrfbox[c];
' m, K5 u; K% M4 X0 N; D5 R
fbox[c] = no;
0 v0 F1 A& J% K6 G* ]
}
: _4 @$ x( ?4 @5 ]4 S3 R( E# n, U
for(c = 0; c < arrtbox.length; c++) {
% f F$ @9 T4 y( ?4 I* _; `
var no = new option();
5 c2 o# B2 {" x
no.value = arrlookup[arrtbox[c]];
9 H( w5 [4 b( f0 o4 E
no.text = arrtbox[c];
2 g! _" ?# t- p7 x
tbox[c] = no;
6 K( |* t. t4 |# c) N: @
}
- t4 [6 b& l i
}
* u1 g4 O" X7 |) y6 d) k- g
</script>
+ M' R5 r+ O" t4 [) D% z( V2 S8 P
</body>
8 M$ |9 u# Y* H7 {- q: j* W: y
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
