jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"; O% T5 w( X- r
      c pageencoding="gb2312"
%>
<style>' G* f, [. V* g& R9 c
.f9{ font-size:9pt; }$ c0 M3 @3 e! S, |3 |, u
.bgc{ background-color:#aecaf9; color: #0033ff }& @  v* F& K! m$ p3 e9 q+ J
.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;1 ?5 j, w0 U# N: }- Z  ^/ T
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;$ ?! m8 p* U) P+ Y+ V# I
  padding:1px;
  margin:0px;}
</style>7 x! g- L% i* T/ f2 }
<script language="javascript">
% s; q# H# T( E9 z) a3 a; o7 \
</script>- _( z! J& x2 o
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
; x7 F+ b5 j- C, L( W; C<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />- H  {2 m4 C9 k9 ^6 n/ p& \
<%5 Q3 b* C7 ~4 b
  cdatasource ds=new cdatasource();  //数据联结bean实例: y( Z5 k7 G! i0 E8 v+ Q4 A" K
  java.sql.connection conn=ds.getconnection();
0 J( v( O: n) q0 c8 T6 }) P  java.sql.statement stmt=null;
9 m3 h' w) [7 s, _* R, U' R. K# w  java.sql.resultset rs=null;
+ g7 p: d8 W$ _; x# h  cdatacheck dc=new cdatacheck();
9 [. T( v6 n3 \$ ^2 _" D, N%>9 @  N/ j# `, D3 j% r9 ~% H5 t
<%
; M8 {' t7 r: i9 T8 nstring 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";3 l. W* I1 j5 O+ C+ w3 Q" z
stmt=conn.createstatement();
% ~9 P* Y% v) p' B/ [" u% j$ Krs=stmt.executequery(sqlu);
# i: V  m& O" c! {/ J$ r0 Q/ q%>+ r- h: M8 }$ S
<script language='javascript'>4 {  N# W0 ?6 F/ `) d
arr = new array();' B* m/ v% F5 x0 z+ P
<%  int temp=0;( ?! @5 U8 {6 s! p5 e, V+ R+ c
while(rs.next())
5 W/ c6 z0 ]6 w9 C( N6 }8 R( `( H/ j{
% G4 E) L$ U9 k%># E. z# ?& t; X% r! U
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");. X* I  v. b7 J6 o2 p8 o
<%
- }# b# R5 F& F- P5 {8 a' F* G, gtemp = temp + 1;
5 |3 Y) G" J) J. q- ]" r8 a% L}
; ?5 U! E6 ]' G  f- Y! W7 ~/ [%>+ I( Q4 n9 }5 X2 ]; z8 ]
temp=<%=temp%>;3 [2 C) L" |# K/ [2 K( q
function changelocation(id){ ! k2 a$ }" ]$ H. P0 a
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 * K& _9 e; C. i7 z2 I9 w
var i = 0;
8 ]/ Q1 @0 w& z5 H1 L$ i; y0 xdocument.combo_box.city.options[0]=new option('-------',''); 7 d& w  P, l, M% O
for(i=0;i<temp;i++){
9 m3 u" a1 l$ \! y4 Aif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
: b# i0 d2 \- t  }' A" r3 Sdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 2 u+ B) \4 E+ ~1 [3 A, l( U
}
/ |  Z% ]& A  o9 F2 |} " m. V, o4 V, |/ Y0 Q! Z+ W5 @. R4 p1 P- Q
} 4 A) ]+ y+ j1 Y2 W2 k' @
</script>( `% F" c8 C* V: d) q  d
2 S) B$ I8 W5 G6 @
<form name="combo_box">& p! K: Q" F5 S, R
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59"># F  s: \5 `4 L3 Q" q
  <tr height="24">+ |% k9 @& |1 b- y0 o
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
5 S: r. v1 d+ g0 n9 G <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>; [9 P3 P$ b( `' y, b
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>2 k9 T! o# ^3 p6 w5 b% X
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>4 o6 u! ]& E& A) [- Z
  </tr>3 H6 I5 f: e* J' p! I1 m
  <tr>
- }2 R. n) |- |' X& F <td>
' [) I3 T4 R) P! B+ f1 f4 T  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
# l% c0 c6 A8 r4 f  <option value="0">请选择部门 ---></option>% @3 V9 _. S( k$ ~# \2 d
<%
  w3 B* a' C& p9 ]$ r' y7 K& J string sqld="select * from tdept";2 x. P! o) z8 v2 M( s; `6 ~  a4 Y; y6 w
stmt=conn.createstatement();# W# x+ [9 e% c  p
rs=stmt.executequery(sqld);
& q9 b0 B6 H* b7 E$ K* lwhile(rs.next())
1 `/ o+ ~# b5 ~0 R/ f{7 r) w; K% S2 X
%>) ^9 \! c% a6 i8 B' G
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
( ^# V' ?- B7 q% o( |<%' u. k) H6 ?( b" `
}
1 f0 @& i! A/ O- a" w- b; m7 D" o%> 2 b; L5 @# q& G) {' b
  </select>
# |6 V# u& i; I3 b( {3 g% ?</td>
9 j/ S$ G0 B; @, N: g5 I <td>% C& m- P; a/ M- Q, x2 t; ~! ^7 g* ^
  <select multiple id=city style="width:150;height:200" class="bgc">; p; e" w3 w- h# O' q
  </select>
# j0 r+ h- Y7 y$ [8 R4 |* E</td>
; o2 h  n. [1 T& E <td nowrap align="center" class="bgc">3 _! ]: I+ h- l: p2 ?
  <input type="button"  value="<<" class="buttons">4 `: U# f* Y/ @- O
  <input type="button"  value=">>" class="buttons">
; Z! |4 L" ^) O2 o' V5 x</td>
9 l* g: T8 I2 E# a <td>8 v8 f2 B6 j8 C) r6 z% K
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">9 g0 ?$ y" c0 C% l& C! p
  </select>
' g) H9 ~# s% b7 n</td>
+ g3 p- ]$ e9 R" Z  </tr>! m; {9 X; }* y8 y+ |3 M
<tr class="bgc"> 9 H4 R4 K; i; S/ R1 d
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
8 C: H& A# u* L8 w  </tr>+ i, E( \- |' _
</table>
/ D. Z7 J! D8 u8 q2 k7 `  W0 U</form>- t" ~( K" c5 G; v
<script language="javascript">
/ I$ y. ~6 \% F& ~& F+ L2 N- _//人名移动8 F2 p/ ^: R7 j0 l
function move(fbox, tbox) {
0 A) g9 b6 z  j" ?8 u$ N" M" yvar arrfbox = new array();
) j5 ~; o0 L8 n+ h) X/ yvar arrtbox = new array();
% m6 U6 `; ^5 K5 w7 ivar arrlookup = new array();
! M" }! p* U2 t0 V: W: R5 ^var i;& B+ U! _; N' N& L- o
for (i = 0; i < tbox.options.length; i++) {7 Z" G  g9 {7 J& e1 ?& `
arrlookup[tbox.options.text] = tbox.options.value;2 T) ?! {1 F! g. U" T: E" ]
arrtbox = tbox.options.text;
5 a; U' A3 ~3 d1 ]( Z}/ t+ D% l; J0 K& \
var flength = 0;  Q& E) R5 y* v0 k
var tlength = arrtbox.length;8 ?" X3 a" w; L" ?) V: p: _
for(i = 0; i < fbox.options.length; i++) {
: s, S' _: L9 H; d2 }. N1 D6 H" X0 Harrlookup[fbox.options.text] = fbox.options.value;2 u2 z, _8 @7 S8 [( l
if (fbox.options.selected && fbox.options.value != "") {9 d% q0 J) k. W* ~1 Q
arrtbox[tlength] = fbox.options.text;5 ~/ }/ v  S. I$ T
tlength++;
9 _% P: R! C# \+ k}8 q: ?* J! d& B' ^! Z
else {
6 _( F4 U5 N$ B3 E, Y. Narrfbox[flength] = fbox.options.text;; q( r! `. l6 d! n1 q
flength++;4 ]7 ~% A. ^' d6 q
}" ^& g, g" V/ h- C9 [, d0 _& Q" B
}0 _+ u; I% \# e) z* w4 ~4 p
arrfbox.sort();( r9 k" K" @! q* d' o+ s* E$ v2 Q
arrtbox.sort();
& Y6 O6 {- [7 o* ~9 a; E8 F1 ?; F2 R6 |  q. O
fbox.length = 0;
9 k* i% F9 N/ o. ?( N) v  \4 ]; ltbox.length = 0;
. k2 r9 T) I4 L$ h6 V% ]var c;+ ~4 m4 t9 u5 c, n% j4 K' X
for(c = 0; c < arrfbox.length; c++) {( Y. D/ X: x. N5 j5 Z: n
var no = new option();
$ P- H, F* S) \) ~  j! Vno.value = arrlookup[arrfbox[c]];" w8 g- q5 S5 A3 f' N) c
no.text = arrfbox[c];
3 @" h8 R" X' o0 `  Q" q$ Hfbox[c] = no;
( D+ e  X, E+ o}
& \" J: a' x" Y8 kfor(c = 0; c < arrtbox.length; c++) {
. p1 ^% I3 N  Y3 O$ _var no = new option();
7 A* X9 l1 Y/ z" S, q5 ]; h% U6 V. l: ano.value = arrlookup[arrtbox[c]];5 T$ W) c3 C* N& N$ p9 T
no.text = arrtbox[c];) |! Z0 h+ `$ F
tbox[c] = no;
7 N) {4 @. O  v; v+ j5 B. w }* F8 N0 I5 ?) l& ?* _6 B$ N$ p
}
</script>
7 t# w# n' s- Q& j: b6 Z' ]</body>
; a" K: Q' V9 Y) Q1 D% |" [1 e

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

返回列表

jsp+javascript打造级连菜单

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

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