jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"; K# R1 |& l+ s& g9 Q+ _" `2 y
      c pageencoding="gb2312"7 E* k; `7 f  ?. t2 ]/ z, V
%>1 C. ^/ V4 o0 a* K! H. \( }7 n
<style>9 g6 T) h( c# v" b/ m, `
.f9{ font-size:9pt; }
.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;
  border-bottom: solid 1px #4e7dc1;! V( r4 \% W$ j) T- X  W' [% G
  border-left: solid 1px #aecaf9;! n5 r' Q" q" k# c1 V0 X
  border-right: solid 1px #5679bd;0 ?2 n  L$ \- @% e! [! p' h2 x
  padding:1px;( H. s9 }1 b+ C$ w2 `% y$ a
  margin:0px;}) W1 @$ o' r$ Q" p
</style>
<script language="javascript">. M+ o  k  |, K: j
$ ?' N9 J/ s* J% M2 r- p1 Y
</script>
9 \' ~3 }  J- B! H! ]<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">) u3 Y( _$ f/ o! C; z
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />5 F7 f! r1 E. I; F' x3 Y
<%" x% ?* x# p7 M+ P$ ~- ~
  cdatasource ds=new cdatasource();  //数据联结bean实例* M" F& F& m+ y' f- b0 j- B
  java.sql.connection conn=ds.getconnection();
% x$ r5 S8 h: D) \  java.sql.statement stmt=null;
7 b2 F2 m1 c, h3 T( \  java.sql.resultset rs=null;9 C, E- s* e; G" U' E" b/ e
  cdatacheck dc=new cdatacheck();
" \4 r( d/ I) w( w! h1 \%>
/ e3 _. d% d! E) `5 v<%/ O. o' c' r6 O: P6 p
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";
" ]! ?9 |) Q/ L. A; A3 ?/ K, Tstmt=conn.createstatement();4 u, b& [  V, K, t
rs=stmt.executequery(sqlu);, O: W- E; i; j9 u$ [
%>
6 U9 m5 C0 k* Z% |) d<script language='javascript'>
) y  w" q9 i6 j5 o/ N+ warr = new array();
2 M. k# R+ Q& s" D  R  m<%  int temp=0;# b, t/ |* \& _, @* R
while(rs.next())7 V: C( s2 q( u$ _+ L' v
{7 A" I, Y9 C& U4 \& A! k( q
%>4 j; |- X6 s. G5 ?9 z! h
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
. r- }; ?9 f9 G% }4 ]<%2 `# @# Y0 L4 Y: V- d# w2 k6 |
temp = temp + 1;: x. @  q. U; \$ Y8 Y. a
}* m4 `# a- {+ W- p
%>
6 T: T& W2 M. n( r  v3 \temp=<%=temp%>;
5 ]" u+ T6 _( S. zfunction changelocation(id){ # P/ b+ ]- |5 S  `! J# z
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
, V5 I1 ]/ V0 ?+ T# Svar i = 0; 3 C" L2 O! D6 G
document.combo_box.city.options[0]=new option('-------',''); 2 x# H8 M- S( d) ]
for(i=0;i<temp;i++){
& a/ f+ s& ~: m. x  Tif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
& q/ Q3 c6 ?+ b. Y* odocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
) f- t% p9 H0 I4 n  `7 J0 s} : p& ^/ _; P6 T- K  X) P* Z
}
+ o! h4 P- `/ `}
: n. M+ s" w1 Q</script># M8 C( t. U6 o/ h, m
3 o! ]- q7 r3 b5 G2 A$ K$ a! r+ O
<form name="combo_box">
  B% S% _! q2 G  j( R9 B! J% v<table border="0" cellspacing="0" cellpadding="0" height="210" width="59"># T. D: R+ n+ j( p7 U0 l" e
  <tr height="24">
7 Y" C6 h5 T' A3 E, t <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
8 V+ O  n& [: _6 [6 Y <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
6 p' N# W+ l, S  K: Z6 x7 r. y <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
# P5 P, y# N+ z; G) M& z/ |3 k" s <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>, y) f( P! w  N  Z4 ~1 n6 B) z
  </tr>$ {* g) s9 u* O5 y6 H, ~) f
  <tr> & H8 X; x- X" L5 y3 Q, {% P
<td>
. h9 e& B" f+ s: Q: k  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
# j3 w! X9 d4 b+ m  [+ u; q  <option value="0">请选择部门 ---></option>
* O7 y5 u3 [  ]5 y2 }<%
2 a1 z2 f4 [0 D/ g, z8 H' Z string sqld="select * from tdept";
; z/ U0 }8 Q: S6 qstmt=conn.createstatement();$ r3 Y. y" M/ T2 p1 x7 \. G
rs=stmt.executequery(sqld);
' n6 j( b' x. x1 mwhile(rs.next())5 D5 p3 f3 t8 a1 V: _3 [3 u
{, m- }4 W' {7 ]5 Y7 I
%>
: Z% }3 L& G' V+ W) Z6 `! [  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>" N1 D( B0 ]+ A4 G$ D& u
<%
& S6 p; r+ B) |1 N}
8 \! T- ^" u& E" H# W%> 6 z% V4 M: M7 C
  </select>
+ G( t' E: f1 V. X; B1 I</td>$ n: x  B7 F8 }& n2 e# g
<td>8 u" u' R8 s1 n
  <select multiple id=city style="width:150;height:200" class="bgc">
* _& v$ s  L7 v) @5 G7 {! H  </select>, Z: w2 g6 Y5 w. ?
</td>2 u& t1 w- E# M/ g1 N9 J; ~9 N
<td nowrap align="center" class="bgc">! L$ ]; l' ]% @/ Q
  <input type="button"  value="<<" class="buttons">1 h$ _5 n. ?3 C* g9 m+ D( d
  <input type="button"  value=">>" class="buttons">
: M3 E$ @9 Q0 ?; D* `5 W</td>
0 a+ b. b2 q& c  o$ ~! J" Y- T <td>
, \4 J& }" I3 ]2 ]3 _& n  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
* }. k; B, j( {  </select>" m" o2 h( e% t
</td>$ e3 W. g) t6 o1 q- v/ ?
  </tr>, B7 y$ H6 T  H: t
<tr class="bgc"> 2 Q* q: ]8 `. P) {, l0 q
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>% W6 j3 t' A  Y5 j6 |% E
  </tr>
( @) F7 X5 |; U- \  |</table>. c* g9 O( ?9 Q9 n
</form>
3 E& F& w& l+ T8 A! G/ e<script language="javascript">9 _: r4 X' s! Q9 k2 W% o5 b% E2 f
//人名移动
, e7 Z5 [# J* U$ }7 p, H0 tfunction move(fbox, tbox) {
6 |* q. E& h4 J* a8 `. K4 Yvar arrfbox = new array();
( ~7 J; d4 I- I( l0 xvar arrtbox = new array();
: ?  K1 i7 g# [# M- q) P2 y, c3 Vvar arrlookup = new array();
. w7 Z! X! T6 S6 G; ?var i;* y( f, N8 n$ S% a8 w
for (i = 0; i < tbox.options.length; i++) {$ d) q* Y% ~9 h" L4 ]7 q5 f
arrlookup[tbox.options.text] = tbox.options.value;4 O( \& H2 B, T9 c& b+ }6 l
arrtbox = tbox.options.text;. Q% ?- |: U8 E* v  U6 r6 Q
}
0 g( A2 I! X( Z+ Cvar flength = 0;. }2 }5 w! V& B9 ?& q) j5 \4 G
var tlength = arrtbox.length;7 g" |' ?/ B" p
for(i = 0; i < fbox.options.length; i++) {* m: b0 a. Q% I( R; B/ r
arrlookup[fbox.options.text] = fbox.options.value;
, v. G$ k/ j8 n& k0 kif (fbox.options.selected && fbox.options.value != "") {! F  h0 \- A) A
arrtbox[tlength] = fbox.options.text;# D3 O& F) Z5 S; x. Q1 H2 S
tlength++;# M7 N$ l4 i* i: `3 C3 @$ I
}4 u( ^  L5 N6 j
else {6 L- S) H; K3 \: v+ k
arrfbox[flength] = fbox.options.text;& q, h* ~  M# c: |% K7 P, M2 t
flength++;9 F8 N0 r: V$ b8 o6 N5 M
}
* K! ]( c* C  i+ F9 N7 c. v4 I}3 }9 o# G) W% K/ B8 H6 G% Q
arrfbox.sort();
8 }) K/ t$ v+ D1 U& [4 |arrtbox.sort();, r% |6 L) Y% L" _/ {+ H/ |0 o

) M9 e- w  Y3 S6 q2 Zfbox.length = 0;9 ?2 a/ }7 Q8 c: \3 C' u
tbox.length = 0;
- Q7 e9 P; {# kvar c;; c0 Z, ?- a7 x; H9 u; ]& |7 s2 C
for(c = 0; c < arrfbox.length; c++) {' K6 H0 j# K. k3 ~5 P6 m7 s' c8 b
var no = new option();
6 W" @/ W9 o+ X" `& P3 c2 nno.value = arrlookup[arrfbox[c]];
3 C; N4 h+ N$ t! ^$ Y& \# hno.text = arrfbox[c];) V: X4 `  ^5 {" _
fbox[c] = no;8 x: F5 z* G! Y2 \, D
}: Y) j3 n) ]7 M6 ?
for(c = 0; c < arrtbox.length; c++) {
5 b' j% O  ]" l7 hvar no = new option();
$ R, M2 J- b- a+ ]3 [no.value = arrlookup[arrtbox[c]];% c* B% y+ A9 V& G: B  Y# i6 A0 H- W$ ]
no.text = arrtbox[c];8 R: D- w% o2 x7 {5 `; d" M1 ?1 a* R
tbox[c] = no;0 q' z; Y9 R* V/ ^& E
}
9 N1 y. x/ s. X}0 O1 |1 u+ s2 `$ @& Y
</script>: {7 E2 p, m+ Q1 h- d; u2 |
</body>
/ b: c; M7 m, E* w! N4 Q" y% _% ]

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

返回列表

jsp+javascript打造级连菜单

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

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