jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;": T; ]4 G( V$ }# z" p1 i
      c pageencoding="gb2312"# Y9 N+ R; y9 M- p0 d; D
%>0 U$ |5 o/ ^# m0 b0 L; t
<style>
.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;
  border-bottom: solid 1px #4e7dc1;6 w; [4 v; p( E6 U2 ?. B3 n
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;& J5 \: K7 G( ]2 u3 v! p
  padding:1px;
  margin:0px;}' T) I0 O8 X  u! T2 P# l3 o2 t# e' U! r
</style>
<script language="javascript">
& e1 \2 N% U' T% M& P% |& z
</script>
  x* J2 a2 E; K1 v<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
# t- w% }- O0 \' ?6 _) b! V<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />+ r, Q- O2 _% D! x% h
<%- ]- ^- L8 Y" B% V. x' S3 T
  cdatasource ds=new cdatasource();  //数据联结bean实例
) k1 M6 G: n) L  java.sql.connection conn=ds.getconnection();/ |$ q, t- e( M' ]
  java.sql.statement stmt=null;! y0 d9 [5 W1 Y+ i% m: q' J
  java.sql.resultset rs=null;4 V/ A. e) L3 O1 K' g, O- D+ \
  cdatacheck dc=new cdatacheck();
7 I" q" Z9 h! J9 l- S%>/ V# k9 `6 m4 V, Z: N( m4 x
<%7 b! v  s3 `( _; G
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& P2 S: j! ]* M# {* G4 n5 h0 mstmt=conn.createstatement();( O0 ?( [5 ~; ^5 L: E' J
rs=stmt.executequery(sqlu);
" V: o4 A+ A. D%>2 F  Q) I0 p' N# W! i! _# d$ J. @
<script language='javascript'>
" a  L0 @1 A* F, e3 x' Zarr = new array();- i! b0 z$ G+ F# m4 E% D, u" v
<%  int temp=0;0 I0 o# i$ B6 P
while(rs.next())/ q# J) S8 s9 h* }# G' d$ C4 C- l
{
0 ~# Q* {- [0 B4 V5 o& N. ]%>
0 Y* @! {6 a4 R) @0 f  ^4 ^arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");0 y8 D* L( w/ x  S: }$ i
<%
6 }7 J. H  `% a# B( `+ itemp = temp + 1;' F9 u' @  g6 L. {" w# @
}
) v  W+ L; @" X, A%>! x: T3 {) _7 _5 G0 x, B# \) P
temp=<%=temp%>;+ H) V: w( \6 y& l2 ~" H& e" ]
function changelocation(id){   w% C1 M5 C; A  w
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
6 v8 \" H$ f( R( Vvar i = 0;
9 }8 _& C! c  \) Y+ X. Xdocument.combo_box.city.options[0]=new option('-------',''); & U1 J4 `+ Q, u7 y
for(i=0;i<temp;i++){ # {) _0 v3 J+ @8 {9 E
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
2 j# o( Z, [; I/ H' M2 h% Edocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 0 U  R) ^* @- n- c( P+ T  \6 _
}
$ r! m, P8 p2 D+ T  h$ K: r} 2 W  J. D, t& u) m
}
$ D7 J8 V+ I; q! `</script>
+ B' b: q% m- W+ o' j
6 G5 o# \( n' g6 K<form name="combo_box">
! p* b; k) [6 u, t( c: j<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
/ |4 j* s: B1 u( d& i  <tr height="24">7 C, _" H: o7 L8 S  k" O( i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
9 ~  {/ J1 K" z <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
1 q' D! J0 j$ a <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>4 F$ z. L( s4 m, A& [& p
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>$ T* T$ H* P0 Q/ x- a
  </tr>
) f5 E5 C8 M6 }6 [  C  <tr> 6 k! J# a9 R! E- _5 W+ L
<td>
' H5 k2 O/ u3 L, R0 E( Z  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
9 B* `- _7 |' [: r' p7 U6 b  <option value="0">请选择部门 ---></option>/ Z) `3 K% ?' Q' V: Z+ {% k" z+ t
<%
9 z/ }4 F' u6 k# K1 A3 L. w string sqld="select * from tdept";
# ^$ r/ d( ^8 o2 o2 h2 t# N+ i4 g/ qstmt=conn.createstatement();
6 O" A9 |. L( d# {: W9 mrs=stmt.executequery(sqld);! Z" q; ~) c) |& h" L( }0 k
while(rs.next())8 X7 c# U' D( v# m
{) X4 L+ Y! f  d
%>
) s- B9 r: ^2 e  B0 h6 J  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
! t4 w# B5 v. X) v4 u+ j; J8 `. a. c<%# m+ P; h- S; }/ M) I" a! g3 ?
}
  a8 u$ {8 Q0 \" E%>
( s5 t3 L( \# ~, k, V  </select>
9 D# F. z0 _$ Q: `</td>+ u8 P! ]  I3 N; H
<td>
& s9 r7 d2 [6 n1 {  <select multiple id=city style="width:150;height:200" class="bgc">
- P# r8 D5 z% @" O4 m  </select>
5 Y. p" u+ O2 {- W</td>; ^) S3 F' a3 V, J
<td nowrap align="center" class="bgc">* G3 n8 j; J- d* w2 p4 l) N- _  W$ d
  <input type="button"  value="<<" class="buttons">8 e7 A3 m$ f& q$ ]' g6 M- g
  <input type="button"  value=">>" class="buttons"># g, _# q0 u( m
</td>7 w" o* L' h! `
<td>) l' _! ^: l. F& M5 m
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc"># D7 Q# t) B2 ^$ @0 c" ^( Q
  </select>4 V2 G" o) X! x3 j% u
</td>
, |, g0 S$ A7 H' u  </tr>
$ X% C# T1 ^* l, C) ` <tr class="bgc">
: ~5 e( L7 }6 |1 L6 k <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>( V6 C: v0 a6 m: j- w0 w
  </tr>
, G3 X, m7 |7 @; E: v</table>9 F& ?7 y2 `% E7 ^# g) Y+ z
</form>; \6 d. c2 q4 m% j
<script language="javascript">: P; g4 b7 e2 l" |+ O5 Y* G
//人名移动
5 t1 Y+ c7 E: M6 o6 sfunction move(fbox, tbox) {
# q, Y* @/ x( v- f3 D2 Gvar arrfbox = new array();
  t: \; F6 m3 n  r" {9 zvar arrtbox = new array();4 c2 g& ]  m7 C6 u/ J+ e" q/ ?) B
var arrlookup = new array();
" s! c1 L4 `; ]+ n3 v4 x  s3 X' Lvar i;, u' S+ p& Y+ f) f$ h
for (i = 0; i < tbox.options.length; i++) {* M& Q% s. K5 ^, f: O4 d
arrlookup[tbox.options.text] = tbox.options.value;
, J; k, D- q( Carrtbox = tbox.options.text;. F4 O' e4 g8 x1 {8 T" Q6 i
}
& U2 e( i% Q) ~8 O8 uvar flength = 0;
- Q# l6 s6 n- {% }4 e5 N2 u' Fvar tlength = arrtbox.length;- h8 I  \' h$ K, b
for(i = 0; i < fbox.options.length; i++) {
6 `) D! n& W$ [2 h9 Jarrlookup[fbox.options.text] = fbox.options.value;
2 u/ O" u0 O: {* rif (fbox.options.selected && fbox.options.value != "") {
/ r3 K7 G1 {$ v8 R- w( u3 zarrtbox[tlength] = fbox.options.text;: q( L1 \1 m6 v- f7 I0 q0 x  z* t
tlength++;
" j4 g7 z+ k5 a8 h& n+ [}6 Q7 r; x- F, H: g* p
else {6 d4 O1 _6 g/ |* ?4 Q3 J
arrfbox[flength] = fbox.options.text;
- j3 Q1 U+ ]* F2 a, ^- x% Vflength++;$ t8 Y1 z; n4 d9 f
}( W& P, x! N% ]- Q6 F) C5 s9 f, X
}
& W8 L% r9 q5 S( {5 Jarrfbox.sort();7 n+ h4 {2 M  d
arrtbox.sort();/ D+ e& O9 R' ]  R# w
/ ?# r* C! r+ Y0 e5 F
fbox.length = 0;. l, D7 Z& U. L% f* Z5 e
tbox.length = 0;
( u; ~/ @2 M1 Zvar c;
7 r) C$ j. P) Z& t3 ifor(c = 0; c < arrfbox.length; c++) {8 D& X  J9 B% A8 i
var no = new option();
0 _- e: O6 f$ `  }% k' \9 |no.value = arrlookup[arrfbox[c]];5 r+ ?- U* R: J; U% ~" U' y7 A
no.text = arrfbox[c];
! O( r9 i; A* a  nfbox[c] = no;- m3 T; x% y0 x9 W& K
}! h) `- Y4 U4 f: G
for(c = 0; c < arrtbox.length; c++) {
/ ?5 i+ z# T( ]4 g5 w* E; z. Uvar no = new option();
- S6 E; u+ W) |no.value = arrlookup[arrtbox[c]];
& H1 H" ?4 h$ P) ?( Uno.text = arrtbox[c];0 P8 w* m; q( ^4 a4 R" t
tbox[c] = no;
! F# \2 E1 j, ~5 x" ^9 C0 i }+ n. b- y! |. c
}
3 a: z+ \2 D' Q& j! u$ b! |: ^/ W: P3 G</script>
4 U9 q0 Q! K& q0 t$ t! f" W/ c1 K</body>: [4 r9 S; J/ K$ ?

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

返回列表

jsp+javascript打造级连菜单

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

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