jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"5 a3 s) n+ i' {( N: u- L
      c pageencoding="gb2312"2 G( h8 A5 J( Y
%># k+ P. V& c; E7 h0 u
<style>! k8 U# h# f! P& j- m
.f9{ font-size:9pt; }6 |! o6 h0 I1 t1 H8 r: Y
.bgc{ background-color:#aecaf9; color: #0033ff }" m$ }# B' n, _: c
.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;
  border-right: solid 1px #5679bd;
  padding:1px;) q/ R5 O1 ?- L! f  }
  margin:0px;}1 d9 S* C( [; j7 r1 H" ~- `& `
</style>$ o# m2 B0 B% y5 |9 `/ \6 L
<script language="javascript">5 b: T6 f( D4 c9 M/ [! h1 W

6 o4 ]4 I" t, `' s* G# o9 s</script>
6 N( Z. p7 E$ D  Z* Y<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  O* Z  U; O/ o% l% Q  z/ D3 b<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />5 R4 A8 A7 P; g4 x" k0 }/ m2 I5 s
<%
- d- M. i4 ~% @  Z; a5 K4 H  cdatasource ds=new cdatasource();  //数据联结bean实例# y* m5 ]$ Y& U2 ]: l9 ^) ?% y5 P
  java.sql.connection conn=ds.getconnection();
1 R1 m! e2 T$ {$ [) Y  java.sql.statement stmt=null;, D  P0 Y& t! P6 ^* _% ~
  java.sql.resultset rs=null;
3 z/ K# f# w) L  cdatacheck dc=new cdatacheck();. P  @0 h  d8 R& ?- Z* v
%>
. N  D* M2 C) [) X- ~<%7 d! f4 m3 U% q0 W; A9 b
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";
/ z" r$ Z) y6 k. `7 Estmt=conn.createstatement();
) n% s* |* O9 D! E& X' |& irs=stmt.executequery(sqlu);9 _9 C8 J: V/ O, u
%>
, J* p( W7 v3 R% v# k9 v; z<script language='javascript'>9 _  Z! ]& m4 z4 }+ y: `& j7 C
arr = new array();, }0 y" m) i: ?
<%  int temp=0;" m7 Z+ V4 x, O$ h, A" T5 Y" D- i7 T
while(rs.next())
! b2 U% R8 `2 Y& @7 O; x( @{7 r2 j, h! ^" G- `. \
%>  @1 G! m- a- V
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");* g4 Q5 f. F6 \- W) s
<%( E. H5 d( x1 c! ]- z
temp = temp + 1;0 P( w. l/ w1 p8 L" m; {- ~
}$ R% I  _6 Y: l6 T6 n
%>
2 G# ^' i0 Y$ m3 l& ltemp=<%=temp%>;& @0 d; @) A+ P) P! u8 B3 [. w1 j
function changelocation(id){
; ~  X$ O' f* f3 X% i% Cdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 8 h. C9 i# M+ E( ]' R- {) }
var i = 0; 1 k8 t& [5 @& S
document.combo_box.city.options[0]=new option('-------','');
" z9 B/ f0 o+ dfor(i=0;i<temp;i++){ 8 a7 q  s5 v1 |6 X
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] % Y0 b0 k7 a2 C  K3 i$ C
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); ! g+ P2 K. K* t
}
2 i, N7 ?% ^- C' D}   s) Z7 Y  L; T
}
& [6 r7 i9 G; [</script>+ h: X3 r" S8 A

$ M1 d. h- \3 t* M- C<form name="combo_box">) a7 q& n- |! `  p# Y
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">5 o) y) w. _  v- w& j
  <tr height="24">
$ c* A$ i1 E  L <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
5 s0 h: u) D- W  r <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
# b) v5 f6 q, {' I+ R' b  Z1 v' T <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>* x4 p; D4 }/ ~1 P) \6 Q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>, W1 F* u5 \( c5 P$ @
  </tr>( ]6 m; n/ w9 \& y' L" r
  <tr> 1 O6 d* a4 `: H4 @8 o1 h
<td># O4 c3 m0 T. k+ ]0 S9 t5 u
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" O; _: {& d' m  <option value="0">请选择部门 ---></option>  z* @& R, |' C
<%- Z5 Q* N' d) D" y% S  G
string sqld="select * from tdept";
' K' }) s" J: m, |7 h# T2 E2 ~! Lstmt=conn.createstatement();
) m" E, x, u  E; Y3 T$ Ers=stmt.executequery(sqld);
9 i* |8 \5 d" B4 y3 owhile(rs.next())$ E- q. B  `( k$ m- Z5 [+ y
{
) R# A0 f% J( z  x%>
1 c  c# r4 ?: S- \  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
, U) D  w" K! p( U6 f& y& W1 k<%
# D1 O- o& ]& F( n}* \/ m7 F: w; V, E8 F/ K
%> 3 D: K' j' W  r
  </select>
' ~) s  x% [6 V6 N4 A8 Y$ g9 [9 ~8 w</td>
; h/ \" L. c1 Z' s* O9 {/ }( Q <td>. C! N& ^: x- f9 \6 A. C
  <select multiple id=city style="width:150;height:200" class="bgc">
5 t- e# z+ ]$ F" N" S  </select>
- Z% Z! c6 @9 C$ k: M# Y8 V</td>
: O; q9 c" z2 z; M0 u) J <td nowrap align="center" class="bgc">
. X) X: v$ u8 ~% J. m  <input type="button"  value="<<" class="buttons"># l5 q4 w7 M) _5 K  G" T
  <input type="button"  value=">>" class="buttons">: v5 M6 n" M' d' B4 w( |4 r
</td>
- g! m7 ^! B# w$ R+ D* b <td>
' [6 S. M6 M; D2 I. _  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">& h) C: t9 F! \( ]$ e( G3 P
  </select>
3 |3 M$ [4 b( y, Z</td>
9 Q1 r7 F' |# y/ g7 b  </tr>
% j$ v3 j! s: j. I4 @- F <tr class="bgc">
; K$ b: C% ]* D- G$ l# u- p( F5 g <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
* c3 k: u. U) d3 w( N* [1 t  </tr>' u0 K7 Z+ S! z1 }9 M: I# G
</table>. H3 a# o0 ], k7 L% D8 p
</form>3 B7 i& L7 X: u5 \7 G
<script language="javascript">
8 d. w; d) k  `0 w//人名移动1 ]5 {, t3 u& Y4 l3 R! X& @
function move(fbox, tbox) {
* d; O, L7 x9 jvar arrfbox = new array();. k5 a, ^. |3 V
var arrtbox = new array();! ], i: w9 P. N7 ]  f
var arrlookup = new array();
0 C. V0 c3 U) {- ]! m8 x- ^var i;+ z  o6 S0 Q' {3 N+ x8 F
for (i = 0; i < tbox.options.length; i++) {
  b' U. E+ y' e! g2 V* oarrlookup[tbox.options.text] = tbox.options.value;
" ], d6 T$ r% Q5 O- `: X; w" tarrtbox = tbox.options.text;
, `' N  ^6 y1 J$ r7 s) t}
( E- v4 t3 k: A" ~; f3 }var flength = 0;
( ~, ~4 Z% D6 J' U- ~+ e: ?: c+ svar tlength = arrtbox.length;
" `& Y0 ?6 t* a; Y! Z9 X4 Pfor(i = 0; i < fbox.options.length; i++) {+ Q4 G! B. a" e: h- H5 P* Y* h
arrlookup[fbox.options.text] = fbox.options.value;( z6 M$ U. c6 u
if (fbox.options.selected && fbox.options.value != "") {
# ?6 q" y& C6 `& Harrtbox[tlength] = fbox.options.text;
  a* N; |& L8 T) V5 D+ `tlength++;
4 r5 O& V9 F5 i7 _2 H6 _7 O7 E}
% k  \; Q/ @8 Delse {& m* }/ ]( @7 d. Q$ F- y* r7 A+ L
arrfbox[flength] = fbox.options.text;
, O$ w5 B  g6 b4 N* X1 ?" A( {% tflength++;
* S2 i& u" g( h$ I# {0 A( i }
1 M+ I2 h8 L. m  j, q; ?' n}
0 v6 z  m% t. K/ o, _( ~, _% U5 {+ Varrfbox.sort();
+ f, Q7 Z0 Q" k. C: Q6 marrtbox.sort();- B) H- x8 r1 o2 m
( }: N) l2 b' v
fbox.length = 0;
/ J( i8 w  v* W$ Ctbox.length = 0;
! M3 r9 S, l; X2 Z. L: W" x. kvar c;
5 Q7 ~5 |. r" Y6 _# F/ e- m9 r$ ~1 xfor(c = 0; c < arrfbox.length; c++) {
" [  ~$ M3 Z6 L5 dvar no = new option();
# {8 o% ?9 q, I$ u0 bno.value = arrlookup[arrfbox[c]];5 Q# w" W/ t: e2 m% }( X* q
no.text = arrfbox[c];8 n& f0 }4 {9 A6 |
fbox[c] = no;
$ C: i  J% K2 t- P. Z$ U4 D}
- C: d  u7 f' R9 W/ [0 I. ]) qfor(c = 0; c < arrtbox.length; c++) {
0 J: e  }0 G6 d' I7 ~var no = new option();
' N1 Z4 I' h* I/ R4 W3 gno.value = arrlookup[arrtbox[c]];
- j0 i2 C7 f1 Y" }% `no.text = arrtbox[c];! S$ T, }% Z) T( d' |, L
tbox[c] = no;( B' m0 L1 M( r+ u
}: p" B7 K' d/ R* I' B# \! E
}0 ~# g, }# b* a  ?! N
</script>! _) ^4 d$ n2 {: A, N, y) E
</body>" y. c3 K. f) e4 S1 I; Q3 j! F

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

返回列表

jsp+javascript打造级连菜单

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

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