jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"1 L( `6 X! X% ^' b
      c pageencoding="gb2312"
%>
<style>) B& R  f3 A( U9 _' n
.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;. q# r$ p$ K5 u6 w9 H1 _6 p2 p
  border-bottom: solid 1px #4e7dc1;' p( K) }: c2 l' U: d/ U+ F  g
  border-left: solid 1px #aecaf9;3 _8 C4 s( A8 M' O1 F+ C+ G
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}
</style>- r: t8 d% R5 T9 q% ^: o' `/ x
<script language="javascript">" ~+ d, y* u% ^" ?9 i9 U0 _& i
" d% P3 p; Y1 a; _4 C( T
</script>  a8 W8 _  X3 D
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
% g0 t' U* W5 V<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />5 V: K  A8 N/ O/ B; ^
<%
  R, U' v! P# I# P; p" }" t; a  cdatasource ds=new cdatasource();  //数据联结bean实例& U  o4 k" ^7 u8 A
  java.sql.connection conn=ds.getconnection();
1 u2 S7 O$ A3 ]* t" ^; u  java.sql.statement stmt=null;
( X- v8 ^3 h2 k1 U  java.sql.resultset rs=null;
1 l/ i( b. W2 e: z* i( R- v6 b  cdatacheck dc=new cdatacheck();
$ t/ ~  o+ q! p  u, M%>0 V( r6 \5 t1 E$ T8 q
<%" R4 N* I" |& e/ L" 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";! G" k$ b2 W( _4 h- z5 l1 L& k& p
stmt=conn.createstatement();
9 G! B2 Q8 {/ |3 S7 g5 i: Drs=stmt.executequery(sqlu);
4 V5 x! M8 ~7 ~* z5 J%>
! P7 T  f5 N# D( G9 Z<script language='javascript'>( T" S' X0 C, x# B1 z
arr = new array();
! g: Q1 O* C! l$ A' _( e<%  int temp=0;& t# U, _4 W6 q
while(rs.next())
- J9 L3 Y1 W' ~  w2 n" b: ~" y{4 U- m9 Q9 y; l5 h3 l
%>
" O9 S3 |8 A0 d3 H* ~& p9 narr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
$ V! v& P# R( |- z3 X6 m$ J<%& c7 x5 Z4 B4 a' M% Q" A4 i
temp = temp + 1;
1 ~" a8 @9 Y* c9 d}
1 U3 D1 h/ `. e%>
  K! R+ s4 Y5 [temp=<%=temp%>;2 u1 f4 n! F$ \6 d
function changelocation(id){
$ i& @9 G* I( P% u6 ?document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
& a* |! D* n! Q/ B$ ?( u3 Svar i = 0; + _1 d1 r0 H' c3 o5 U
document.combo_box.city.options[0]=new option('-------',''); " q* U' ?2 H* f5 T" {" j: G
for(i=0;i<temp;i++){ ( y2 m! g' z% ~/ U0 E. h5 m: ?
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ! W9 h2 O8 C& t9 {
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
+ H: w1 J- L2 t8 Q}
! V# `$ b* q  a* y" j; N4 o}
$ a7 m4 X. R0 v} 7 v) f3 O% [& A. n* @9 f
</script>
; u* m  n3 H% u4 F
+ z& r; K! A0 W9 o% z<form name="combo_box">' s; J1 G" [) C- z% ]# p
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
0 h3 B, \' g1 J7 p1 v% f  <tr height="24">
; t+ e" D8 k" i/ f( n <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>' W" z4 w+ ]1 s  y+ G  d' M% n
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
$ y) m; {# |( b0 Z <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>% t% G7 M5 H' \/ V
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>) l3 i& [5 H) T3 h7 }
  </tr>" ?! `7 J1 M) P& `5 H
  <tr>
. [0 |. o; D. _7 f, M <td>. ?' f. l& p. R  [& `. @
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
# N& C: {$ ~7 w6 v: ]& r: {  <option value="0">请选择部门 ---></option>
: T4 d, X. S* |5 I4 ^$ A<%) j4 n7 U! x1 p% {+ I1 ~
string sqld="select * from tdept";9 S' b% Y& w$ s  A3 C! a2 P
stmt=conn.createstatement();
% O. ]( W8 |4 I3 j8 `rs=stmt.executequery(sqld);
) q9 F3 P' g6 T1 Q" b. Zwhile(rs.next())
; A1 s+ q' e* J7 {0 |+ ]5 L{/ \2 S+ s& U3 Z  ?& \" a
%>
) ~  R: R4 U4 f" r. b  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>' \: f' v: ?; ?* M2 E  h
<%
7 a9 W" I; D2 N$ N! j1 B}8 A0 [  g) l8 B. r$ \1 p
%>
. ^/ h5 N  E1 p- H3 H  M2 x8 E  </select>
, u2 N  r! U4 M; J+ V4 p0 O</td>
+ W) P4 E6 \( g <td>3 J1 A1 F4 [) v8 M: m! f! f
  <select multiple id=city style="width:150;height:200" class="bgc">
5 Z, h- E, w/ ^/ m( K' d  </select>
* u7 h/ W2 h  O</td>
, W: w) _+ ?3 e1 x. { <td nowrap align="center" class="bgc">
6 M& f  ]1 e9 B' ]: V% M% T5 o  <input type="button"  value="<<" class="buttons">6 g( Z9 H* e* O9 o1 Q3 Q1 o4 t  t
  <input type="button"  value=">>" class="buttons">
* J: f8 j4 L) g5 y' a" T</td>9 O3 I4 y" S% f0 t
<td>, r( y( @2 q( S  f8 q" E' Q
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">% b- U! s/ Z% r7 `: F  {3 V% a5 W
  </select>+ c8 H2 x# I4 }8 }& {2 N2 y
</td>( P7 g% K& c) V3 @3 E
  </tr>
+ {. {+ b5 w; x* n( Z9 H <tr class="bgc">
0 h) G* j$ k( p  C% |, C0 U9 ^ <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
5 _7 l: d$ J" c/ v: v* q5 G! L  </tr>
: R* n: S* R3 M( h</table>7 ?! M' d4 S( y2 z% W- P
</form>
/ N0 p. W  @2 x% k0 E2 |0 Q: s" @% @<script language="javascript">
! M$ ^4 ]& `, B  h) \' A, m! q7 }//人名移动5 S, f  \3 n0 k4 A, t6 p7 R, g2 f) j
function move(fbox, tbox) {
3 n$ M- T+ o+ R( H. S. `  I; avar arrfbox = new array();5 U9 C6 d; j/ P( w% o9 b4 u
var arrtbox = new array();
! n7 _6 M1 r* i$ P8 Hvar arrlookup = new array();
/ f2 P4 d/ p2 c6 h6 m  z' ivar i;9 v; s; @* B3 j4 L7 Y
for (i = 0; i < tbox.options.length; i++) {; j- f& J- M2 ~8 J" J1 l& A
arrlookup[tbox.options.text] = tbox.options.value;
! V, T3 G" N: Q; \. sarrtbox = tbox.options.text;
3 W3 J3 I  C% |. |" q}
: ]: U' q& o0 Q. ivar flength = 0;
% A( Y" L% ]' c; P- a5 e$ xvar tlength = arrtbox.length;1 f& U) `2 w/ X/ Y$ Y+ h4 V+ A# [* I
for(i = 0; i < fbox.options.length; i++) {
+ t  _) i" S+ I$ u/ varrlookup[fbox.options.text] = fbox.options.value;
8 g( V; X" h) i- ?6 K  k% a: Zif (fbox.options.selected && fbox.options.value != "") {
+ e* L0 l5 \( O) y' karrtbox[tlength] = fbox.options.text;
- |1 Q& y- r+ \# L6 M: H$ ^8 Utlength++;
' ^$ ?, d# ?% P; H; W7 E9 E, j}8 G" w; u- e( u! R& G/ N1 W; r
else {
) f8 U# V% o# n: R0 y4 o& o) zarrfbox[flength] = fbox.options.text;
& q8 E* v7 L$ K5 f% b( b; qflength++;
3 a3 z, D  R; b7 p: [3 R# s5 p }
/ u$ U+ i+ @2 u# r: Y# t}
1 B1 j& U; M. C% @$ n$ m4 b* yarrfbox.sort();- M* r# C3 O$ s* w* [4 K
arrtbox.sort();
2 ]& P8 }5 {/ b/ j& o' S( z# H9 @5 g) J; k9 R
fbox.length = 0;8 z9 s6 c5 }3 n! y
tbox.length = 0;
1 }) C" `9 w+ a! xvar c;, ^1 [6 ~8 O5 s# W: c
for(c = 0; c < arrfbox.length; c++) {
7 \" p# o1 T+ X% }+ Q# Y& t; u& rvar no = new option();
1 T8 t& ?& i5 u3 ?- {8 V4 Dno.value = arrlookup[arrfbox[c]];. c+ X" K" x: Z% a( Z
no.text = arrfbox[c];
1 c! p" @% Q1 f' u* e4 m! Efbox[c] = no;% V9 T, ^; J9 P% A) {& S
}
  i) h! Q% h$ E7 H, [! w1 Z' ^for(c = 0; c < arrtbox.length; c++) {1 s& x( C: g2 w% D
var no = new option();& a* z$ k9 N) @- G6 Z
no.value = arrlookup[arrtbox[c]];
, x# s) }1 M6 [no.text = arrtbox[c];3 H/ L, x- h* y, t4 q
tbox[c] = no;
; W! E/ r& L9 K: l+ d5 u! y3 ^+ d, ^ }" C$ M3 V& ]1 ~# y/ V
}2 `% U0 K) A6 O# S4 O8 Q
</script>8 h5 M' n8 i( Y' ^& W
</body>4 w$ P( u* D7 A2 O* l

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

返回列表

jsp+javascript打造级连菜单

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

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