jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"5 m" _9 o5 d/ C
%>" }: n" Z- m, s4 c' x- C
<style>8 m/ G7 `5 i, E5 D" y# q
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }5 [) w) a6 A  S; ~( 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;
  border-left: solid 1px #aecaf9;8 L: F! W1 ?7 [& M( ]
  border-right: solid 1px #5679bd;
  padding:1px;. c# F6 ]' k2 w, B, @: H& i
  margin:0px;}9 K' W( ?0 u3 Y2 ?7 R" U3 ~+ r
</style>8 e: e$ D5 z. ]5 g
<script language="javascript">

5 \7 |) b) B2 h$ a+ b</script>
" W, E) S0 x8 d( z6 p7 s. e<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
% Q2 b6 f2 S4 T<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />( C  K+ H& _4 c& [' Y7 i  h
<%' Z5 @+ X. V3 n
  cdatasource ds=new cdatasource();  //数据联结bean实例
- {* X: b9 y9 o9 Y! U. f$ w; q6 m  java.sql.connection conn=ds.getconnection();
. h5 j4 @7 \7 s! ^$ ?' g' _1 w  java.sql.statement stmt=null;  g$ M" D' w; ]+ ?3 U8 n0 k
  java.sql.resultset rs=null;
( I7 ~& P+ M" ~3 ~; Y3 i2 h  cdatacheck dc=new cdatacheck();+ E" X6 J3 i, m, q$ m
%>- a" b# V+ l5 f8 M0 [' c
<%4 t8 C4 p# ?" S  V) I, `
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";
% h7 ]5 q, V, {+ ~4 Z0 O$ @* wstmt=conn.createstatement();4 ?& z. h% V" B' R% f
rs=stmt.executequery(sqlu);
# V" B  z# c$ n' }/ g& S! o%>0 b4 {! N* F9 ]7 Q
<script language='javascript'>. y' E! A( s! I4 {1 d
arr = new array();7 U- a- F7 y! \2 o# W0 M4 `
<%  int temp=0;, T" n/ o9 `; ]/ B9 z' O/ \
while(rs.next())( ]) b3 h7 y. v: `) V/ [- g- ~
{; J9 v& {, ]' @$ h
%>
6 u& l6 r, {8 P9 y: w* Carr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
4 Z+ g9 [7 @% y' o<%+ }1 Y, ^/ n. l  K! z; M
temp = temp + 1;
9 }  f) q) o4 T: J; A  h5 o+ A8 t}' H0 T0 ?/ O; Y! D0 V
%>
3 g! S1 u9 ~. B1 a& N. t( h* b+ j/ Itemp=<%=temp%>;
4 K- m  H) Y/ @2 C6 U" {function changelocation(id){
" K& o, ?) G) j' Rdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 % l; @# z8 T0 V( L) c
var i = 0; 8 R2 D4 d: K: c8 C+ d
document.combo_box.city.options[0]=new option('-------',''); - Y3 i  R/ a: P
for(i=0;i<temp;i++){ ' C! T$ F) c! ~; f+ ~
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 7 i& I8 ~) `: A! t* I" p0 \
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
: M& a5 a5 s0 J' P/ m& b1 L  X}
, R4 t: h* `0 J" ^) f}
$ }$ j- Z9 @/ z; O7 ^/ J" G} . f9 k" ^: H2 N2 M; Y
</script>
8 V0 u2 m4 b' m" |8 G* V" L+ I! {4 l  A6 v3 F
<form name="combo_box">
% x& n8 O/ u* o/ b+ ~- \, ?<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
$ [% G7 g  z$ i2 c: }' |+ e. g  <tr height="24">0 ]# z) L4 `" u' r: d. }
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>+ d& \. _. H& U% t0 W  w5 G
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>2 n( B" A0 a0 o. J/ R( k% k$ [5 ?
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
; \! J* Y: t6 ~& P <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
3 h# L' Y1 E+ H4 m  </tr>, z9 O, C$ I! A' t$ ^( ]& f
  <tr>
<td>
3 `( q) V& i, K* e  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
3 t; P6 \  [& @# W1 `6 \  <option value="0">请选择部门 ---></option>
3 U7 R2 d2 o- k* L<%
4 a4 |& q5 _9 U* ?1 x3 t+ ^ string sqld="select * from tdept";: l% _# {$ \0 Q
stmt=conn.createstatement();" R3 l7 s1 P( y6 S
rs=stmt.executequery(sqld);! J# _+ i9 E2 J8 q$ {& Y
while(rs.next())
( z& k& c' c1 w7 d$ s6 j. d{
. ~7 J3 ~5 Z" S' W! X8 H! ~%>
) x) o# L4 S: G( W+ n  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
5 A4 a; `, R5 [& I5 d8 w% n9 k" p<%0 v5 o3 ]5 |6 U) I9 b$ k
}, c; N9 a$ o7 w9 o+ J7 q
%> 0 G( E" \- |6 _
  </select># D- a* S/ v+ I& ?# T
</td>
, Q6 x6 @. ?! e4 b# q) v; e7 ~ <td>
5 Q' r5 e4 _1 Z3 i) ]9 q* v  <select multiple id=city style="width:150;height:200" class="bgc">. u6 i' a! i& a. r8 i
  </select>
" J+ N* J7 U. p4 ~! O. M( A</td>8 X% i; Z: f- H! v# O
<td nowrap align="center" class="bgc">
" C* U( P% w3 h, e. V/ N' y! z5 s& H  <input type="button"  value="<<" class="buttons">/ i1 @5 A; |- S$ K' t) \* b
  <input type="button"  value=">>" class="buttons">  ]. s6 f3 v4 j* o/ v: m4 E
</td>5 f/ }- |0 q7 E: R9 h1 M, S6 g
<td>; R* @, v8 \! S4 Z* ^
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">5 O  D2 P1 G+ G3 N+ p( A0 v
  </select>& }- e6 L4 O2 q6 W' K
</td>- t# V6 {8 z$ Q. r1 Z1 j4 f
  </tr>
, B# y4 L3 Q" @: \) |- S <tr class="bgc">
$ j, ^' }8 b. i4 F, h& I* h1 s <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
! |- K5 l$ i. W% G8 H, K& B- D  </tr>0 J) m+ }- j( ^, _4 s+ q8 ^
</table>
! L' s2 Y( Q; L6 \7 \. _</form>4 p) m# Y6 S) s9 K( }( g! Y" F
<script language="javascript">) `4 q* P7 A5 h( l2 ^
//人名移动% ~" F0 {/ \8 T( o/ U
function move(fbox, tbox) {; |. F* y5 V' k
var arrfbox = new array();5 C* G1 j( o% Y, s0 w$ Q* e6 n
var arrtbox = new array();
2 r& J  `& N# k- K3 k9 d5 Uvar arrlookup = new array();; ^: T5 K  W# u5 i
var i;& y9 U+ S/ ?6 g0 c  m+ ~- j' z  |7 \
for (i = 0; i < tbox.options.length; i++) {
. d+ v1 n1 b& D( Aarrlookup[tbox.options.text] = tbox.options.value;/ L, E9 o$ o( l/ ^* c
arrtbox = tbox.options.text;+ T- W0 O! T3 I. Y* t" m
}
  a9 K0 r7 a  O3 m# jvar flength = 0;
; n& e8 @# e. D: H: Gvar tlength = arrtbox.length;
9 K9 k& N+ V# z9 x" Ifor(i = 0; i < fbox.options.length; i++) {
* z" r1 C4 x5 R3 _arrlookup[fbox.options.text] = fbox.options.value;# R; `1 `+ u% y" j3 [" E
if (fbox.options.selected && fbox.options.value != "") {
1 q8 E2 d( h3 l: p! G6 Z' yarrtbox[tlength] = fbox.options.text;  W8 G5 u" ^9 x& q$ ~9 h
tlength++;8 b2 {0 b1 A, x9 k& E$ I& b0 H
}4 [1 B5 r8 P" _/ N- {
else {: A% ^  _/ x1 k* W& G1 \2 V
arrfbox[flength] = fbox.options.text;# f0 ?( C3 g$ W0 k) {7 T
flength++;7 h, M0 E- ~- ^: o
}- n. G% W; j  _+ L& \" f
}) W7 c6 w5 s) O
arrfbox.sort();/ T; S: X8 Y, e' }2 [) ?. d' @
arrtbox.sort();
: y# V2 n2 Z* a, I: n1 p
# k3 E. r; N$ f5 [fbox.length = 0;
) k# l- r( y/ D8 N1 jtbox.length = 0;- P) a) E) k$ B! \$ ~9 F
var c;
8 b% ?2 m4 _# P# @for(c = 0; c < arrfbox.length; c++) {( \! z4 I: ?  x4 o7 Y7 j3 Q; Z3 E' V
var no = new option();: z/ D' c! Y) E3 h$ x7 g5 w' b
no.value = arrlookup[arrfbox[c]];
$ n) _, N& w* f( b2 W! Y/ n7 Nno.text = arrfbox[c];0 W( ]+ ^" n$ L$ U" T  ]; N9 H
fbox[c] = no;
! |5 o( b9 N9 J, s- R6 p& e4 @& P}
! E8 c! F1 b# d: l9 e4 G" B! H8 ?0 ofor(c = 0; c < arrtbox.length; c++) {
2 y4 w3 i* E2 Y1 u! |; Pvar no = new option();
9 @5 g* s1 S* G& }5 D/ S8 ~no.value = arrlookup[arrtbox[c]];
/ o* I  r( Y# J2 E3 uno.text = arrtbox[c];9 P/ n8 D# m+ }8 I4 e( \
tbox[c] = no;4 E% |" w% j3 r! R3 C: E3 s
}! X5 @% E& l* i# N& G4 d
}* ^8 b/ k; @: \: F- m2 I; A9 X
</script>
$ F( h- D1 w$ M# u. o</body>
; ^/ T& d- L0 v/ `9 y+ P

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

返回列表

jsp+javascript打造级连菜单

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

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