jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"$ p2 D8 _/ @" B: o0 }4 E* _8 k( e
%>
<style>7 u3 C4 q; n/ M8 T2 R
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }# X1 \* H0 C# H7 g' z# j; z, H
.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;# K# a. K% Z2 o1 L9 N, m; \
  padding:1px;! _. a% W: J6 ~- z  Z
  margin:0px;}
</style>3 L% Q8 a8 \8 I' f0 t/ _: u* Q
<script language="javascript">

( o% t  n% I: ]; _" J/ U</script>2 V4 R' D! J$ R9 N
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">) R+ p4 P) w3 j$ j/ d& o$ y5 |( }
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />7 ^1 E$ a$ t' I0 e! u1 v5 A
<%6 `3 O6 C7 P# P; S; ~! r6 L9 ?/ ~
  cdatasource ds=new cdatasource();  //数据联结bean实例: v; Z  I: g. i6 F/ E5 S: \
  java.sql.connection conn=ds.getconnection();
6 y5 j2 x! l) l6 x3 W; Y  java.sql.statement stmt=null;
$ v, E$ G% k! q0 |5 l. V  java.sql.resultset rs=null;
$ K' Z8 d9 `1 c" g* V6 H. f8 z  cdatacheck dc=new cdatacheck();/ U" T0 J8 y- v# N
%>+ e; b' z4 d2 B# ?
<%( b: U! {+ \% n; P8 ]! D* T
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";
. T- l: q2 ?* I0 _6 O5 tstmt=conn.createstatement();
/ J) b, `; K1 |) Urs=stmt.executequery(sqlu);
& h5 [0 v" o$ s7 r# o8 q) U: U%>
$ G8 r% ]4 X1 z' R; P& |<script language='javascript'>
5 D& I% H8 C7 }0 `+ Uarr = new array();: I: ^: L' k9 Z  K- X  [- F
<%  int temp=0;
7 B# t8 q+ P: Nwhile(rs.next())
; C* i% G+ `1 u8 U# B+ k1 I{4 t2 J( _# t" _
%>
$ j; O' t9 Q' barr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) @; o9 Z! l1 E' i<%7 G/ k$ f$ m# f% V
temp = temp + 1;
# ~  z; A7 M9 ^3 k, W' K}% _- |; W% _9 v: z1 b
%>
: |/ A& w3 ?1 L# i: j# ltemp=<%=temp%>;
/ C) y  _5 u: k! J1 bfunction changelocation(id){ & i, w1 V' V# w8 ^- d* j& ?2 R
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 0 Y7 @8 M0 J1 l8 _; k( c
var i = 0;
8 p7 C* ~0 ~/ M! l% B) ydocument.combo_box.city.options[0]=new option('-------','');
/ H) N: v5 o4 Ufor(i=0;i<temp;i++){ $ R# A$ r. p, l# n3 q! L
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] $ A) W8 ]) u' W# z# r* q
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 4 @+ J( [8 U9 `3 [
}
+ S, K! u9 B& Z+ H} 7 {1 ^6 L$ c3 k
} 1 w0 Y; {& ]! a3 s0 X
</script>: V4 M/ U9 }! U& F
! a% P7 }9 Y) B
<form name="combo_box">
* }, m* `( x6 n2 F% L8 w<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">" O4 M2 w1 t* N2 c# }: E0 _) n
  <tr height="24">
& }8 R9 k! \$ J: L6 W& |2 z  | <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>$ ]% R- c- E0 U3 o. g
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
1 ^; @' n( p1 I/ F7 q: H <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
. J0 {8 o  a* o# I3 F; P" _' \ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>6 l" O' \3 G5 S5 q1 x% x' c9 ~
  </tr>
6 m8 I" b8 _3 u- u9 [  <tr>
) R& c! d( J' ^" [# U6 \& x <td>
9 Z; m3 r) N! {0 Q5 ~3 N  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
# P0 o7 `! o" I4 P* n# x  <option value="0">请选择部门 ---></option>
7 l: E& w8 [7 V3 A* ?3 M6 v/ Y<%
' W' C$ c$ ?; V. S& X/ w( {& o* a string sqld="select * from tdept";
$ y# ^( l) f2 R8 k: C" Kstmt=conn.createstatement();8 H5 g0 }6 W, g6 G
rs=stmt.executequery(sqld);
: x- ~: L0 ^. U2 ?+ r; nwhile(rs.next())/ z3 g* N1 w& U7 y$ |7 u
{7 W, |6 {' z8 A* G: e- S5 x, `( e' N
%>
$ F9 ~% P; ^5 c  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
+ B( m3 q, G  Z+ [<%6 \0 `( Y6 I- {( u/ v, P8 ?
}% ^# K, [& R' b1 W
%> ; \. o/ O) c) h( A" K
  </select>
  H6 w- M: a+ b4 t* A0 }5 t</td>
% U$ e% O! M  ~9 ]9 Y% A <td>0 G* b1 V# E; l
  <select multiple id=city style="width:150;height:200" class="bgc">5 I% W4 i* F; D  [8 d; j* y  U
  </select>( q* h* J! x6 G1 h" f' Z2 w
</td>* G5 n# R! U" L. L) I
<td nowrap align="center" class="bgc">$ k5 ~) P7 P$ I  Y6 _, h
  <input type="button"  value="<<" class="buttons">+ p" ?/ I7 w. x
  <input type="button"  value=">>" class="buttons">
2 c' e" F) ^, W( F</td>
- G7 e. W) U( b3 Y3 \9 | <td>
7 @; U7 Y- o2 A0 i/ F  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
2 s; c0 X9 P8 j6 N, b9 E" K  </select>
+ J) \3 D( g  [9 |</td>
3 H# z. @8 }, T# }. ^% J/ X3 b  </tr>4 F4 S& _/ Y3 e. ]: W
<tr class="bgc"> 3 m+ ~, }" A* P& B
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
2 @: G3 _1 c) _& x# r1 A- }7 [5 u  </tr>
$ D5 p: B" @% r; D" j) F9 C2 H</table>" A- [. L8 A  M
</form>
! }' A& `2 a( g5 k# I2 `. s<script language="javascript">
! {& Q/ ?# c1 N//人名移动
: V# L  O' }8 x6 i8 W5 ~, @function move(fbox, tbox) {
3 ~3 K  j3 ?, j, a( Kvar arrfbox = new array();$ ?0 J1 f1 r: B' r2 T) c9 l  f
var arrtbox = new array();
8 a$ k7 n, ?$ [. Gvar arrlookup = new array();
6 a4 v- A/ d- I# M6 s3 L! bvar i;
0 w3 F9 N! Z) m; O0 d9 K2 Cfor (i = 0; i < tbox.options.length; i++) {
, e' P5 |% t8 \4 c! i2 Larrlookup[tbox.options.text] = tbox.options.value;
9 n' K3 y0 ]' `% Jarrtbox = tbox.options.text;& [5 p7 L' @! [# a/ m1 ]6 L4 x7 b
}7 u4 u, X4 P9 g7 B. D
var flength = 0;9 [, Q5 l1 d- s: C/ c
var tlength = arrtbox.length;4 ~% i# T! Y( {1 }' V3 R' N3 ^
for(i = 0; i < fbox.options.length; i++) {
9 G$ v0 U, G2 b* u, l  aarrlookup[fbox.options.text] = fbox.options.value;8 r3 C; Z+ K/ I2 N5 x6 C: y
if (fbox.options.selected && fbox.options.value != "") {2 `1 `7 q& q* z6 K# i! U8 F
arrtbox[tlength] = fbox.options.text;
. s: d2 ?9 \8 t/ x3 W' U9 z5 etlength++;
& t" ^9 o+ m, |' ?' S}
* M9 C: ~% \" h  c5 t3 Gelse {
8 H$ n3 v; B' ?# r8 Zarrfbox[flength] = fbox.options.text;
& C  y4 I1 l: I7 m0 Y! M( Fflength++;# {) ^- V% ~0 V  A
}
3 W; A- N& {8 f  w% S9 ]( e}6 Y8 j$ K5 c  o. A# G& Y# S# B
arrfbox.sort();, s! G) b$ u  u- l2 i; G
arrtbox.sort();
+ w5 O+ C6 y: @4 ~5 @& D, T* i* I  I
% j' N- P7 {0 o; lfbox.length = 0;
3 g3 d0 e; L1 ]* k8 \7 _% v; Itbox.length = 0;
/ Y$ P+ g' |) i- s+ W& v1 [/ zvar c;) |$ \! e. `/ v# {) C. @; |
for(c = 0; c < arrfbox.length; c++) {& t6 I5 |* o  E
var no = new option();& A. ]8 a! P8 F* b
no.value = arrlookup[arrfbox[c]];5 F1 D% ^7 L, t0 \
no.text = arrfbox[c];3 R- B/ J, }4 @# Y# b( w: m- A3 j
fbox[c] = no;
+ }1 g; A( c' ^3 ]6 s* T6 _}
for(c = 0; c < arrtbox.length; c++) {
& {: _  X. k+ Z6 ~6 Avar no = new option();0 u) \; q2 I8 j# l( E2 F; b
no.value = arrlookup[arrtbox[c]];
4 J2 I2 Y& I% d2 n: B' lno.text = arrtbox[c];
1 Y0 q& O3 U' f" K/ `% w9 z+ atbox[c] = no;5 ?4 Q# l' a% `7 r6 I
}
6 T/ E) e. s- p6 p}, Q" T# t; W  a
</script>' e6 S8 B# n9 v5 l
</body>
3 w" z9 K. h. D) g6 ?& X( P

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

返回列表

jsp+javascript打造级连菜单

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

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