jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"+ i1 n* U% ]# W* w
%>
<style>2 `6 h  C. U1 E: W- ]
.f9{ font-size:9pt; }. X2 ~% S& F) E! R1 a: p- c, n5 \5 D
.bgc{ background-color:#aecaf9; color: #0033ff }7 n' ]. {0 D) u4 B
.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;0 ^; F( y: O3 K. ^# s
  border-right: solid 1px #5679bd;; ^0 e4 C* u& i) v/ J4 V3 e9 }
  padding:1px;
  margin:0px;}0 O8 I6 [+ w5 ^% ~2 ?, G2 W0 P
</style>
<script language="javascript">

. [* G& c3 j. H, O</script>; l; k/ m; q+ Q0 J
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
8 I  s9 W" y9 O<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />2 B# o3 M5 R/ q0 s0 s
<%
- _3 Y- i  Y3 J3 v3 Y+ w  cdatasource ds=new cdatasource();  //数据联结bean实例
; _7 x! f$ F( N' H  java.sql.connection conn=ds.getconnection();
; J* F6 |; s, n, O$ ?" e" K4 w* {  java.sql.statement stmt=null;
' `2 @. V) C% t& W$ @2 s1 V# g0 ^  java.sql.resultset rs=null;
+ r( O+ W, t4 \2 O: F  cdatacheck dc=new cdatacheck();
+ Y7 L4 a. N$ ?+ G/ H' Z9 v%>, u. {) P- C, [' ~3 c
<%
1 r1 ~( U6 B9 q  w, w: cstring 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";6 f; K# q1 I: D, H
stmt=conn.createstatement();2 z5 _8 x7 s4 b6 [* |* A  O2 E7 A
rs=stmt.executequery(sqlu);
; a- f2 P  l3 r%>
5 ]' a) j% B1 r( t3 R7 w<script language='javascript'>
& g" I# z3 }) _, S  rarr = new array();, H( L, _1 `+ H- w* y
<%  int temp=0;( R" w% B( W  u/ L0 b
while(rs.next())# h0 {6 N* C3 r- W. ^4 \5 m
{. O" A" [6 W- @0 g; K$ |4 V; X
%>
* ?' y7 W/ ]. z& carr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");9 O. b& q5 X5 Q1 A" u1 x+ G* i$ @
<%
$ e% H/ F" L4 F0 Otemp = temp + 1;
# E. i3 `1 K' J4 `; Z}
; Q1 P/ L! n0 h6 L4 L) v%>
' D1 o4 I0 v, Jtemp=<%=temp%>;# e3 G7 x6 k4 X
function changelocation(id){
, {& J/ ^7 P& s- O' }: fdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 . w& c! {. s, t6 [% a4 W- @/ s
var i = 0; : T! G" ~: s! p, C- D
document.combo_box.city.options[0]=new option('-------',''); 9 j$ T5 n1 L0 f/ t
for(i=0;i<temp;i++){ - n4 q8 _5 g2 n' K* }
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
3 h3 R, j: @- gdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
1 H/ M! C( I( L+ p! ~( \0 t, r}
! o. m' {: V$ X6 z7 F8 A4 g4 y} , O. H/ V9 d, ]+ l; U6 ]6 _
}   a* f$ g. x6 q# U- ^, J: o
</script>  [% {; Q, f. U  P

. u  |) k* }. R<form name="combo_box">$ l% V4 L# [" x  Z5 m  U. C% e
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">' h3 t$ }+ \/ O- k* F  b
  <tr height="24">6 B# n. E& @$ V" q: l, a
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>: }% E8 P# g4 ]& H  _# D" \
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
" [0 |) C4 l7 W6 E6 V- |2 S <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
# K' H6 D& \: W& a) {- f. } <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>9 S" }9 A7 g" @7 H
  </tr>0 K) ?2 K- z, x) {  ?: Y
  <tr> 1 Y6 r0 v2 B+ N* h( i( S. E
<td>1 Q2 D5 Y) ^+ Z# \# s3 _$ J  A0 E
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
7 B7 A0 w: s. @  <option value="0">请选择部门 ---></option>; d# c. \: y% g$ J+ Z
<%" S% ^: @8 q$ k! P
string sqld="select * from tdept";
1 x) ?0 M& L- B8 [stmt=conn.createstatement();, Y- \  p: P$ C- |( B5 o3 i& H
rs=stmt.executequery(sqld);- b: q6 v7 A, a, X, X' f
while(rs.next())
* P: {$ n4 W. ?+ I{) P  O9 u9 g% z- c; u# I% G2 G
%>
" }, z3 Q, J- ^# j1 \3 q  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
, H- G: X# w/ d( Q<%- R' c& L! i/ ]; E4 |
}3 }4 S% W, k! W% X& B% R; y
%>   H* o/ J7 s# _, \$ R8 r+ D0 v7 j
  </select>
9 ]! u7 l6 {; z' |$ B</td>
# Q  \5 Z1 p& W6 ~; O. Y* v <td>
9 E8 m* _: Q3 L' o$ i& ]- t  <select multiple id=city style="width:150;height:200" class="bgc">3 z1 H( c3 A$ P  N3 ~5 v1 }& I. h
  </select># H' b2 `& k( i0 v' {0 k; W8 A% G4 ]. ~
</td>1 X; J! W0 L: K2 E+ P
<td nowrap align="center" class="bgc">
. f5 x3 [8 D6 \1 p. _  <input type="button"  value="<<" class="buttons">
" f) W0 C  I; V2 X( q  <input type="button"  value=">>" class="buttons">
' I& w! Z  v' g& R; Y# A, Z* W4 B</td>
: l; ^9 Z$ _9 D+ M3 J% S) H: c <td>- h2 i2 U9 j3 U+ _. o
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
2 V- Q% J. e0 b  </select>
7 R' Y6 I7 s- Q8 C2 L</td>
- u9 R/ A  E; l4 ^' r+ w+ r- ~  </tr>% S+ h4 ~; ]% i
<tr class="bgc"> $ B* B7 ^( F7 y5 |  a9 o% S
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
5 F& H/ U) f* l6 K, ~  </tr>- c) g9 @6 C. ]
</table>
6 O' c/ a$ ~' ~# P" o' x</form>  I2 ?* o+ l: n& r: K# o' U! e
<script language="javascript">
# T! T  w+ {0 B8 M//人名移动
7 b: J. d  j1 P% Y0 G# afunction move(fbox, tbox) {
! i$ u% F! A9 O) k9 X0 kvar arrfbox = new array();
* }) K3 G" x5 G/ |5 {var arrtbox = new array();
  {& G  Q8 I4 Tvar arrlookup = new array();
3 b! D0 I4 ]/ K: {$ c- a( rvar i;1 u% D" ?2 ~- T. S5 e5 ~( t
for (i = 0; i < tbox.options.length; i++) {
2 C. P/ a2 C- h' _" Marrlookup[tbox.options.text] = tbox.options.value;4 ]* G" q# j( b! V# v, s3 O5 L
arrtbox = tbox.options.text;- f5 M* F$ e3 ?$ g0 R$ r( i+ G: D
}( w/ i0 L* c9 L3 A; q% \$ F
var flength = 0;5 Z1 W2 ]8 H4 J
var tlength = arrtbox.length;/ v: E' |8 P" q" v* a3 s  N
for(i = 0; i < fbox.options.length; i++) {' k6 B; b9 O/ g3 g& q" R( f
arrlookup[fbox.options.text] = fbox.options.value;
( a9 [- r5 H6 q! d; g, C; g5 D  ^if (fbox.options.selected && fbox.options.value != "") {* x4 X$ ?/ B1 v" M
arrtbox[tlength] = fbox.options.text;
; j2 F+ x6 n: ~( a; r; Utlength++;
( L' A# o6 f& |+ @8 N7 d6 P}' x+ \- q& T! q* c* [
else {8 ~5 g& C& Q& d
arrfbox[flength] = fbox.options.text;5 c7 a! ?& I& D1 v
flength++;
. H' ~. ~4 R. L- j) ] }
/ ^" y" R# |# i' F}$ p' Q, L( n; b( j3 X
arrfbox.sort();2 [! I! i# `; ?
arrtbox.sort();' h5 H- h" D6 b2 [
2 M; u& N& z" A) x/ c& O5 Q
fbox.length = 0;
9 @. R4 c2 p) F& y0 Mtbox.length = 0;
0 q, p8 p( p5 p! |var c;
+ y: k6 }! Z/ F# F( z! b( tfor(c = 0; c < arrfbox.length; c++) {, q" c9 ~, v% O1 w1 o) l( G8 g9 M- [
var no = new option();
% W& z4 B* N4 C, o6 M% R. Wno.value = arrlookup[arrfbox[c]];: D+ B, w) r1 O9 k. T
no.text = arrfbox[c];
  l7 U; u8 ~. l! |: |fbox[c] = no;4 C* V5 z7 `$ T* _! O: y, B4 b
}
% ~/ D" o* l" W3 Y) b: j" O: Yfor(c = 0; c < arrtbox.length; c++) {
; y- E. t2 W! _5 o. q+ Y$ xvar no = new option();* \0 o! G7 H7 M, v5 n' q
no.value = arrlookup[arrtbox[c]];
8 T* K8 Y* `% w1 i' I8 {no.text = arrtbox[c];- g3 u' Y- K2 [( P0 a' N3 Z$ u! ^
tbox[c] = no;2 [  i! J, F, J
}
* A# M2 }. @9 S* S/ e7 X2 m}/ T2 ?6 p, y/ l' F# X
</script>. r/ Z1 X# f6 \
</body>$ G$ `1 e2 ?& w' e7 i1 h

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

返回列表

jsp+javascript打造级连菜单

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

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