jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"' @* ~2 W! i# S+ J; _
%>
<style>
.f9{ font-size:9pt; }" \/ A5 j' y! Q2 r
.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;7 R7 @9 G' j2 R; b0 \5 r3 u
  border-bottom: solid 1px #4e7dc1;8 e1 ~, l6 w% d) i' e* z. s
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;2 U; ~: h( i, h: M4 O% F% x0 |
  padding:1px;
  margin:0px;}+ ^/ `) h7 M) `" r
</style>
<script language="javascript">

  n$ E; u( g2 i, M$ L# L. |* L</script>( r. d+ b' q! {$ x
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
' c- t& ?" u) {<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
/ c* w" u, h3 R3 Z<%  H# ?4 r4 y$ i( x% ?# E3 r
  cdatasource ds=new cdatasource();  //数据联结bean实例
, P4 [6 j+ ]( o  java.sql.connection conn=ds.getconnection();- ]4 x3 |% }+ N# d6 c
  java.sql.statement stmt=null;0 Y! Y  O: g+ N' N7 H8 k* K3 ]
  java.sql.resultset rs=null;; r; C- F, d* \5 p
  cdatacheck dc=new cdatacheck();2 s! i& [1 j0 l4 M: J2 b
%>3 `  K( u& B1 ^+ s" j+ _
<%
1 Q) c0 s4 v4 g# Cstring 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";# H7 O9 |/ }! a4 T0 P0 G( e0 |
stmt=conn.createstatement();
5 A1 Y* d( p; Irs=stmt.executequery(sqlu);
) _7 \7 V* [3 o% _. C%>; T8 L, J6 Y# A
<script language='javascript'>
3 [$ k  G/ u0 i3 b' larr = new array();
& y3 i* e( D( R* K: I' i* y<%  int temp=0;
( v" q& |2 m; o% Swhile(rs.next())3 Q8 a' I: N1 Q2 W- s0 g0 _
{/ Z/ }7 I) v, z' v
%>3 W- G0 [1 b! r6 C% h) D
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");1 `! L3 O2 W1 U( g/ ^: c
<%  v8 n; \7 r; g* L
temp = temp + 1;4 R: v1 h' o& M6 f7 U# ^) k
}
; M+ s  C8 z2 l! H%>1 M/ A7 h; o+ r* Q8 N
temp=<%=temp%>;
0 E3 u* q8 e- P6 U# S: d, kfunction changelocation(id){ 9 `0 U" ]) {1 s7 b
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 . }  h# J2 k) N- `7 p8 d
var i = 0; 6 y& h; B4 ?- W7 ^9 P! ]8 O+ Y
document.combo_box.city.options[0]=new option('-------','');
& v- q% s- c. I4 o7 Qfor(i=0;i<temp;i++){ 9 N$ O  |: {: k3 u3 j$ b  B
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
+ s6 A% k4 E6 o+ A5 Xdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); # W7 }* |# m) }/ U
} $ ?2 \1 n# R& X% S) ^+ `
}
* B$ m. |1 L* n8 k0 G9 M8 l' {}
% @+ T" a7 w, A" l</script>! w( n$ E  x" o' V/ P
3 h) c/ B# A1 E7 g, E
<form name="combo_box">4 y2 v$ z& u4 {- v. M6 D$ n
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
9 D4 A1 U# Z' P) {* G: @6 j+ t  <tr height="24">2 ~1 y3 {4 T. T) y* X! b8 }
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
/ F; ~& W7 o5 F7 P <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
2 w: [) U# c/ x! H: x) l* d <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
* [$ F! x. s) Z; M, q7 S6 [8 M  r <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>  W9 t1 ~$ g& z5 S
  </tr>
, V% }9 b4 U$ F$ k" f2 t  <tr> ! J8 s5 V, P8 s: k' {+ X
<td>- D$ ~2 P: R$ ~7 o; X  C% g
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc"># Y, V6 @5 m, Y7 s1 j1 e
  <option value="0">请选择部门 ---></option>
1 q& C  A; V- o2 m<%
' T/ S/ m8 p  y6 [/ e6 Q string sqld="select * from tdept";: q8 d9 h9 B+ N, H
stmt=conn.createstatement();
& `& i5 g/ ^/ v; V% Krs=stmt.executequery(sqld);
% g5 K! q9 n( V# x' K9 Pwhile(rs.next())  z/ g8 y* V$ M0 ^
{$ R# q8 }  _- ]  K
%>
4 u1 L! C" r; ~  P6 ?4 l  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>+ ~2 U" ]: i9 K/ l2 s
<%+ Q8 j: ~: ~+ d; A5 b
}
/ Y* }  R6 v0 y* {, \%>
+ U  u8 D( a4 t  ?' \- s3 _' b  </select>
/ S2 q; H. M6 T; P" o) X</td>
* ^2 ]9 U5 _! }& P5 y <td>+ F2 ?. M& x- C
  <select multiple id=city style="width:150;height:200" class="bgc">; X2 R. P9 a( A  T% r7 ^( Z5 Z
  </select>
' g" U$ [! G6 ~' F7 t</td>0 g' Q# m  ~) d: s% `
<td nowrap align="center" class="bgc">
. S3 _9 j9 _) s  <input type="button"  value="<<" class="buttons">
" L; W  D6 T/ O3 R  <input type="button"  value=">>" class="buttons">
: |% }& z( O! U; a1 R</td>
* Y6 `0 a9 I8 x  _* W( `# ` <td>% a+ G1 E, Q" V7 o, I5 c: G2 F
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">5 K" u. g9 b  v) A( H* j  A
  </select>. d: l! ]  p8 ]! c0 ?1 U& G
</td>
; ]3 ?( t7 m* ]7 O  f  </tr>1 j. {& L* A. d, [3 Z
<tr class="bgc"> 4 x0 ~3 o4 x* k* d- m
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>- a( ?  ?' x  _0 b; l
  </tr># X$ t9 O. k3 }$ E" W. U
</table>" \0 o0 }% q& L- K" R  H1 j, g2 t
</form>8 r% X% V3 x$ B$ k. c4 ~
<script language="javascript">/ S: \  P! {- ~+ |
//人名移动, X& J2 L2 `4 P. A* x& H- N: Z
function move(fbox, tbox) {
: v$ u- [# O2 Q+ q6 Kvar arrfbox = new array();
. i8 z: B/ i! p; hvar arrtbox = new array();- ?% \; ?. m+ E; |7 J* |& W
var arrlookup = new array();
# L- W% }1 J5 y! Z, Avar i;9 _3 y) L) ~; Z# r  H
for (i = 0; i < tbox.options.length; i++) {! t* e1 J  W$ H9 x
arrlookup[tbox.options.text] = tbox.options.value;1 o( e, Z. M8 Y3 D+ l
arrtbox = tbox.options.text;7 C/ t) o: X% W* ?" }
}
" i4 {) Y4 P( w/ g1 n" Q4 |4 p2 kvar flength = 0;/ L# k) y3 Z% T+ a7 u2 i) {% c
var tlength = arrtbox.length;
7 u. ^, Q6 ~5 v* f& }1 H; ^) Afor(i = 0; i < fbox.options.length; i++) {6 D* W" j/ O% D6 R( U2 H2 e
arrlookup[fbox.options.text] = fbox.options.value;
. |1 Z" n# j* C7 b, V( Gif (fbox.options.selected && fbox.options.value != "") {
/ i  f0 D2 B) r! f) aarrtbox[tlength] = fbox.options.text;+ ]# O- c$ e* }" [! @. ~
tlength++;
- f7 `! S7 _& E! w( K1 G}7 h5 T1 E4 \) z! h# j" j" B
else {( m8 p* x+ l) m4 D6 f2 P$ M
arrfbox[flength] = fbox.options.text;
7 t- c$ U6 Q" e9 L! Y( cflength++;
& y& i: {9 q+ \ }5 R, r5 p; G9 O  I/ o: R& ?
}
5 v8 h, }3 j$ w' H; C# jarrfbox.sort();+ F2 a; o/ k$ }" a) l
arrtbox.sort();
- [5 T. F2 _! o+ m: k8 i2 e
3 U$ d8 q# L+ l3 N7 wfbox.length = 0;
+ r4 r# K; n+ m* F" jtbox.length = 0;$ h9 |: j( g% f# \4 s
var c;
& W5 \& ~' D, t: i, X7 P) Bfor(c = 0; c < arrfbox.length; c++) {4 m$ q+ v% B# H# j; X- J2 u
var no = new option();
9 \+ s! L- K; |+ H# `  xno.value = arrlookup[arrfbox[c]];: m# n  Y9 p3 W% V2 D/ f
no.text = arrfbox[c];
6 e4 Z0 m; ]6 c8 t) U$ R: Jfbox[c] = no;- j9 E' l/ N# ~
}8 h1 A- [, _) V9 r+ a7 F
for(c = 0; c < arrtbox.length; c++) {4 d- I. z/ H4 G( u7 H7 Z& c8 G7 K
var no = new option();) i2 r5 f! w' X5 e6 F
no.value = arrlookup[arrtbox[c]];  Y' E' I/ O; {; B8 o
no.text = arrtbox[c];+ n: D0 h9 O* A
tbox[c] = no;2 L7 p, u3 l+ X! _3 t
}
8 Z: @8 \4 R3 N+ R2 M}* C6 D; I6 H; t
</script>* \7 @3 \+ l, A& ^1 i
</body>8 R) s5 V% i" v1 \/ z1 z

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

返回列表

jsp+javascript打造级连菜单

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

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