jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"5 y$ f- @  w- }; ?( i
      c pageencoding="gb2312"
%>% h# _& A" C& A) i' a/ ]: o
<style>4 C/ ~/ s) w8 a0 S  s; ~  m
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }7 R5 U" a, w0 i6 e3 n# L
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;$ ?0 p, P' J+ J  R- s. F3 W
  margin:0px;}
</style>
<script language="javascript">

, H% B0 a$ q+ v</script>
) y6 Q& w- d- D' T% j<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">: x* a  t$ U' o5 X; T$ ~4 N; j, v
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
+ u) z+ d) G5 [. Z, h<%; x6 _6 i) m* V
  cdatasource ds=new cdatasource();  //数据联结bean实例
" T- b( `, |  `* v1 a2 o' t  java.sql.connection conn=ds.getconnection();; ?% P* F, l8 B, z7 a- A+ P
  java.sql.statement stmt=null;4 E" O; y. U4 S& A" P8 e, G
  java.sql.resultset rs=null;
& R0 z! V3 T$ x" ]; d- ]  M, y  cdatacheck dc=new cdatacheck();9 S- l* Q8 }, i& {1 b# w) B' X
%>% z- x) ?* H% G2 C- b
<%
. v5 ^6 o6 }* A3 l- Ystring 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";% n  ~0 v8 |: e5 o9 b
stmt=conn.createstatement();* _# T6 ~$ M0 L: A
rs=stmt.executequery(sqlu);1 h- P6 ]4 k$ G7 l; f! M0 K
%>
( s  }" Z( R% M' s1 C9 R/ O<script language='javascript'>3 h! L+ B/ X- t  Q' {8 T
arr = new array();
: I. D0 \7 _$ c$ A1 \<%  int temp=0;6 y/ H9 d/ p1 q! w; N$ c. C
while(rs.next())
1 x% R0 d! j' T) d- @{! h1 u( B( [; g1 I
%>' c+ \6 Y  t) b6 w9 G7 [
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");9 Q4 r' e6 T" x7 i
<%
  M  f8 c, B, ^) N& c+ X: D( Ktemp = temp + 1;
4 i5 Y/ G. }3 m- B+ L1 p}
7 \. n. c1 y: P  g%>
0 h  A  j* N) H$ B, Ltemp=<%=temp%>;
3 C; H# S$ U# tfunction changelocation(id){ 9 A2 [; f) q* M6 ?5 K4 H% ^
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 ' m; |% L4 e2 n6 ?6 r- H1 P
var i = 0; 4 ^4 Q8 ~: `! P+ O& l
document.combo_box.city.options[0]=new option('-------','');
6 _/ a, @: P) Z" O1 X* a) nfor(i=0;i<temp;i++){ 2 V5 l: W2 u9 F
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
: J4 y, @1 r8 m1 c/ B) h% \document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 8 \& B7 a1 t+ |2 @
} 3 G  a7 v* {# I; }5 {
}
  u2 p8 }# c, }0 \} - }) L3 i: v" d- ~: a  m$ H
</script>
/ Q  Z9 g& c5 d9 l8 y! U( D
' F! k9 ]0 h/ I$ L" x: W<form name="combo_box">
+ Z+ p# T+ A, N# W4 b- z! ]5 a<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">1 y( M, B- K9 m1 v) c
  <tr height="24">1 N; i$ ]( C0 y
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
0 w) s* Q# \: A- S& A2 Q <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>; \) T3 s9 a/ }
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>7 a0 U  Q% A/ H7 D1 p$ |
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>0 K* O. @1 l+ u, D8 ~
  </tr>
# \3 G1 Z8 [% Y; d6 v* {  <tr> 0 w" }# Q. m; `5 S$ F" {  B+ P
<td>0 B  j2 k% ]! h) D/ U/ |* ~
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">- x& S) M+ F' M/ t( l: u2 m
  <option value="0">请选择部门 ---></option>
. V6 c, p* A1 G5 b<%
% L0 i  y. U/ d: U. ^: l; { string sqld="select * from tdept";8 T2 R9 t1 k- @
stmt=conn.createstatement();6 u* |: T2 \' o" j$ }$ e
rs=stmt.executequery(sqld);) h& T3 K2 i* H# F
while(rs.next()); ], Y2 h& I: F: g( v( b
{
6 a! L( N; p" y) H9 d3 r( N%>5 K6 `4 t6 L3 w3 X# ^  a  p8 ?
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>( V) w' \: S2 e, b
<%& u9 c0 M9 m3 x; w" z5 ^
}
; t0 Z7 }1 l; z& }: i%>
2 f: r6 G7 H( i1 v  </select>$ t8 ?7 x, M. b' w
</td>8 O, H+ |* @- A( [& H& k
<td>/ N' D1 m# T7 m
  <select multiple id=city style="width:150;height:200" class="bgc">/ b' ^, |" Y1 o% x& j# x8 b
  </select>7 w+ N, z5 E  y
</td>& _! L) V! O/ H7 |
<td nowrap align="center" class="bgc">
- B# t* {4 |2 J5 s1 p2 t  <input type="button"  value="<<" class="buttons">1 C2 A6 q6 d$ B% X0 h, c
  <input type="button"  value=">>" class="buttons">
% i  F  ^# u* L' p% H</td>( q: P0 _' g& W* ]% o; V: i
<td>6 S" {& x5 G- X
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">! Z$ }0 L! Q( ?+ F7 p
  </select>9 R- f6 X. ^3 A* q, x8 Q
</td>
( Y+ s0 |' X7 R" c+ s  </tr>
/ A3 s$ s, `8 ^" C' N% v  P7 ^% O+ d <tr class="bgc">
1 h5 v' h2 `: J! ^ <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>6 F! @+ j: _3 c( T# x' f+ e# n
  </tr>- n; X- k8 x2 c+ N) r
</table>
" A* X: K* ~5 l9 ~9 O: q7 k* E</form>" o" ]1 x; x* o0 p6 D( s
<script language="javascript">
6 Z5 w" p  _4 m  n//人名移动) q" t- C. j! P; e0 D% V, }
function move(fbox, tbox) {
3 O" o1 T2 U# D: H5 Rvar arrfbox = new array();
+ q# n& o: z! @" Z6 Kvar arrtbox = new array();
1 ^% ?" I+ D% H! avar arrlookup = new array();) {0 N! S" j" w( ^5 Z# K
var i;$ i$ {- j' |* r. w- ?% e, F! J
for (i = 0; i < tbox.options.length; i++) {
/ F" e0 _/ ?- ^* K- K  l7 t6 Larrlookup[tbox.options.text] = tbox.options.value;
3 r8 @& o- v, v& l0 Oarrtbox = tbox.options.text;, u* R, P. _( S
}
0 z! C' G) G2 i$ V$ {4 avar flength = 0;5 L! [( B6 g* {& \; N' ^7 U) F; B3 [
var tlength = arrtbox.length;
+ ~7 ]" |' ~8 s5 c- L6 N( [for(i = 0; i < fbox.options.length; i++) {: T) O: ]3 `1 k  G' p. D5 q% N, z. L+ |
arrlookup[fbox.options.text] = fbox.options.value;
" v& j8 R# c  l$ Dif (fbox.options.selected && fbox.options.value != "") {
* {8 C& C  o' e) ~. harrtbox[tlength] = fbox.options.text;
) N9 [5 O  Q0 N  I" Ltlength++;
2 r7 j6 w% i0 B/ ^( K, Z( S! \* G}
0 g! s: s- @* i9 Eelse {  J/ S, b6 g+ ^
arrfbox[flength] = fbox.options.text;
2 s5 G) u7 V' Z7 x6 G7 W6 Gflength++;
4 Q3 V3 I. e; T8 ] }
}
/ {& X& M" N$ l; r) Y3 r% I4 Varrfbox.sort();
2 ?  |2 w3 ]8 y( v" v- {/ k0 s7 \arrtbox.sort();
* b- ^( Q. T& f/ h- W/ ?5 L1 I7 n  @7 h: l: Y  R$ I
fbox.length = 0;  @0 ]& J- D" L9 |& }9 m  d
tbox.length = 0;
+ ]% w& l" W2 Y2 dvar c;
# p2 G  R8 k/ X3 B# w, ^/ efor(c = 0; c < arrfbox.length; c++) {; V0 |& U) T# h$ n  z7 d, n
var no = new option();: b' b% \/ V9 e$ o/ y  ^) {( N
no.value = arrlookup[arrfbox[c]];8 d' F- h7 m' |' _; H* N
no.text = arrfbox[c];
9 N9 d8 v$ d4 j7 s' |fbox[c] = no;5 J" s- G  k+ h
}( T: v' J# `5 z/ i) c" R
for(c = 0; c < arrtbox.length; c++) {
( V4 E9 ~) Y5 i, C! @var no = new option();" ?4 j8 _4 Q7 d# O2 V5 G
no.value = arrlookup[arrtbox[c]];
) ]1 t- D% w3 v% \  V6 `no.text = arrtbox[c];. J2 G( I. P: _3 m8 B+ y3 ~
tbox[c] = no;! z1 M, T- N  A8 [# r6 b
}' |; ?$ C, M. M' {' H
}; B0 {; z0 Y! [* L5 C0 H
</script>
' X1 x0 U% u  U5 [7 F( }. A% e</body>2 {, i( v$ X9 I; U

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

返回列表

jsp+javascript打造级连菜单

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

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