标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
3 x8 V9 e; z4 A8 v0 o
c pageencoding="gb2312"
- c+ W- s4 h2 i4 M+ c! d
%>
& x4 n+ a5 r! u" w4 Z/ z
<style>
/ B# O, M/ @" \4 {
.f9{ font-size:9pt; }
# Z: x& A6 s7 j) _
.bgc{ background-color:#aecaf9; color: #0033ff }
' v; E' \7 ~5 H& |% p
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
- v) M: ?/ |5 b1 D: k7 C" U/ b
border-bottom: solid 1px #4e7dc1;
T8 o& U1 l7 v
border-left: solid 1px #aecaf9;
& g5 D: w K1 B( K8 c
border-right: solid 1px #5679bd;
. c9 t+ V. a. u& f+ @6 B
padding:1px;
! b/ z8 _" W" Q) R7 Q) Q
margin:0px;}
* }; ^+ B% }2 Z! h# ~% b7 ^' b4 [
</style>
! F2 Q9 ~" n9 M2 F. X( x' d' w
<script language="javascript">
. ~: j; h) M2 V1 \; R% Y5 ~4 z9 a
<!--
$ j8 r) y& F* O( E, O+ Z7 Q
function rv()
8 W9 r1 H- `( f' x' p
{
' k) ~- }* T' |( i
var val="";
8 N' _' q# h$ ]" R( V* d- V
for(i=0;i<combo_box.list2.length;i++){
- t: ^# [, x# C/ R. b4 N) U
val+=","+combo_box.list2
.value;
( C! f6 H {5 b; X! F* }5 S
}
m( C% W6 m8 ?( J$ s: |; V$ }
if(val.charat(0)==","){
2 P8 o+ ^- Y1 ?3 A% V+ X$ _
val=val.substr(1,val.length);
( f/ s- U: n2 o9 |& ?1 G
}
" M6 ?: j7 b" m3 t1 t
opener.form1.frecname.value=val;
0 K' Z& m# X2 F/ q$ m
self.close();
8 p# E1 r0 h( Q0 I
}
! v1 F8 F r# d
//-->
5 u5 c6 j0 O- B1 |
</script>
; G& O9 z$ A& I$ P4 ~3 M/ l; U
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
$ P/ z1 T+ E/ @9 f
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
! ^3 U: d1 W# {
<%
5 v" O: U0 L8 B/ u
cdatasource ds=new cdatasource(); //数据联结bean实例
1 z0 }8 ~& I5 f, j2 [- _, w" P
java.sql.connection conn=ds.getconnection();
" {4 _; g* ~0 [# j9 U8 ?
java.sql.statement stmt=null;
6 T q+ p8 f% H0 q8 q: G/ N5 {: o
java.sql.resultset rs=null;
. {3 E9 E1 a' k& \
cdatacheck dc=new cdatacheck();
. L$ F/ i! ~& k; s+ T& p( v
%>
( o( S: u. D" ]( r, L& a$ e
<%
) Y8 e1 j* A: m2 v! f
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";
) a: ^/ [2 v! d/ E
stmt=conn.createstatement();
1 u! z" t$ Y2 t3 b$ s0 L v! J/ G7 w# n
rs=stmt.executequery(sqlu);
, f1 E9 N. h) I* A: f0 W. T
%>
0 K! p- P& \ O5 s" m
<script language='javascript'>
( L, h% Q- t& z. z4 i5 x4 U
arr = new array();
* m4 p- e& X; @6 w
<% int temp=0;
$ P' S- W5 Y/ M' }, V7 q0 V
while(rs.next())
( s, w" Y- i3 f$ d/ }- |; g) U
{
: m6 ]( D+ q5 g5 L) k! G2 P; w7 P, n6 u
%>
" d1 [, d$ ~- \. ?
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
" }/ a/ v' g6 R# q; R% A0 e/ p: ~
<%
, [; R W# N5 D% P
temp = temp + 1;
0 Y, O0 F$ m& T0 T x. F1 d
}
, U5 \8 w7 t0 @. Y
%>
& O7 q0 J5 q9 z( G
temp=<%=temp%>;
; Y8 E6 v& W/ I2 Y
function changelocation(id){
/ ` N- F; L" j3 R6 U, R
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
! J; ?" m& e0 o0 t) P
var i = 0;
, N3 P4 x) B% ?3 C1 J* s
document.combo_box.city.options[0]=new option('-------','');
: O D5 B+ Y ]- m4 h2 R/ ^& i" e
for(i=0;i<temp;i++){
! T( y \8 s O9 i; N3 U' X3 g/ |
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
" ]" u% l- l8 W
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
, h% B# V' j' |
}
" H" f* t; u [! i, K
}
& c! F; N U2 s/ I' L
}
0 q8 R' M9 m$ {: p
</script>
* {. p/ w' E% ~. f& q8 Q
: j+ T% Q) H6 o# i: h4 a( r
<form name="combo_box">
4 ~. o. D5 b/ I; o
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
" e8 d) H9 b% N
<tr height="24">
$ u5 ?5 ^9 ?$ E( `
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
" `$ p1 S6 D- G4 [3 ~: Y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
: _- @6 p: `' f" b' w3 u
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
, Z/ Y" y; n8 Y1 b9 ]
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
2 ^1 \; ]! ?" Y1 M
</tr>
; i( v/ ]# |% \/ g
<tr>
( O: f4 n# \) J
<td>
5 q6 C- x% c2 k; Q, H
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
Z- T, e' K8 F
<option value="0">请选择部门 ---></option>
6 ^9 ~; [( \$ @- i: z/ }$ e4 ~) \6 ?
<%
: O2 u4 ^6 \1 e
string sqld="select * from tdept";
7 |8 a! N& w/ R$ G% o0 B5 w
stmt=conn.createstatement();
: Z$ H( H# G8 c) S. i
rs=stmt.executequery(sqld);
5 d: H* _, N+ S: H5 m
while(rs.next())
! ^. W! F0 O* c, o
{
4 o( N( a/ b3 i" Z
%>
* E5 B1 h3 l$ B# @6 N
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 R7 R, ]3 X' k
<%
3 R+ C5 [4 x; j, Q- |
}
( \$ f# Q; t# l5 ]/ F# F- M
%>
: ~$ ]5 }+ L* C2 X
</select>
* b1 x) G1 O) Y: t# l& ^. J
</td>
6 N2 G, w1 P+ h( N E+ K: I( I+ D
<td>
; `8 |2 Q0 m6 i
<select multiple id=city style="width:150;height:200" class="bgc">
6 o% ?4 G0 j1 k) L% f2 G# T7 [: f8 @
</select>
$ A* x; c$ _ c- u/ R/ ^) r) Y
</td>
" c7 p8 S5 E5 N4 T2 a; r0 \
<td nowrap align="center" class="bgc">
: `6 |0 t, E+ N: @ ~- ]% t
<input type="button" value="<<" class="buttons">
- c" I% P) C( o: R/ e. ?7 ?
<input type="button" value=">>" class="buttons">
% c% e% [: Y1 m+ _- o% r
</td>
3 F! ^) ?7 @) Q3 j4 K; I" P' p r
<td>
+ C/ F! z8 L( a( u: h9 y
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
5 v/ ?* m" l3 F) n
</select>
' y# u4 j6 I, Q% i+ e0 R, q$ m% @
</td>
. }3 W0 n! B& h8 }+ m* F
</tr>
$ }2 K& K$ d3 u
<tr class="bgc">
^: x0 }. j. ]2 X" c7 o
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
/ t: F V: ~. Y& _4 z1 j
</tr>
8 k0 Z% A9 Q* {4 N
</table>
5 o' ^( Z6 A$ U. I
</form>
& q$ W- s% Y7 Q) v+ z: B$ |
<script language="javascript">
0 i. a* E# E/ ]' r3 O
//人名移动
( S8 V7 U' d' m7 _6 b1 r6 I
function move(fbox, tbox) {
" X% f& Q" V: X8 b; P# D
var arrfbox = new array();
7 K( J' b" T; V; D7 I
var arrtbox = new array();
0 g9 L. o: |( n1 H6 p! n
var arrlookup = new array();
$ i5 q2 c# j" ^
var i;
% I) E' s, V; @; B
for (i = 0; i < tbox.options.length; i++) {
; o" K7 ?9 P$ {9 Z% n( s+ O- v: H
arrlookup[tbox.options
.text] = tbox.options
.value;
; S$ v5 |7 |% O
arrtbox
= tbox.options
.text;
4 f/ i! o2 C7 r# g5 \' P! j" W2 U
}
0 ]1 U/ \& q m9 k2 g* J
var flength = 0;
7 @( z0 ?) d* |& D9 Y: J
var tlength = arrtbox.length;
( F. X3 C ?/ a
for(i = 0; i < fbox.options.length; i++) {
4 k5 R5 {% M$ @: [
arrlookup[fbox.options
.text] = fbox.options
.value;
0 `- O! c' i4 ~6 l
if (fbox.options
.selected && fbox.options
.value != "") {
% ^7 d, M$ n+ t6 f9 A) \, z
arrtbox[tlength] = fbox.options
.text;
) y6 q3 ^; X1 p, }% d% J. v9 _$ z" g
tlength++;
* }3 G) V3 y& L+ V
}
5 ]/ i; u& v9 ^ P, [# y
else {
2 F/ J) E1 b: E
arrfbox[flength] = fbox.options
.text;
' V" f+ i1 Q9 e8 X9 m9 ?1 a
flength++;
( K8 o4 B) ]/ G. l, d
}
# n; ~6 s7 [( q3 m2 ]/ V" v" w
}
; Z% N" I: n1 r* d& m4 X
arrfbox.sort();
1 M8 q/ i) d: l8 U, o! m
arrtbox.sort();
( W& n8 f+ Z( d% r
2 D& F3 M8 S9 u; w% `0 |( [
fbox.length = 0;
7 y) {- ]' t0 ]/ W
tbox.length = 0;
" \+ C5 u0 D4 x! [! q. D6 }
var c;
# Y4 K) t! T* q. |3 Q5 E
for(c = 0; c < arrfbox.length; c++) {
/ H, t' |3 G6 \! i# t
var no = new option();
" ~. i9 | X [, S& K+ [, { W# x9 M
no.value = arrlookup[arrfbox[c]];
" C+ g6 U) s3 r4 w) e* H& M
no.text = arrfbox[c];
( Z: \, ?$ d+ n: ~4 f
fbox[c] = no;
* d; \5 B0 E4 K+ j4 P2 s% V
}
2 s6 T4 w1 ~& V2 k' |
for(c = 0; c < arrtbox.length; c++) {
; P# E2 d) Z! d
var no = new option();
5 Y! t( h" |. \1 @2 p
no.value = arrlookup[arrtbox[c]];
/ U5 w- b6 O* c8 z# x6 z( H% O3 _4 X
no.text = arrtbox[c];
9 v' X0 l) g5 k; B: I
tbox[c] = no;
' |2 `5 j. X) k& M
}
8 p, j. f; h8 k* t" J3 C
}
% O) n+ b- }4 b5 c! @+ Q& K Q
</script>
; `) D/ ^* \; z8 J( a
</body>
# ]' B% e% G: I5 N
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
