jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"- U9 d" Q7 m$ I$ @# K+ _" |6 D
      c pageencoding="gb2312"" Z' H9 T+ m, @0 W4 U
%>
<style>
.f9{ font-size:9pt; }5 [0 k7 h- c  |4 P+ B  z) f9 E1 e
.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;! ?2 n, p6 ?4 D9 Q* Y/ [2 U
  border-bottom: solid 1px #4e7dc1;3 W: G( a, {2 `! k" v$ Y
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;  o& N" m& }) K& H9 e
  margin:0px;}
</style>- L5 y, z0 T0 f
<script language="javascript">% V# u0 P7 ]8 E1 ?: @% ?2 Q# ~# s( e
3 B* R' T& W5 ^6 b  X
</script>, g7 l- c) d# s
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">9 z5 [9 n3 E) x- c2 A
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
6 @- a# m! c2 e  C$ c: _8 J<%
, Z- W( D! w" z$ Y) H& g3 i  cdatasource ds=new cdatasource();  //数据联结bean实例
7 E7 }- ^: W: u, ~% k8 e6 G  java.sql.connection conn=ds.getconnection();
6 ~  j5 P; `. _0 v  java.sql.statement stmt=null;
2 g; Z6 A' p. D  java.sql.resultset rs=null;
$ o% k# s6 \  H  cdatacheck dc=new cdatacheck();8 y' S4 o" W- C- q* R
%>9 v( Y; r. W- T2 y4 \$ f8 N7 ~2 F
<%
- I0 j9 ^" R3 H0 \# T: }9 R2 i" o& Gstring 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";4 s. F6 C8 l) P2 G. L" W
stmt=conn.createstatement();
" ?# b3 E# a% p- F9 }# i$ U/ @  Trs=stmt.executequery(sqlu);+ ^6 \% g0 ?5 q- Y& O
%>  F' r8 E, [  {1 s& ~4 i
<script language='javascript'>. \: f) R/ ?- l+ m) J! b
arr = new array();
2 Z; T: f* _, l! U- m2 k<%  int temp=0;
" O0 l  @/ b$ h" C# ]. C+ Cwhile(rs.next())% _: \, k) a! x4 s! _# J/ s; }
{
3 V' f5 x- x3 P9 n. Q4 T- f3 a%>
4 |3 e6 T/ e( K9 y) N3 parr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) s' f6 ^$ \8 L* Q3 y5 ^! ~<%
# g$ |: y  ?/ s! Atemp = temp + 1;: N# C& x. E. |2 X5 C
}0 @+ q# R, G& {, q
%>( Q5 f: c# h; d$ \3 p
temp=<%=temp%>;
8 {3 y3 ], M2 M& kfunction changelocation(id){ ) y. {1 U# L) C
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
" p$ ?: V5 |* J, L& T/ A% J4 c, S, [( gvar i = 0; 4 E; W8 M6 ]2 f2 j
document.combo_box.city.options[0]=new option('-------','');
- e4 i0 C& p( i3 S5 sfor(i=0;i<temp;i++){
& V2 }; w$ e# K4 e2 a6 {if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 2 U/ c3 a3 ?7 |' `
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
+ _2 y5 ]0 ~1 H0 j( L( h' P}
4 r& q  p2 A7 f6 Y} % Z! z. k9 z( S8 ^
} , o: w+ i8 B- [7 w$ w; J
</script>- C" `- k  P9 e: _' J( V9 J

- X3 C" g+ B. Y<form name="combo_box">
0 g4 Z; d9 ]: d; q7 c3 d2 o" q<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
2 Q. Y/ t$ A" D' S9 o. b5 G  <tr height="24">
0 Q6 U7 _0 d; C' a5 T7 c <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>  ^2 c2 e" |  C4 c6 ~
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>7 |" n* @2 P: x6 ^/ d, W! P% ?/ l' @4 L
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
3 d0 @2 K+ i( G$ L$ l4 g( t" k <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
4 o' N; U. w* \" s  </tr>- p6 g' b2 C) H$ b  x) ?% P. H( W
  <tr>
% R* c5 m- j3 p; H- V- R: N <td>4 S% V/ Y* d  _7 r: I- K
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
; A% j. m& D( ~# q9 X5 _  D  <option value="0">请选择部门 ---></option>
) r) A! N  v4 t; q0 W5 N4 f<%
+ ]* W, Z# {+ C! E" ]& F, P7 @6 L string sqld="select * from tdept";% |5 P; z2 X+ G' n
stmt=conn.createstatement();* q# T( @: {$ u8 N9 j
rs=stmt.executequery(sqld);
  X$ y+ e/ b. Y# {while(rs.next())
2 x& F) }: H4 N, }{3 x. k: i8 W, K1 u, Y1 ]
%>
8 I+ V1 q; G, J" \% z" P: G  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>5 n0 m0 i( I# b, \% ~* H  P
<%
8 a( B9 f! a/ R0 I+ ?$ P}
9 g0 s8 Z  i. D; B' Y) m%>
/ [+ |( u0 v9 P' f# H1 _% ^  </select>
% j! Z1 K0 V) |9 x2 e8 C</td>% ^0 U: `& ?- m
<td>
* m+ O; H) L& C5 ^/ w  <select multiple id=city style="width:150;height:200" class="bgc">9 u: Z, [( a8 T1 W# ]; x2 {
  </select>
3 T3 K0 p$ u% a& C' U/ |' C8 m</td>
1 @5 b- z( L2 Y. K. Z4 p: f5 }! } <td nowrap align="center" class="bgc">
4 G0 k) `# X' r3 e4 _! \# i, ?  <input type="button"  value="<<" class="buttons"># `8 r* E! u: ?5 t  i4 @
  <input type="button"  value=">>" class="buttons">
; Z/ J) d5 m, p' ?# {</td>
- Y: Y+ \* n* U. s* n# _+ ~ <td>) b2 }9 G9 p% Y# A/ ?& d2 l! L. W
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
0 q! Y& C( c  r' l: ?4 f2 d4 v  </select>) L1 m( T7 e( |- F
</td>8 L' W1 ^  M5 j% h, q3 h" l6 m
  </tr>
) ^: d" j+ y2 s4 P6 M2 ` <tr class="bgc">
5 L* V# v) Y5 A7 V <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
& T( t( T4 B! O8 W  </tr># m% n- o# ]( o3 e" m2 C
</table>
+ p" Z) {, j+ ~# `9 X</form>  R1 b- G$ E& _' [
<script language="javascript">
$ l+ @/ d* d) o$ _5 ^/ z//人名移动
+ T: e% o7 h" d9 e% g" [" jfunction move(fbox, tbox) {2 x+ @$ S2 G7 m9 ~7 G! k
var arrfbox = new array();& t: L. o9 b4 j% O, y7 m
var arrtbox = new array();
0 o! r# E$ N. @. f1 g4 `3 @var arrlookup = new array();
6 w* l$ v' w1 @9 F1 J5 H# r$ nvar i;
8 e7 s% D8 `; q3 B, L; N* ]for (i = 0; i < tbox.options.length; i++) {
. f4 P0 }3 r4 K. }arrlookup[tbox.options.text] = tbox.options.value;
7 f6 g" f! M& ]2 E, \arrtbox = tbox.options.text;6 H) u0 D/ B! |# w' i
}
, Y/ _. o4 w5 ?& \" |+ P9 fvar flength = 0;
  `8 E# H& t: F2 O2 T- Bvar tlength = arrtbox.length;4 \2 L, V9 z0 z; \
for(i = 0; i < fbox.options.length; i++) {! Y5 w! {; f  H. u9 y1 O
arrlookup[fbox.options.text] = fbox.options.value;
0 F: a6 T6 h. D5 x9 p4 J2 ~9 F: Uif (fbox.options.selected && fbox.options.value != "") {
* [0 D$ ]' f: S6 c6 Q% varrtbox[tlength] = fbox.options.text;% ?1 }5 L0 J$ Y
tlength++;
! `! |2 m0 L2 [1 |}
8 q- C* |; m: E( B) Z1 ?4 B/ D. ^7 celse {
) \& s! ^3 p: {" H- H8 U0 k' S# v$ Garrfbox[flength] = fbox.options.text;/ A1 c; A& @7 j" U3 E0 E1 S
flength++;
: M% r& e- A" F) Z4 b# Q' U$ D }
/ x6 d! H( ?1 b9 i$ Z- P! y}
' V* o% z5 F' m8 q9 iarrfbox.sort();9 V8 F5 G% Y1 B
arrtbox.sort();) X* U- Q; s1 o' O

, K# h+ A; ?" d# X/ J' l8 W9 f: e: Tfbox.length = 0;: d! i$ m+ F/ J5 f
tbox.length = 0;
0 \% T2 U- q  D( f2 Vvar c;
for(c = 0; c < arrfbox.length; c++) {* a1 _: @* I- O7 p( d, \. a/ `
var no = new option();; `6 v! ?$ F. A! B2 Z% R) `8 F
no.value = arrlookup[arrfbox[c]];
% [- L) i" _1 C- w0 f6 Dno.text = arrfbox[c];
8 W+ F! N0 s8 B* g3 G0 X3 c1 Hfbox[c] = no;9 E8 e3 {+ f0 b6 P. T: E6 M7 p, o
}
( U& J' X6 d4 e0 a) Qfor(c = 0; c < arrtbox.length; c++) {  [1 W8 d6 X; B. p8 S
var no = new option();8 n$ Y. }+ U% T3 Q+ e: y2 h" S0 [
no.value = arrlookup[arrtbox[c]];
# _* _6 F, W: Lno.text = arrtbox[c];
4 r% b. ^6 V6 J5 Atbox[c] = no;
1 z# [; |. S2 [( X }
* t" ^4 i# p) F" E4 e9 s}
5 m# d# t& r3 w* q, M- m8 a</script>1 N+ b9 e" v+ W
</body>  \( [/ S( R7 j

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

返回列表

jsp+javascript打造级连菜单

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

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