jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"" M6 H; d* [# q5 D( V
%>5 H/ m" F  r' \: C
<style>* O) \6 v0 G/ E) X2 `" K" E
.f9{ font-size:9pt; }0 ?' A# J; ?. ]! N* S" c
.bgc{ background-color:#aecaf9; color: #0033ff }5 `! D& m' \* y  x3 n
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;. T: ]2 y$ F, L) u- _/ W
  border-bottom: solid 1px #4e7dc1;( Y0 R- W! n' K( ~% i
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;& T: `* b/ i( [# S$ P2 U- [
  margin:0px;}
</style>
<script language="javascript">

. x! y/ Q- v4 q" a% |% }</script>
9 D# K7 j* b& e5 {3 J) P- ^- b<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
& s5 J$ k- ]- c# V' \- Y) h<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
) }5 }( d9 R* W! f9 e1 A<%# I  @$ R; M+ x
  cdatasource ds=new cdatasource();  //数据联结bean实例( C' s% R2 |4 {7 ^
  java.sql.connection conn=ds.getconnection();! g5 A0 C  }; z( N- O: s
  java.sql.statement stmt=null;
: H: C1 D0 R+ ~, {  java.sql.resultset rs=null;
2 c& ^8 o% H4 p9 k$ ]  cdatacheck dc=new cdatacheck();
! i1 R: k& J+ ^- F5 e5 z' ~9 s%>
3 s8 M, H0 a9 ^; u<%
5 e+ |. t6 R" ]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 T- P2 }. q. f+ C$ k
stmt=conn.createstatement();
: T" |* H. e: I; R. Qrs=stmt.executequery(sqlu);
# r- k  f/ Y6 h3 i1 v9 V6 M%>
% h3 Z; r$ ]$ o! J! \6 m<script language='javascript'>
& y+ Z! ?6 e8 \8 t4 H. h& ~arr = new array();; g# `; Q/ l& z( d% ?( ?) K
<%  int temp=0;! I4 g- f1 d1 y& Q
while(rs.next())- V" a) @; k  B- Y+ J& t
{
- G# Z6 r: a7 E) p' K%>
0 ~/ _6 s' [6 v4 darr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");. i/ {0 P4 k9 X* t% G6 Z1 n3 D
<%, J3 z. u4 A* y: k/ W( f$ e: A3 M
temp = temp + 1;6 v/ k/ M& S( J3 c$ L& ~9 f3 Y- \
}
% _; U8 p3 c* H! s: f* N%>6 g& y3 B# l) ?& F8 O
temp=<%=temp%>;1 T# q6 ~' O7 `5 b& k; \2 {
function changelocation(id){ 0 \0 J9 G) O/ i  I$ \( m
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 ( P& s; j- ]3 A3 h; J
var i = 0;
/ z# E4 w* Y3 j! j" Z4 hdocument.combo_box.city.options[0]=new option('-------',''); * n/ z  u5 o% y( b; S5 I
for(i=0;i<temp;i++){
* V3 T) b  m- `6 S+ zif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 8 h) F( d' t7 A, Q; X5 v: Y2 g
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
! d# ?  f# c+ N$ F1 E: c, p9 I} * Y: K: m1 I* m& |! q% A
} $ M- v+ ?( F$ \
}   n: g" B( ~1 C9 {
</script>
$ j' i% o8 F- U, T2 Z, L: c/ W" _8 E( Z4 `, e- T
<form name="combo_box">$ h8 ?; j$ w* f! w( N5 {5 ?
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
& R' B& N; W. O$ a  <tr height="24">
5 Q9 A7 M$ v! C! x) q* R <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
' _4 b* X5 P5 i5 |2 d- o <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>7 B2 l0 M5 {1 G) S# a8 a
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
) @1 R- I  ~* E8 S7 u; V$ J <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
$ Q0 m; G6 U+ Q3 T8 j2 c  </tr>8 W; ]- D2 v$ }( a3 w4 X- j
  <tr>
: A6 M4 B# g6 B( l; W <td>
/ i' p& a( d) }/ o  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
1 x6 K7 F2 w, `% F7 k; X4 F  <option value="0">请选择部门 ---></option>
+ S3 G& f2 p0 X1 U" Y) z3 i$ t<%
3 Z# e2 J9 u( P string sqld="select * from tdept";0 x- K5 h, i* S9 H9 c; G& b
stmt=conn.createstatement();
/ @! G- W+ R8 W4 T" Qrs=stmt.executequery(sqld);# z4 N: f8 F& [4 M
while(rs.next()): p, d. C4 W. D* C- g+ d
{, a# o3 G7 H# k. j7 \8 N/ z
%>
; S0 }9 ?& R1 `  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
+ e5 m0 Z- t$ A8 U& b4 c9 T; T<%
! P* T' Y" ?! T! P" b- I}
! N/ q0 ]4 L7 j9 W%>
/ |8 G, d- E5 I; B  </select>. `8 Z  h5 r' K, X7 f, z
</td>
: l; g: _: v& h" j! _ <td>- b7 w0 j' N6 Y
  <select multiple id=city style="width:150;height:200" class="bgc">. n) _9 \$ B5 |# S
  </select>
# L" }7 S$ }$ m% J5 d4 u</td>
  s$ u) G3 B) G* f <td nowrap align="center" class="bgc">" c# q3 U# S/ \7 f) _4 r
  <input type="button"  value="<<" class="buttons">
$ a& x+ K: }/ Q) i5 O  <input type="button"  value=">>" class="buttons">
6 i6 D$ k4 g( |7 t</td>1 k$ }/ g. I. [% b! ?) @) q% l5 {
<td>5 Z1 L1 |  Q) d6 @4 T, \" [
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">! s' W5 D" ]) t- T
  </select>: e5 U8 p( p; @  N) c- A4 k" P4 M, ~
</td>! t+ ~- o2 s5 b) t2 ?
  </tr>
7 D$ m+ f! y9 Y  Z& f. h <tr class="bgc"> # x7 n. P! j" t1 D  C
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
" {6 f; i% ?1 f$ v* D. V$ b  </tr>: X, b9 b$ g" P: m' S4 u, P( k9 m
</table>/ q1 t' k" b: q( {7 T
</form>
( Y& J: t4 c. u5 }7 B+ _8 J: f<script language="javascript">
; K/ L, ~1 r$ i& A//人名移动
1 u5 [; T6 b+ }. h2 C  A2 J4 l. \4 Ofunction move(fbox, tbox) {" g+ p$ b4 K  k! {! P6 {) Y' F
var arrfbox = new array();
/ |3 G5 J, @$ n+ B) V4 Xvar arrtbox = new array();7 }* y5 b7 ?9 I
var arrlookup = new array();
0 w' L  B0 V3 K- svar i;/ x* }+ g  S  q* V
for (i = 0; i < tbox.options.length; i++) {
. O7 V/ o' @0 A( t3 karrlookup[tbox.options.text] = tbox.options.value;4 q$ A1 @  z" y: t
arrtbox = tbox.options.text;: N+ |! w: F' a; X! K, W
}
2 u! m' T9 w% [1 e. Z. D6 w/ a/ ]var flength = 0;, W/ N; B( d# E
var tlength = arrtbox.length;- c4 |) P7 V9 Q
for(i = 0; i < fbox.options.length; i++) {! z- Y9 n2 r# {6 i
arrlookup[fbox.options.text] = fbox.options.value;! ?  {- A  ^* [& L4 P8 a) ?
if (fbox.options.selected && fbox.options.value != "") {- ^3 ?4 _1 [7 c, A4 b' l
arrtbox[tlength] = fbox.options.text;- u' J# T4 V# |" ]1 I( b; j( S/ J
tlength++;
$ l5 g  F4 W" n% t0 l! J. T0 H6 V}( Q/ u" I4 T$ X; x- f
else {
  r. {' P! A$ h6 H1 xarrfbox[flength] = fbox.options.text;
0 _6 C1 h: o  |; \4 gflength++;+ U& \: c9 \, U! s
}
) I0 U, s% Z. j. b( U}
5 j6 x6 d* z' l7 Y/ e+ [8 u( j" larrfbox.sort();
$ L# b( h: T' L9 x& Y. C7 u" Z$ g; zarrtbox.sort();
" P+ w3 s; g1 J. g+ i8 H5 r2 v& \4 J7 {" Y* {4 F
fbox.length = 0;
9 x( p4 ^' Q' Etbox.length = 0;
3 ]8 ]+ D9 t+ |, _1 y! h4 d( f" uvar c;: f' P4 @! M3 w  U1 c1 O' u4 g1 W" D
for(c = 0; c < arrfbox.length; c++) {
1 n, d3 J" `+ x9 o9 U+ xvar no = new option();) c. K% x; {( j! Z& B) C: _
no.value = arrlookup[arrfbox[c]];7 v. R6 j7 |! E# J- A/ D7 }
no.text = arrfbox[c];" d) Y, R7 J, i6 E% A3 I
fbox[c] = no;
) s: y3 M, w9 ]7 j! x1 ]0 v}7 s% p: U, w% i$ ]% r
for(c = 0; c < arrtbox.length; c++) {
9 F/ |- q5 d- G2 y- I" [+ @var no = new option();
5 T7 @* K* H+ d* v/ t4 fno.value = arrlookup[arrtbox[c]];' S4 v% o, l1 k6 V, m- L( d6 ]9 k" F
no.text = arrtbox[c];
) S2 r1 Y0 z8 H: I8 B" dtbox[c] = no;# l+ e* N( ]$ C2 s, x1 U# b2 S
}
! r: Q. y7 q: w' ^2 _9 Y/ n}
% s! c9 R( @1 M8 e9 u$ I4 U</script>
) T% L( [! ?7 g& p% {</body>1 C  a; l/ ~  W" ^% c

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

返回列表

jsp+javascript打造级连菜单

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

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