标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
: `) I2 r7 H+ q0 d
c pageencoding="gb2312"
7 }) q5 b. ~' v
%>
4 F$ a% m" l& I: n2 I* r: k% n3 W
<style>
5 x. I) g5 X& q& O, H5 _( u
.f9{ font-size:9pt; }
8 Q' B' X, S' C5 M' F+ ?
.bgc{ background-color:#aecaf9; color: #0033ff }
* d4 s& ` E2 l; f- c ^% u
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
% X# }% ~) H/ `/ j( @7 \% b
border-bottom: solid 1px #4e7dc1;
0 _" L4 V( R5 L8 [
border-left: solid 1px #aecaf9;
0 ~; Q& s4 u+ v! d
border-right: solid 1px #5679bd;
$ T" n2 u( F) c! L. |5 ]# C* I9 Q% B2 ]( g
padding:1px;
9 I4 z5 C1 B1 T1 F9 l7 y0 G* S0 L
margin:0px;}
$ P% v9 \/ Y% E' E9 \0 P1 t& s9 H
</style>
% f+ m9 `: ^! M+ v4 K
<script language="javascript">
3 H/ P- @( E) X8 y: z i' n6 C
<!--
$ d2 W$ @5 C' r# E- V* c' I: f
function rv()
: a, `) n: ]4 P* M6 v; ^" T( Q
{
( t3 f7 i" T3 p5 ], Z0 C; J8 D
var val="";
8 [$ L5 K+ ?: n/ z; ^) |
for(i=0;i<combo_box.list2.length;i++){
" J) @+ t% r$ o$ o+ d+ m$ b" |
val+=","+combo_box.list2
.value;
& f5 x: J9 S' E# o/ _7 }, v) r, w. f
}
- l. l) i) P G, Y' N
if(val.charat(0)==","){
+ x- Y }+ d- L+ ^6 t: [
val=val.substr(1,val.length);
1 M5 h# P: y% Q% V) Y% W
}
- U' \) k! D% I
opener.form1.frecname.value=val;
! i6 w1 N. u. k
self.close();
( V3 _$ v6 f) V3 K' V9 Y& S
}
1 \3 |5 g& Q. Z- d1 U
//-->
$ p! r: y. B" a, i# {4 j- q
</script>
2 Z3 A# Q0 F4 Z& w
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
- Y. P9 E$ R8 i/ \, v0 G
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
) A5 w% I, ^0 w( o/ }6 m8 f0 O
<%
9 s- N/ B9 |2 |1 {$ }7 H$ L0 X
cdatasource ds=new cdatasource(); //数据联结bean实例
/ d+ ]! Z- k4 t% U7 ]
java.sql.connection conn=ds.getconnection();
" P1 ?: k% e1 h4 v! |1 U4 t H, g I
java.sql.statement stmt=null;
5 U9 ]0 ^. q3 c2 m4 i E
java.sql.resultset rs=null;
- Z8 c* Q* v0 y' \, ~
cdatacheck dc=new cdatacheck();
, H: q' w. h& T& y
%>
1 ~# n2 u: L9 \5 |; _, A
<%
' y. Q3 x- H: b+ e2 M$ w
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";
# A5 l8 d. T. m: [
stmt=conn.createstatement();
0 I E1 V7 m6 M0 `3 {, o* d0 k
rs=stmt.executequery(sqlu);
7 Q0 j1 T0 G3 J" w; N0 b
%>
3 q9 ]2 {: y5 m7 O# [# }0 B/ f
<script language='javascript'>
" _; P2 T8 E$ W$ S
arr = new array();
5 h3 |. b3 O, N8 N0 \* G2 K0 p
<% int temp=0;
" V6 J! g( L/ Q: N- {
while(rs.next())
1 t8 {' g, i4 `" t, U3 j
{
/ x4 ~. ~4 k! w7 n9 ]
%>
" d+ v% @' {+ n" ~
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
8 D3 z8 J) E3 R' J1 E1 R- w4 O4 Z
<%
/ ~, D" E: }; q
temp = temp + 1;
/ s5 f* G+ ~ o6 S
}
+ J5 f, {: d* M" {8 Q; I. g/ M# E/ v+ y
%>
8 _8 j( s. ]' L5 Q
temp=<%=temp%>;
# y5 \9 _" I [& g m
function changelocation(id){
' {# k, n8 h0 B, p' N) i& e
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
5 `" C- r2 S, Y
var i = 0;
4 e8 a9 \5 N. {% `) ?
document.combo_box.city.options[0]=new option('-------','');
# f' W' v/ P$ V, L/ |
for(i=0;i<temp;i++){
+ b, i6 ~) ~- S( T2 V; h% h
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
& ^1 |+ A+ s% I l: S
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
% W- t5 l% w: \, C8 {) y' N' S
}
5 Q. ?! L- v6 k1 G
}
$ P0 s7 L7 q; N' N2 z- f
}
! f. p: e5 W# o" U- J
</script>
/ @5 r; d3 t) T0 x7 f9 J/ D* | Z
2 T8 K( @4 |/ \2 F/ g% h5 ~
<form name="combo_box">
8 ]8 Q2 Y5 L9 o
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
: b2 V ]5 o1 C6 }' B
<tr height="24">
+ {1 s" G1 n4 g$ K7 C: Z" S
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
# P! o, x% n' J
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
- e$ b6 w5 X7 X
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 G A- f* A v6 j
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
# j) p/ s. z3 D4 c9 t
</tr>
- Z9 w4 ?9 X/ g4 x5 |: S0 s3 V
<tr>
: o1 t+ t/ i1 ?" E B6 f, y6 Z
<td>
* ~; _4 t& A P4 l
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
% A5 E% a) y4 e' C+ v
<option value="0">请选择部门 ---></option>
1 Z" }( ~' q4 ]' A
<%
, S/ [( i4 f @; |- B3 T) H
string sqld="select * from tdept";
5 b9 U h- F7 D1 G1 m
stmt=conn.createstatement();
\! Y0 x8 a2 A- { M& N/ S! Q6 y
rs=stmt.executequery(sqld);
+ B* c x# X' P0 I. ?
while(rs.next())
3 j( Y8 J( V+ `8 z, T | V
{
- a0 i1 D$ V7 i& c/ P. S& j
%>
" h5 |, ~, i+ `, x
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
( w( p: {) ], }* e
<%
2 r* c; {/ i" R4 {: H# `5 p
}
/ h! v4 L/ h8 |: N. r% U0 f
%>
( p7 d% Y6 b2 M- m( ]& @
</select>
6 ?% R( Z1 r9 g, `) x& j
</td>
; g7 e% z5 s, Q
<td>
' B. Q' G2 ^ c
<select multiple id=city style="width:150;height:200" class="bgc">
% R- C5 e* { \; L! `1 h/ B
</select>
. x4 Q3 t; j2 ]4 D7 j; p
</td>
& X5 |7 f) b( Z9 N# X
<td nowrap align="center" class="bgc">
' g/ Q& U2 G5 l5 }; b/ i
<input type="button" value="<<" class="buttons">
; y4 U( `7 D- n: V* u# | P5 b
<input type="button" value=">>" class="buttons">
6 o: L' g% Y1 k- ~
</td>
1 B- Z' W3 n! C% {
<td>
# h( d3 U. a2 |# H
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
& I5 D [% ?# |5 X
</select>
9 H# U% [6 F( u- {( l/ C) I2 h
</td>
8 a: r9 ]; h. c; [) a/ o8 O
</tr>
2 F' X" S0 w5 x
<tr class="bgc">
! {- E8 D, u* R) m g7 t8 b
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
% S0 {9 S% U, c8 Y+ O" S& [
</tr>
5 T; [6 x6 X& g3 \
</table>
+ {8 H4 v4 T& V& i1 Z
</form>
+ {* [: J2 Z/ l" O$ [5 Y0 H6 g' v
<script language="javascript">
& ~# _* s( a# \1 g6 y
//人名移动
, F. j/ j% R! W: P5 x w
function move(fbox, tbox) {
* T0 L! U* w4 i9 z7 t
var arrfbox = new array();
! }2 X* O U E+ s' R2 H
var arrtbox = new array();
& Q4 w2 V. s, @: L% q
var arrlookup = new array();
& _, V0 a6 S6 ]2 n8 G; {+ a' I
var i;
2 ^% N5 m' M4 ~: z% m, P, z
for (i = 0; i < tbox.options.length; i++) {
4 O7 e4 J4 }9 p$ q8 N% p2 I
arrlookup[tbox.options
.text] = tbox.options
.value;
3 N' }% ?" U* B. _( J2 Y
arrtbox
= tbox.options
.text;
5 |" s% R' M! ~0 ]7 V
}
- L* O- E; t! j+ Y3 K u
var flength = 0;
, h# j5 d! j( W) x8 e+ P& b/ h* E
var tlength = arrtbox.length;
) u3 W! q* r9 K0 K" A
for(i = 0; i < fbox.options.length; i++) {
! y* m- q/ v+ j+ `8 r
arrlookup[fbox.options
.text] = fbox.options
.value;
* k W( I3 t* t7 ]1 j0 Z. Z( f+ |
if (fbox.options
.selected && fbox.options
.value != "") {
$ F! {$ H! ^+ N' K1 k
arrtbox[tlength] = fbox.options
.text;
: Z' m$ d" ?. f- D2 \7 s
tlength++;
5 Z+ |5 Q. Q$ Z. A. F7 B f
}
/ S0 |8 \1 U/ ~3 P% s
else {
! E' W1 C+ Z0 r) U( N
arrfbox[flength] = fbox.options
.text;
% e: s: h8 k3 F$ Q) v: u
flength++;
* A" k( |/ u8 \4 g; Y
}
; r) c7 s" M4 |( M6 c7 `! T- H
}
8 D$ x2 i5 b" B
arrfbox.sort();
& @: x2 o$ N) B) S
arrtbox.sort();
. ^4 J" s2 A! V( x7 [ X: B3 U
1 W! S7 [3 ^6 {( q# I
fbox.length = 0;
, ]% M5 H* K% }2 C2 Q1 t
tbox.length = 0;
3 E2 v) U, f o
var c;
5 y h7 B# E2 g! Z* ~+ O3 v5 E& S
for(c = 0; c < arrfbox.length; c++) {
! ?" |& C+ E0 D5 W9 T0 y
var no = new option();
. B; f/ J$ S7 b" z# X; y
no.value = arrlookup[arrfbox[c]];
9 O8 `" ~! E" |+ P) F9 r5 d
no.text = arrfbox[c];
% `" d/ f) e) `! d- R
fbox[c] = no;
+ [8 r% `$ l4 b: _( |6 J
}
5 M& ^! l3 b" f- y
for(c = 0; c < arrtbox.length; c++) {
+ w) N& E6 d: _$ R3 _! P
var no = new option();
+ n9 ^ W0 ?7 P* P4 D \! S
no.value = arrlookup[arrtbox[c]];
- {8 ^+ i* ~ E5 a/ O1 x
no.text = arrtbox[c];
7 X) x/ ~2 M n
tbox[c] = no;
9 i3 s0 C% G( K7 L, P% h
}
P- W4 w- H4 J+ U! I
}
# }& m, k3 c; z4 j
</script>
( V+ g0 [( w' k% v# N5 |# o! Y5 v
</body>
( x. t0 \$ w8 i* X) _- ?- X5 j& l
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
