标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
( F( ?% y! a3 Q) q1 q+ E
c pageencoding="gb2312"
: J2 \; r/ c3 E
%>
- e {2 y/ b: X' z; y* f
<style>
6 y7 B+ w! G9 @, t, l. W2 k. d
.f9{ font-size:9pt; }
) t6 Q! ^! ^' [( _9 r! t) o0 p
.bgc{ background-color:#aecaf9; color: #0033ff }
9 @/ D2 F( A2 J" K+ q( ^
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
1 U4 i% S. M$ Z9 @# Z) \
border-bottom: solid 1px #4e7dc1;
! N: q5 o4 n5 ?4 L7 e
border-left: solid 1px #aecaf9;
/ [* [3 T z9 C* N8 j8 \
border-right: solid 1px #5679bd;
4 n% v2 `7 Q3 a/ L! Y+ M7 ~
padding:1px;
/ }4 `: I+ h5 n/ O7 O& r
margin:0px;}
6 }" T0 {/ }+ f- Y! c2 U+ Q" B
</style>
9 f$ G$ B) l1 Q) \
<script language="javascript">
) D( |4 H9 M" @! ^' }" w: l
<!--
! [6 F! O& L" U
function rv()
5 K5 y1 P8 I V0 h0 X
{
" u/ A: Z# L1 q) ^
var val="";
) Q2 d) E& {/ V" ~( G
for(i=0;i<combo_box.list2.length;i++){
& P) g6 U+ A, q/ I3 t
val+=","+combo_box.list2
.value;
9 V3 A9 w! i. b" j9 q
}
) j; T) a# ]) _2 q6 C* M
if(val.charat(0)==","){
' T# u+ V% T5 V. @& }, s
val=val.substr(1,val.length);
; o6 N+ F; Q( E& ]5 S
}
# B+ W: Q; c* s- p
opener.form1.frecname.value=val;
9 @( u7 E( n9 [+ z
self.close();
i! R- K& |! k% J' f, Z5 o3 v. l
}
5 I, L' `1 W$ S6 k# I1 T
//-->
" X, p2 w5 @3 c$ Z8 V
</script>
% j. G9 I- p. Z* ?7 p$ C
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
( b" X' T. g/ H% ?5 \7 Q
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. d( A2 U. Q! @# W
<%
" \+ D: u2 Y+ h3 K# J
cdatasource ds=new cdatasource(); //数据联结bean实例
! g8 f$ P" X0 W- C# B* q* n* Q
java.sql.connection conn=ds.getconnection();
' K/ w; Q$ Q7 O0 `
java.sql.statement stmt=null;
3 _: _: J. M( J( _& I# p
java.sql.resultset rs=null;
6 j8 e+ D% q* Q
cdatacheck dc=new cdatacheck();
4 r/ x' y! |, j! I) t
%>
9 m$ k6 d* c; r0 l g+ d
<%
* K3 _0 t6 ^# k [: ^1 W( f5 K
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";
+ K" ^+ {# Y( O+ w# y
stmt=conn.createstatement();
: p5 I3 E. }( ^; _% H
rs=stmt.executequery(sqlu);
' k) W) f# n# j( |' W( Z) d! {( {
%>
8 l- a6 b9 R. V* S4 N$ d4 J
<script language='javascript'>
6 u( \# ?! j( r
arr = new array();
: q' G8 F' j% T- u
<% int temp=0;
, N6 z! e0 a0 O% w1 L5 R- S
while(rs.next())
: e' W( F0 m+ ]9 R3 ^
{
* m/ B6 `! y: T, i! }
%>
6 h, q) g. k" c1 L2 s4 C) j3 ~
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
$ f& Z+ w1 G( Q& A
<%
) ?( K$ ~) q6 \, `. Q$ }
temp = temp + 1;
; H7 C$ t. l8 D4 ^1 d$ \- R
}
" T' K* e/ L9 S, w
%>
/ ^' S; u) T: |* `" }
temp=<%=temp%>;
' x& O6 Y) r$ x6 O6 B' c9 P, f
function changelocation(id){
4 z0 n, Z& A* ~6 x' Y
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
$ Y; C9 {$ `/ r4 U/ O p- Z
var i = 0;
5 I$ v/ ^4 ^/ s5 J4 x
document.combo_box.city.options[0]=new option('-------','');
) [$ q* V! }! l) o: d) G1 B
for(i=0;i<temp;i++){
+ R1 n* n: C5 H- u
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
+ Q$ w$ n# N2 Q( M1 F0 n* e
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
& g: \8 R5 G1 b3 Y5 R% T) h: x) J
}
2 D4 S5 ?4 ~5 }; B$ ~
}
, @" g( B' d; j* ^ M
}
' G" @! [7 n6 i4 c& t) J
</script>
3 Z- V& ?$ M$ z7 Z0 e" W
; t9 V2 Y: K4 J* R5 J
<form name="combo_box">
% A2 \" Z( _: \+ i
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
, Q) a$ E/ H! S6 m0 p7 M
<tr height="24">
$ G' f& E c0 N V3 s+ z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
6 H: W: I( L5 O% x2 g2 g- {+ u) b; i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
S: u/ s: _" `2 y. P
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
" p8 F3 N7 u7 q6 ]5 y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
. x/ j; e3 o, R* v
</tr>
7 \- q8 b; }. N6 C5 h& C
<tr>
) z) |; |$ `( g7 Z! Q
<td>
& n& @/ `7 Q: V5 I$ u
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" f8 I/ w) z4 I1 k, ^
<option value="0">请选择部门 ---></option>
l$ h* z0 \# A: O& T
<%
( F6 b! y5 ~8 T; K( y
string sqld="select * from tdept";
F3 z2 a* E, s- ^+ O
stmt=conn.createstatement();
* c: H- x+ X8 V9 u8 C- J9 C
rs=stmt.executequery(sqld);
& j* F5 p9 a1 L+ w, r$ {: D
while(rs.next())
4 W/ T R3 g9 w
{
# ~8 e5 j* N0 J
%>
2 `: h q3 B6 a$ e7 f& p( R1 W
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 P/ l. n8 I* d: p/ r- }. {. M
<%
' U0 B6 x7 D) ^! N* P
}
" ^$ i; y/ ]' Z
%>
8 b) Q9 r4 {" k% }, L6 R" p" u
</select>
' b. t) C1 w! R
</td>
' \0 `1 w, P! i
<td>
, e- E7 }& U. F! z7 ?! h* _
<select multiple id=city style="width:150;height:200" class="bgc">
$ R; j" c) V9 H+ z
</select>
3 g! {/ n- Y/ r% a/ D
</td>
: ^( S5 P: P) t7 I3 l9 r3 P
<td nowrap align="center" class="bgc">
- T! P9 z* k2 N
<input type="button" value="<<" class="buttons">
% q. I6 f; ?( l( I! u+ i9 U/ c
<input type="button" value=">>" class="buttons">
( H9 X1 P% ~' ]& {% X
</td>
% J+ b4 ]$ n% \3 H9 r. N
<td>
4 F+ _) A5 X; s4 S2 d
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
. L' ]# ~: o& ?" Q9 |
</select>
: O, x% r) H4 F4 K4 P% l
</td>
8 A5 c5 U/ n, G% A1 e
</tr>
! J3 u8 J' g) C8 j I& a- c8 `5 y
<tr class="bgc">
: Y, p$ W; h9 \& ^2 r
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
9 ~ T h5 v2 \- M& ^
</tr>
) h0 _4 B2 q+ V; m( O6 ?
</table>
4 V- Q% _6 U7 D
</form>
3 L. U, h9 D: [% g2 I# ?
<script language="javascript">
: s- T2 U$ D6 c! M5 i8 g! U' z
//人名移动
& L" t; I0 c+ s) v D! c
function move(fbox, tbox) {
3 b2 K& ~1 A% Q5 ^
var arrfbox = new array();
C& B! h8 Y9 O% a
var arrtbox = new array();
" l* K& j7 ?, Z
var arrlookup = new array();
- N. S: P& ^# r
var i;
- @. u* b8 K8 _# M
for (i = 0; i < tbox.options.length; i++) {
8 K" ^ I" n% W5 m& z8 |
arrlookup[tbox.options
.text] = tbox.options
.value;
6 \1 S1 t# V0 g N
arrtbox
= tbox.options
.text;
% K, _1 i4 \$ ?. n5 M. } U# I
}
- G/ N. y5 R. [% }& E( g
var flength = 0;
7 g p! @% [$ J0 G- A$ C! N9 ]
var tlength = arrtbox.length;
+ a1 d$ ^$ O' s/ o' j4 `) m
for(i = 0; i < fbox.options.length; i++) {
6 {% B, D; \* N2 | T2 |
arrlookup[fbox.options
.text] = fbox.options
.value;
2 d; v* O% K% Q9 [3 W" e
if (fbox.options
.selected && fbox.options
.value != "") {
# c" b/ _+ C" h
arrtbox[tlength] = fbox.options
.text;
; \. B8 @. n! _/ p/ @0 r2 \
tlength++;
& f7 ^# D+ P! v4 I- U0 F
}
( B H i; S$ u( t
else {
) m0 l, i. U6 S
arrfbox[flength] = fbox.options
.text;
3 j' N G3 J& Q0 l
flength++;
' c& [) n& ]$ I7 g
}
6 V! U; B) M g& t8 C& }; a
}
7 n/ C' ]# z/ E8 b- D) E! ?5 M
arrfbox.sort();
3 [8 w s5 m( f9 F9 W' R
arrtbox.sort();
/ R6 V; I$ N. l8 H8 z) l
, m7 U! A/ i$ R
fbox.length = 0;
& @, m$ s1 A6 Y9 ]9 k
tbox.length = 0;
7 k0 y G5 M6 A9 z4 v4 _
var c;
7 `/ ~+ u) T$ v
for(c = 0; c < arrfbox.length; c++) {
% j; _8 b3 x) C3 Z* J" ~( U
var no = new option();
3 ^) x" r: }5 |! F
no.value = arrlookup[arrfbox[c]];
$ b; x7 S/ g" e$ S# ~4 h
no.text = arrfbox[c];
9 z& ^. ^/ R9 t3 m6 {* }! I/ D# `
fbox[c] = no;
1 s4 L3 e* }5 }1 S( U$ H
}
* x3 h, z1 ]1 F4 o/ d: o- }3 D4 `
for(c = 0; c < arrtbox.length; c++) {
: M6 B9 Z( C7 V4 y
var no = new option();
4 ?" I$ \- w% \ m$ g
no.value = arrlookup[arrtbox[c]];
G% K5 S( |3 H; y- W/ J
no.text = arrtbox[c];
9 ^7 P" R7 I5 k) G* Q7 b! }
tbox[c] = no;
' d" H# k; S) o1 q* R( I
}
$ o: i+ H& P, o3 s" ^) q/ v- A
}
, H! Q$ g% U" d+ \! Z) l
</script>
$ R% z2 R$ W0 k
</body>
6 ^; Z o5 ^6 e1 m# P: Z
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
