jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"
%>
<style>
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }& E6 m+ u, P5 k- L
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;- m2 H4 M/ q" m5 I
  border-bottom: solid 1px #4e7dc1;: @1 \1 u9 l/ |7 M. h/ T
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;1 R3 t6 [+ {* m! d# b! O  B* H1 d
  padding:1px;
  margin:0px;}9 r6 n% q$ ]* ]' B) [7 l' E
</style>
<script language="javascript">
, K8 a$ ^. b7 w, D! Y5 M
</script>" @, Q& a$ h  g3 S1 U0 a: Z
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">( N. ^2 o/ A/ i2 M! Y7 U
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />6 i! l4 y' b0 c! T  f
<%3 C4 G/ T8 {. L8 P( x7 ^  V5 d+ L
  cdatasource ds=new cdatasource();  //数据联结bean实例
# h9 t5 {" w/ f  java.sql.connection conn=ds.getconnection();
* `* G' F9 o9 U; b. U1 ~$ E  java.sql.statement stmt=null;
0 k! }; J, u/ u' A$ `5 ?5 Y$ [  java.sql.resultset rs=null;
& A) g& X9 h  b: T* q7 S  cdatacheck dc=new cdatacheck();& V/ F  Y5 w. O# L% N- p$ E
%>( }, p7 v/ ^4 m4 N# l) Y
<%  `, q" |; t% u& L
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";: q$ L0 l: Y; H, s
stmt=conn.createstatement();
! S4 K. S$ g- d( w' [" t* ]rs=stmt.executequery(sqlu);2 A  ^0 s: x' s) J1 M3 G
%>9 i0 v# c5 x% o) K, Z
<script language='javascript'>. P( N; e( z; J4 R, k
arr = new array();
: Y4 m% @) c* l  R. r3 U* b<%  int temp=0;- _$ f( U5 q1 @8 P, L) D
while(rs.next())
# g. }  W+ y+ t8 Z' P{
$ b5 ?' b' g  m) w# X8 y# Z' a. [/ c%>" N- Q7 C: n4 p
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");+ D0 M; g" ]7 F2 ^1 g
<%' [) m  v' x8 W3 \8 G) Q* D3 y) O
temp = temp + 1;/ p7 e, n2 @1 h# f2 q8 ^
}
  E6 ~1 x# H4 b: z! G: r9 F%>
6 A3 B& Z( F7 c5 W3 r. Ztemp=<%=temp%>;% ?% g. E; M4 s: {* ~# J! b+ o
function changelocation(id){ 1 ^4 h5 o7 l  e) H0 V0 V
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
: T  t. |2 A. W2 S' c4 s+ @: cvar i = 0;
# B. |+ F0 k8 A. vdocument.combo_box.city.options[0]=new option('-------',''); + ]% E+ E- C5 n2 O. V; ~0 q
for(i=0;i<temp;i++){ * s3 z( i* t" b% L
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
- I. J8 p5 y' `+ c8 Ddocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); ) B# q1 _, S, F! H& J# [
} . P2 z% }% @8 x, ^, M& |* @
} . N" v2 R0 q: \, O+ e
} ! c; }0 n! ]1 j  b& ~& L& k* l2 V
</script>
% }- f; x7 \" f  m9 L* `  U& [, X' t. L+ ~/ {1 @+ H
<form name="combo_box">
7 U+ H5 I) D5 r8 E) y<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
( Y# u  E$ h* s( q  <tr height="24">
- n1 z7 @% K; X0 }; [8 i' T <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
! J0 _  L' F" e9 Z" r& K <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
7 P$ s4 J% i/ e3 D <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
9 G( C0 ?. D0 W% @; D( D. O0 Z <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
6 o" a, @( _0 i  </tr>- B, v5 G, m  {% S1 [- [+ {
  <tr> . C0 Y. Y6 i, @
<td>
5 R) F* G- M+ @- _1 r# |% j  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">* v& n" G. {# g, d# r  A
  <option value="0">请选择部门 ---></option>
' \& u/ v5 W& M8 }<%
: ]% l  g& i& w3 }; k. s string sqld="select * from tdept";- }0 u. c: S* `" ^
stmt=conn.createstatement();
! B0 m, }8 J) i5 F* O, W" Z7 wrs=stmt.executequery(sqld);$ u: j1 ~1 s; t- u& @
while(rs.next())# i9 M) m  \3 g2 U! Y3 M9 |6 y
{/ o) |: J3 X6 c/ d! R
%>6 _. ^7 B+ Q0 j6 f% _$ S7 L
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>+ X& g* P3 V9 x! m  B7 v
<%
% }: N/ J+ o/ E" E& y) f1 u9 l6 o}0 [) I. y5 j4 |; a" Q
%>
$ }1 m. h$ b, }' U  </select>$ ]: m' i& S: t$ X1 j" I: U
</td>0 L" I% B6 |7 X" q' t+ L
<td>$ n# h$ O  H* V/ K
  <select multiple id=city style="width:150;height:200" class="bgc">3 E; Z. J5 x/ Q! S
  </select>
% Z! D% r$ d6 v( _% e8 d</td>
, C. {2 S3 g2 I6 t% k3 ] <td nowrap align="center" class="bgc">
; g" f0 }) j% a9 y, l8 d  <input type="button"  value="<<" class="buttons">
% j  k! U( W/ G8 g  <input type="button"  value=">>" class="buttons"># X* c9 z; Q7 Y
</td>
# S: |4 X3 t- [ <td>
/ u$ l1 w. U; v6 Q) U( m9 Z5 |  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
% n' ]: D% V% r" E& Q4 f  </select>
6 ~; ]* {% |9 F( J4 i' S</td>) H$ u8 i- }% g/ h9 T& f" `8 m( J
  </tr>) O! \, f; D, _: X  r7 Y$ B
<tr class="bgc"> + r  u* z/ ]# C9 J9 _; V
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>: K- B3 o+ s" F5 q6 w" R
  </tr>
0 ], S, {, `8 Y" N; _( ?( j( L</table>- w. m2 R4 W; c8 w( p/ C8 n/ t
</form>! u, G, x+ X3 p6 K$ l5 k& a
<script language="javascript">
+ n, x/ ?  p5 B9 P//人名移动6 t0 C* h" ?" G% s! z. X
function move(fbox, tbox) {
5 x6 }  r0 E7 m5 O& a+ l' _) ?var arrfbox = new array();7 H2 `" H0 p+ a4 ~
var arrtbox = new array();0 W5 L# T0 I/ z: n
var arrlookup = new array();; [$ {+ [% [; y9 G5 m8 P
var i;
. j% U0 t- B5 afor (i = 0; i < tbox.options.length; i++) {
0 V% U; r6 o- I/ ^$ ?arrlookup[tbox.options.text] = tbox.options.value;0 t+ H& Y/ O5 m3 j
arrtbox = tbox.options.text;4 f* x$ ?- L% x0 n! b8 N# L; }0 t) e4 I
}  [. ^8 [9 q& ]; Z3 S
var flength = 0;
4 U* d' V1 m. e9 o. Y, `- mvar tlength = arrtbox.length;
& u  J6 t8 c, `* b) f7 {for(i = 0; i < fbox.options.length; i++) {
1 @& ?$ k5 n* G! H- P! ^& Y: `1 Yarrlookup[fbox.options.text] = fbox.options.value;
; p# s; ?: A( [- Q1 Sif (fbox.options.selected && fbox.options.value != "") {7 s' [* a0 o: s0 L6 x
arrtbox[tlength] = fbox.options.text;! y/ [) `* X8 ^, \9 h6 P6 e
tlength++;
& h9 H4 `4 z/ u: t( u8 V2 f8 k( z}4 `; \& p4 G  w# _* C( v) k
else {" {0 s( S% \0 l; R0 s! ^3 P
arrfbox[flength] = fbox.options.text;0 S; W1 ]7 W* W" A
flength++;6 p1 m4 O$ V! X* T
}' K5 M4 W# V6 g7 j1 O
}6 N0 H/ }3 R, B6 R( D
arrfbox.sort();# C% @6 ~: i, H' v! G2 R# S, s
arrtbox.sort();
# j0 u( a2 X; L: P2 z( }. v8 l
$ ^- g: w& o& @6 k4 xfbox.length = 0;  X( C5 {2 ~  C# s% i7 v
tbox.length = 0;9 i5 m1 H0 Y: a. B; E! |2 J/ S  J
var c;
9 r* t9 u6 V0 P( V" G% I9 f* _for(c = 0; c < arrfbox.length; c++) {
  v$ ^0 j+ Q0 D* ]# }var no = new option();( o7 F* w1 J1 \5 _, V) c
no.value = arrlookup[arrfbox[c]];: s1 Y8 o$ R9 p0 h& r+ K
no.text = arrfbox[c];: C+ L7 m1 O, n# Q, w& j. [
fbox[c] = no;
$ l* v  L- |+ N# l/ l. v& m8 `}
* v3 Q! y- [' W3 j' g0 ^for(c = 0; c < arrtbox.length; c++) {; i" X/ U; Y* ?5 y
var no = new option();
no.value = arrlookup[arrtbox[c]];
& ^% ^# ]6 i2 X* ]" c, B$ qno.text = arrtbox[c];9 e# ~0 p' r0 A. l2 P5 Q0 Q( a, ^" r3 X
tbox[c] = no;
9 w8 B" b+ v9 u& n2 Z) g0 P }
5 t5 J/ v3 x2 e& V}
" U1 o+ J: m$ s9 W- n1 y5 Z</script>/ I! [+ I' r7 E* n! W; ]+ t
</body>0 h% c7 k! a' U5 @% W- R) W

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

返回列表

jsp+javascript打造级连菜单

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

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