jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"9 W  B( z; \+ j7 R0 R4 |
      c pageencoding="gb2312"
%>
<style>; Q* ?  Y+ }3 w
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }& G6 m5 _/ z" q. J$ Z- K
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;5 _4 g8 Q: z; v  G! J* D
  border-bottom: solid 1px #4e7dc1;, x1 q& D; Y) A9 s) P, L# ]6 O: S9 L
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}
</style>
<script language="javascript">

+ ]# c: b4 B" n/ a</script>7 A$ a( S3 F( x1 k" m
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 Q. h/ v3 x) A7 i/ U$ k<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />6 I* c% ^1 V& x( F( @
<%
3 v9 C: |2 |# G. q1 |( @  cdatasource ds=new cdatasource();  //数据联结bean实例
: _! W7 f! Q9 r. _$ i* C8 o& E# n  java.sql.connection conn=ds.getconnection();
) o* I+ Y2 P3 n2 m  java.sql.statement stmt=null;
7 @, ^( ~: J, f  b5 k4 s! W  java.sql.resultset rs=null;; Y8 d* E2 g5 s) u9 j
  cdatacheck dc=new cdatacheck();  y9 {) T. C5 l
%>
$ N* v$ I2 Q3 h! E' T  q<%
9 h# x" @" n/ p8 [( Ustring 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";. Y) R0 R) R. J" x: g5 j( F# p
stmt=conn.createstatement();
! {3 }* z- x. z; N8 urs=stmt.executequery(sqlu);
$ Y0 i& P8 j+ k6 R* w%>* \1 _! r) x& h. U7 ^' `8 u( N/ k
<script language='javascript'>
, e$ ~9 P' B4 z2 P: a, aarr = new array();3 e$ }8 Z2 H( o4 `) u- \
<%  int temp=0;
. J; B* y, L* z7 mwhile(rs.next())% B: W7 Y$ l2 P5 s- @# L
{2 A. I# _' K0 G% {  E- u
%>2 l, I1 U/ K/ w, @; A; Q  m/ K
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
" A  {; Y( g: D8 w! ~: ^<%
" d4 l: b7 s6 p8 {$ n+ _- c1 Q# R2 qtemp = temp + 1;6 c! o0 U4 k! ^. E
}
% c. c  x% q3 d, N! t%>
$ h- K7 m" U+ [. m# r  [: v/ B) |# Xtemp=<%=temp%>;
3 _/ w& v* k8 @) D$ Yfunction changelocation(id){ 5 T3 c4 p5 L$ G% k$ S) [& X- i
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 $ T5 K( t0 j( e5 h# X( \
var i = 0; 2 w& ]; s+ M! G  @  G
document.combo_box.city.options[0]=new option('-------','');
* c8 c( V8 K1 H/ Cfor(i=0;i<temp;i++){ * F8 K% E: U" d5 Z# b. `; Z
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
' I2 H% S( h: }! b  h* d' idocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
) Q( o+ E8 v/ `/ J; g% N} : v6 L- `+ s7 B6 S! E3 d! G' q. S7 F
}
7 |6 f  C2 o% s}
# E/ h" J8 J& z7 `$ S* O& ^</script>- q0 G7 Q/ |2 N7 P1 m

! `$ s8 U; r: x8 X& q<form name="combo_box">/ {. e! T  s6 s
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
6 V& b  }6 c3 |2 m8 J  <tr height="24">
+ }! C) h3 L' z2 Q <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
2 [7 A, Q* S4 `4 _; c2 C <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
3 j2 z& V8 l8 L( p, I <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
9 b( ?0 R+ s: }: M- ~) L6 @% i4 J <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; Q* d$ V& S0 E/ j( `4 p! {  </tr>
0 C3 x% o8 H4 |: ]  <tr> 5 q2 w* E9 k" U, z2 l
<td>
3 `  _0 L% Y( M& ?" Q$ u. I4 h1 x  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
, J. J7 H  r) T, U/ z* P  <option value="0">请选择部门 ---></option>% N3 V; r: Q+ L; x$ W  l
<%$ K% _* n3 U; a
string sqld="select * from tdept";
& t6 C) H; A+ v; O  i' fstmt=conn.createstatement();9 R. f/ _0 ~# i$ Y; [9 o9 k! Q
rs=stmt.executequery(sqld);
* K& ]8 c& z3 |, L; Dwhile(rs.next())
% X5 M0 t. T' d{
) F. n& `. }) \9 i%>* D+ J0 I- Q$ W9 h# O8 Q  N
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
0 A8 t5 b, @) ~% [. X<%8 J0 k; w+ \- o
}% ~. B% ~! s; t; F- @+ E* Z1 b
%> 4 f. C$ e4 `1 s5 X# ~3 k
  </select>
8 ~  a6 k/ h& }3 B. w1 p1 @4 B</td>
8 Q1 I8 \/ u* c( b, V1 {7 Z <td>
2 N) M1 P8 G, ^* l  s; h  <select multiple id=city style="width:150;height:200" class="bgc">+ a# J8 H6 M0 @/ d
  </select>$ e) }* J- I6 E' x+ T( k$ ~
</td>8 r( k5 p* R* q# x3 h/ K/ F/ P; |
<td nowrap align="center" class="bgc">+ h1 s1 ~: `) @" R+ r7 P% X& d
  <input type="button"  value="<<" class="buttons">
5 X9 E) g% ?7 U' z2 A  <input type="button"  value=">>" class="buttons">2 U" @: z" o( Q3 A( F5 _6 X3 j; h
</td>
4 L4 `0 D! ]  l  ~4 U) K <td>, N& p) j1 k6 D) S6 H$ s% j
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
3 d/ |1 z) Z5 i# M8 d0 N0 k2 V" v  </select>
7 M* G* u4 Y6 V; ~</td>) ?* X3 |- V7 G7 C) K" H
  </tr>  r( z; U. C, K7 [  v
<tr class="bgc">
% c' D1 L. }. v. x3 ` <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>" ~3 y6 P# S& s  i. _& I
  </tr>/ I) E* ?& }; ]) ]" U; H! U9 F
</table>0 l' N4 A% G* H9 q8 N1 U2 [; n; H
</form>4 O$ y% c" E, V
<script language="javascript">) l9 g6 T9 J5 O- l* F5 _% o: |
//人名移动
$ w& W$ M4 i  n7 W; f7 p. ufunction move(fbox, tbox) {  h) C6 Q" O# k( J' g
var arrfbox = new array();
- m. X$ p/ d6 W. @  e% {# ^. W( hvar arrtbox = new array();/ j# ^4 Z" E) k3 [" A' n
var arrlookup = new array();
/ o& Z7 B" r$ I9 Z* E: @var i;2 R! @0 h8 K0 A# m# ^. E
for (i = 0; i < tbox.options.length; i++) {5 M' V; j$ h0 t9 I/ m9 ]
arrlookup[tbox.options.text] = tbox.options.value;, Q( k7 W9 S9 i- l6 r) G
arrtbox = tbox.options.text;+ a- T$ K* w9 x
}. z5 `* h& N7 y% q/ k% r
var flength = 0;
0 T& k! v& m  \; X3 V* q5 L, O& bvar tlength = arrtbox.length;
; q$ J$ W- e7 afor(i = 0; i < fbox.options.length; i++) {6 Q$ e  V# v3 \( I3 k/ X' t
arrlookup[fbox.options.text] = fbox.options.value;, d/ u6 B9 |# C0 ?/ Y  s# ~% F
if (fbox.options.selected && fbox.options.value != "") {
1 P" D/ ]! s! R: ?! ?3 d6 varrtbox[tlength] = fbox.options.text;3 O- m0 p; |" r7 Z  u  H
tlength++;0 r/ K3 Q1 w1 c: r! h! n
}
+ b/ {. w- N/ M- l/ w$ g& ?: melse {0 n) v. E2 @$ R) a: E! D# v
arrfbox[flength] = fbox.options.text;- f- B$ Y# H. e" r* f
flength++;
4 ?; I/ z! p0 V  F; x3 P  [2 u }
2 \& W7 f5 U* [4 e}- D" T7 _' s) Z/ J4 n
arrfbox.sort();
, p7 b  W- Y3 U2 warrtbox.sort();
5 m; H. L) \  c8 t6 G, w; B: z0 S- y, y" U; }3 l
fbox.length = 0;
$ Q4 g8 {# |7 |2 a9 k# h7 gtbox.length = 0;
* n- u& I3 o& D" U' ?var c;
% M: n1 i& T2 ]! |0 `4 s/ B8 d" Pfor(c = 0; c < arrfbox.length; c++) {. e4 @- ~& m+ o! o, w+ `) n/ p
var no = new option();2 _+ Y9 P$ o1 _
no.value = arrlookup[arrfbox[c]];, A8 A6 }/ ]5 p
no.text = arrfbox[c];0 P+ G6 `9 W4 G( {* W( r
fbox[c] = no;. I& Y( }1 q  s# _( h) ?- X! K
}
8 ~% L# L% K8 B' \for(c = 0; c < arrtbox.length; c++) {- c* r  y# N3 _
var no = new option();
, e& \  w  \# ?2 s! H4 X! g7 tno.value = arrlookup[arrtbox[c]];
$ y: t9 Y4 W8 T4 S. Eno.text = arrtbox[c];& \; M5 D- m. X" b8 p2 t. g
tbox[c] = no;
. H2 T' R" h$ O& a- _ }" ^! I% s" y& N5 y+ H/ [% `) ?
}" Z/ C; e3 R( y' ~! ?  I
</script>5 R7 L- }9 O" u6 O; j& E
</body>
8 D- U2 h; ]& U5 O+ S; D

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

返回列表

jsp+javascript打造级连菜单

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

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