jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"" b* K% a- ^0 K; ?3 F2 q4 q& s
      c pageencoding="gb2312"/ w7 _8 K0 i/ t. \0 R
%>. d. K9 Z& {2 S+ e  g* }& O7 X
<style>/ m, |& q8 l3 \$ c
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;/ Z  |2 p3 g5 i6 I) W& B: b
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;* T: N: @3 r( @1 I% T" N
  padding:1px;% |( R, B4 \. ]7 _: g
  margin:0px;}- f) Q3 ?0 y, w8 I1 I
</style>5 ^2 e; \( x/ A8 p( s# S1 U& e. b
<script language="javascript">6 B1 f( n0 R* `' r6 S: ~( ], Z

9 J& ~) O6 c8 A3 I1 ?" w</script>
) }7 Z/ z; V, A$ A5 N<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">; x3 O( u1 z) @- ]* b) p
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
4 ^; }; o8 v! H9 P: m<%
9 z' o) A( l( [; y4 e) C  cdatasource ds=new cdatasource();  //数据联结bean实例
' Y4 w3 R: U) o5 F$ j& S% \6 @  java.sql.connection conn=ds.getconnection();
1 ~7 x+ A$ F  F5 V( m& S' d  java.sql.statement stmt=null;
  N. f- }  }4 x+ a  java.sql.resultset rs=null;
- |# E7 q' j) i) m. U  cdatacheck dc=new cdatacheck();
& S3 `! S. U. U* \: i%>
% D0 j; I7 t$ i<%  L$ Z2 j3 M( K4 |7 G3 J
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";
stmt=conn.createstatement();
3 k- X2 n" R; ~4 ?6 P/ P) v# @0 l" Brs=stmt.executequery(sqlu);9 y/ A/ |) d; f$ p
%># V. H, p' ], v% B" Y+ u! J' ?/ M6 v( O
<script language='javascript'>  G0 A/ s+ o, _7 e2 y
arr = new array();: H4 \4 c! Y7 d8 J0 V
<%  int temp=0;! o0 _% ?2 G. H: ~4 W
while(rs.next())
& ~4 C- M5 X# h; W. X% \# G{
* L, T" \; A$ Y%>* s! i" A- |, _4 ]4 T' I
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
5 p6 m4 O# A4 _# T6 ^  b5 I8 u<%# N- }2 S5 i' }
temp = temp + 1;
8 D% _3 ~" p3 R5 I: \}* g* `) F3 N4 g5 `2 ~0 J; k- r
%>5 ]! E4 `1 p: T3 h5 V
temp=<%=temp%>;
  c/ t) J' ?+ i# s3 k% `function changelocation(id){
0 T7 a# _! }# l0 c# Q& P$ `document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 9 V& m0 I! a) E* S0 H/ i
var i = 0; 1 Y4 r1 e& p4 x4 ]+ b
document.combo_box.city.options[0]=new option('-------','');
0 t0 c- ?4 o* l- a6 o$ Nfor(i=0;i<temp;i++){ + X# L. ^8 O9 f. |1 C
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 7 Q* P) U3 ]3 V
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 6 e, U) r. z9 O* w( T9 M! R
}
3 a) t. J$ }0 O} 2 c8 g9 ~8 z+ j7 S0 Z0 C* m  |
} 1 u" {( V7 d4 r! \( q
</script>/ J/ a+ D/ F$ C( X( m8 J# I
: d1 ~3 z, W0 r) ?+ h  Q4 J9 h9 |
<form name="combo_box">
, c3 [# n, N' j<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">& Q+ w3 V0 w% T! E7 q# ?% {' S
  <tr height="24">
5 u/ z. k+ r5 {1 }) p. L <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>2 U0 y( M' K  K! k9 g8 l, r
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>- P7 [$ w0 E: C4 Y/ Q3 i- V9 s% v5 u
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
/ L; X+ ?& W. E8 y- d+ {1 Z <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
* o, V* h4 S9 g- L  </tr>
; J) r6 Y; [1 G  <tr>
% K% E+ o* a# c7 r/ d7 t <td>
1 w, o9 x. T! `. l5 M: x  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
5 \( w# ^. k8 c% L& Z! L9 _3 S  <option value="0">请选择部门 ---></option>
$ `2 x+ ~* @# }9 [+ z7 N6 q/ g1 [<%
5 v3 ^6 N5 b6 a- w! l string sqld="select * from tdept";+ l5 ?0 A) b: [& E. L! U- x; P
stmt=conn.createstatement();3 \8 Z2 W# X% J0 H& J6 }/ h
rs=stmt.executequery(sqld);9 b% K9 Q  x4 [) b* j. _2 Y
while(rs.next())
# A" h3 [) {% y( U$ f: a5 Z4 M{
' v" B4 a$ d' z" }2 ?( Z%>
" ?' d1 {! x+ E  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>) G" T! ?0 Q8 |  v% u8 V! V
<%
& L3 d6 x: \5 u9 E+ H7 O}
" l0 d! k. N  f$ p* V, q%> 7 d2 }% O' F$ k7 L5 v
  </select>
/ Q3 f2 l( }% N8 R. p; ^# u</td>
( D3 h& n7 V0 V# t% Q) A <td>
) P% _. E! [7 D( A! F/ Z  <select multiple id=city style="width:150;height:200" class="bgc">
( b: V$ e2 K& x3 `( d, X4 X7 h5 j  </select>& n; C' I/ F4 }+ V( L. L! R
</td>
. e. l/ g5 q' ?6 b; q! X1 Y: U <td nowrap align="center" class="bgc">9 s6 g- C; J! Z1 E. ~/ Z5 G: J
  <input type="button"  value="<<" class="buttons">) h' {. v6 P7 s  w$ q/ E
  <input type="button"  value=">>" class="buttons">! }2 `7 M" ?4 Y) J
</td>( h! W  q; l/ T1 d9 f
<td># J5 {' b+ e) p" Q3 U. s& e! L
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">- U- s# _& J- {' d6 ]$ f0 d5 K6 P
  </select>
1 @) q$ u+ T7 A3 q1 g/ Q4 F- {6 h3 j</td>7 O3 K& d8 F/ ~, l
  </tr>' v5 F& g. B8 A3 i# O
<tr class="bgc"> , g8 W+ b5 [1 ^9 e; K# @8 L: I
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
' f: I7 P' ?! w( |! D9 v  E4 B  </tr>: n& D8 A7 z7 }2 C
</table>
3 l0 G- P  K) C) v/ O* X  \5 _! b</form>
, U% [# s# a( Y" K$ |" L/ N. x<script language="javascript">
3 T8 C' \2 Z- [, y9 A6 {//人名移动: n! E( ?6 o! T; R
function move(fbox, tbox) {* u3 i" B5 c3 \$ T% n" `0 i2 I$ ]
var arrfbox = new array();
3 B) F# J7 L, K; J2 mvar arrtbox = new array();
3 a+ E: [, d; L3 I' t4 X1 m, yvar arrlookup = new array();; |; J& R* `" L+ c: |8 |5 C* O
var i;' L1 E7 O4 q  b$ g" f$ X2 v$ R+ n; U
for (i = 0; i < tbox.options.length; i++) {5 g6 d1 K* _6 ^: u8 I2 I
arrlookup[tbox.options.text] = tbox.options.value;
* g5 v6 I8 p4 m* g0 P: Varrtbox = tbox.options.text;5 `5 c% v$ _  I2 \- y6 d2 |% n
}+ V6 s$ p0 @- N' M# v
var flength = 0;
$ L/ g) _$ M: \( a5 k/ Tvar tlength = arrtbox.length;# v# H* a( `, F" y0 K) i
for(i = 0; i < fbox.options.length; i++) {
. ~+ L% L, B) u6 w; }" xarrlookup[fbox.options.text] = fbox.options.value;
; Z5 [: e# S; F5 cif (fbox.options.selected && fbox.options.value != "") {( o: l) [4 m& V
arrtbox[tlength] = fbox.options.text;  l( w4 a: W( L- h" {( F- Z- u
tlength++;! f5 l' x* T! X
}
/ [! L7 g8 y) N/ Oelse {
" A+ j" E: t+ Y6 V8 _, narrfbox[flength] = fbox.options.text;
& Y" u: p" ]6 _4 n% x' Z2 yflength++;
" ~# I1 u6 k6 ]! S& I; S+ `" g  Y }8 X$ i* T7 @& d& o+ |+ V5 K
}8 [, ?: C+ J+ C9 K6 Y  s' s
arrfbox.sort();
. p$ z: P; f# \1 R- m. x# qarrtbox.sort();# A: o$ \/ r& z: z8 }  h

' A  P- T& _# i! q" A. |fbox.length = 0;
6 ?) N0 M/ p6 @) n* d3 ctbox.length = 0;
& M& Q9 u/ _# p4 t1 J; r2 dvar c;" p! _# c2 ^- b( E! w9 B, a
for(c = 0; c < arrfbox.length; c++) {, L5 v1 N/ |6 I! I- X, j
var no = new option();4 o, b  k) @; b
no.value = arrlookup[arrfbox[c]];
. R: R- d& a" ]& lno.text = arrfbox[c];
4 E3 N. c: r/ D, L0 N( ffbox[c] = no;5 _% l8 A( \" m6 k
}) l' p7 E9 t5 J# s  M. n* `6 d; B
for(c = 0; c < arrtbox.length; c++) {4 ~* U: Q7 Y& Q
var no = new option();6 ^- D0 U/ @7 ~' R) r+ p7 C
no.value = arrlookup[arrtbox[c]];
, ~. z. }& r2 w( M$ `+ b; A* }no.text = arrtbox[c];( T' Z5 E* p' r7 I
tbox[c] = no;- T$ E; K" l" q* k
}
3 m, Q# l6 J& j) N}4 j: m, V3 H$ Q) [* Q" s7 @
</script>& E6 O3 T. @5 f0 T1 H
</body>* }. F% H0 H! Q' |  o

捌玖网络 89w.org----致力于站长学习交流

返回列表

jsp+javascript打造级连菜单

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]