jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"6 T' i1 }; o6 E" b  [- X
      c pageencoding="gb2312"
%>" j; `4 }! X) k$ @2 E' F
<style>
.f9{ font-size:9pt; }' U, g# \7 p) V& L) i' ~
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;3 z+ i) w% I/ n' @. A
  border-bottom: solid 1px #4e7dc1;& A! @, Q5 o( G5 R
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}" _( x( F6 W1 D4 ]
</style>
<script language="javascript">

2 @5 X# E$ Q% O/ ?( k: \</script>. a  f3 M" i$ p* ~" k
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
1 d+ a: y9 I4 S: B2 B& i# H<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
! {+ F  m2 q+ I& L' J- y/ s<%( z5 [4 Q! P3 Y( V. h/ p: q
  cdatasource ds=new cdatasource();  //数据联结bean实例
2 q$ ~7 |4 p8 f# u, R! s  java.sql.connection conn=ds.getconnection();
% }6 P/ H+ s* _3 Q# {" [3 K! z+ U  java.sql.statement stmt=null;) p. g/ g3 K" q( N" ]+ S" S
  java.sql.resultset rs=null;8 F2 h9 ?- f) a" y9 r6 m
  cdatacheck dc=new cdatacheck();# F( ^6 Q! q6 ^; t
%>
( R5 b: K( G- p* F' D' n3 v<%
/ n' N% t7 w5 z! m5 pstring 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";/ k& b4 j3 W3 Y, E) A3 x. s
stmt=conn.createstatement();3 y& `7 J  K2 @7 z0 i9 T: I
rs=stmt.executequery(sqlu);
" G4 [$ b0 @9 E0 \%>/ ~: c; q- G' Y4 M0 L
<script language='javascript'>
9 V0 \9 W0 b5 g  Barr = new array();
7 a7 w, [8 {9 m0 ~  l$ S4 m2 A0 w<%  int temp=0;7 P6 x- _* `9 r4 _0 {$ e! c
while(rs.next())
( Q, j* Q7 |# g5 F5 m{
" r7 `. g, H! u& w' f# e( Z%>4 d* B8 Q! a- q; B, C2 Q
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
$ Y$ ~3 N9 s( t4 |4 E6 D" O9 L7 F5 c<%
- j, g' ?  I9 a  M( C4 a% ftemp = temp + 1;
( h2 @, m2 |: }% K. x: E}
5 A0 C$ D0 W2 f' V( F%>
1 I% L  e9 c5 n* z8 U: otemp=<%=temp%>;- ?8 O, n2 K$ b, O) D; e5 v
function changelocation(id){ - g" y( k% r- e; ^
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 4 I7 F0 l8 N  q% d3 s9 W
var i = 0; 2 M& ~9 @* d( I( N2 J! K- a! {/ s
document.combo_box.city.options[0]=new option('-------',''); . X" ]1 M3 X( }5 l. e
for(i=0;i<temp;i++){ + E9 U4 a, P4 K7 _/ v
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] , ^2 W0 l- W" a4 w! N* V2 a
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
$ h4 u- p6 Y/ @# y, I8 I5 l' ]0 o}
+ ^$ |9 p3 i. g) B6 V( m} ; w4 k7 K1 ?% _/ }  }
} ' Z& Z( s8 [/ o1 ?' D# J6 t% H
</script>
1 D+ b& T' x& N( |8 e
$ ]. T& b" Z( k<form name="combo_box">! W  G. v2 Q* k! n& x
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">% `& ]' [. G* t; Q6 r7 D5 ^" V% D
  <tr height="24">* \* e) `" ~# R0 w# G0 r
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>) T$ \$ W6 c- ~0 @
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>. B3 ?' _$ ?& M9 a$ }+ z( T# O
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>& t! _; N7 p& h. v4 e
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
, N! L' d. F1 w" F  </tr>6 B( g% D+ }- C7 ^$ z$ r3 r) _& Y
  <tr> 7 |0 I2 H1 q# C) ~6 R
<td>
1 d" y7 @3 K0 \) h+ }3 U  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
" s. L& h4 _4 M2 a9 l  <option value="0">请选择部门 ---></option>% ]" Z& S! U! D
<%( @+ b3 @# ^: P" \) D- F7 {- `. Q0 |; d
string sqld="select * from tdept";
: v" o# d. m. o# p% Lstmt=conn.createstatement();
8 ?' x, r) l5 Frs=stmt.executequery(sqld);7 e/ Y1 _( d9 D' M
while(rs.next())5 o& ]7 i$ s$ w2 a( Z
{% p5 j/ ^! G1 L# G% y& X
%>8 L4 x) w  S) C' m2 b
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>% L9 O  ^/ T! U7 I. Q
<%* `5 @  i/ k, n) u/ i( N6 V6 a
}
, h- f2 r% a5 m- @+ n! z%>
) J7 y9 l4 K% Z6 f9 A' a4 F  </select>) [8 t$ o* Z% x3 |# V
</td>; o& l& \, U6 v0 a9 z0 }' @$ G
<td>9 S* x' l' c$ c; G/ E" e+ t
  <select multiple id=city style="width:150;height:200" class="bgc">
0 N0 t) c8 [0 Z  T- j  </select>  y  r2 H: z% \6 c& N0 n
</td>
! Q( @3 Q! p$ |: R9 X# d <td nowrap align="center" class="bgc">' N9 V- j- ?  V' j9 M' A
  <input type="button"  value="<<" class="buttons">
; D! q/ O9 H2 p  <input type="button"  value=">>" class="buttons"># m0 i1 A' P: g/ k# Z- C3 ]* |) V
</td>
3 y* |* H  N1 r$ D! X! { <td># u/ k# s6 m1 n' r6 n/ C
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, I, v/ J& E: I$ R0 ?( ^0 ]  </select>
( V  [  y+ ^# J5 j3 P</td>
) u7 p% Z7 f* \9 |* G0 y* m3 S  </tr>
9 F. `3 O% I2 D2 G1 D9 w <tr class="bgc">
) I  A5 z1 K' Q+ ?+ a <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>, r9 M5 `$ n$ J( z+ ]8 O
  </tr>  W$ p& ~% b) G/ s  _/ c
</table>, |+ h! x  L$ z7 C  h4 y" i
</form>
4 y3 X5 ^( K: M<script language="javascript">" e* c# g4 L! ?. R9 P! D* [$ P0 c
//人名移动
. H7 T" `5 P, e, Y- m5 u9 K( Cfunction move(fbox, tbox) {
9 p* ^' T/ t) l% jvar arrfbox = new array();
; U* k( d* S4 E+ T# gvar arrtbox = new array();. @/ k2 n% c1 H$ e3 Y8 l) C. d
var arrlookup = new array();; O( A0 f1 Q6 T: }
var i;# F# p* I5 K# m8 ^7 o
for (i = 0; i < tbox.options.length; i++) {
# B& J9 Q: x' {/ d5 p7 [* uarrlookup[tbox.options.text] = tbox.options.value;. @2 I4 p  v2 S8 Y- _+ r
arrtbox = tbox.options.text;
1 D% w' `: f) D2 r4 @6 a}
* F( C. p  l/ L7 r- ?! J1 ~var flength = 0;
3 y- R8 }& ]+ p4 {# Cvar tlength = arrtbox.length;3 C8 K( }' [. |* [, T+ Z
for(i = 0; i < fbox.options.length; i++) {/ u% c$ y" W' V$ s( T' o' e6 o
arrlookup[fbox.options.text] = fbox.options.value;
: b5 z$ H) p" p- j% S1 j% yif (fbox.options.selected && fbox.options.value != "") {
) q$ X: t* j, ], H, ?arrtbox[tlength] = fbox.options.text;9 d8 I- d% `( a" r" n  K
tlength++;7 Y3 U/ I% z4 k
}$ L4 X8 N: |) [) i' R
else {% {4 c  _/ e0 k( s! o; z
arrfbox[flength] = fbox.options.text;
+ p/ y0 o# x& z2 Q2 _. O& I5 Uflength++;
2 S) `5 S' B; D1 o }
; k2 _- X1 O* D( r) h% d}; r: r  q# M: t; n2 O2 p2 N% h
arrfbox.sort();( P& q1 ?0 l) N7 ~; z
arrtbox.sort();' ~/ w: a% B9 A; q1 ?3 ~4 i% ^" e

4 {# p6 x1 ]% `8 X5 |5 \2 bfbox.length = 0;
& ?& T, U) E- `- g& n$ Z1 l2 `tbox.length = 0;
# \1 ?. W9 W" _var c;
9 C: ?- Z* `" pfor(c = 0; c < arrfbox.length; c++) {
4 u: L' e2 \8 l: D: ]var no = new option();
7 e; T7 `! d- @( B6 }" Lno.value = arrlookup[arrfbox[c]];8 d- o) Y6 U, B+ ?
no.text = arrfbox[c];7 K4 @  M+ P; x
fbox[c] = no;. K3 l( n9 j, Q2 U* J3 ]
}7 ~; n' k" m5 I5 d$ S* [
for(c = 0; c < arrtbox.length; c++) {
, N0 m) e6 N2 xvar no = new option();
* ]) W; ]8 A# g4 i1 ]no.value = arrlookup[arrtbox[c]];2 ]5 x5 F6 C4 c3 e7 u5 Q8 j4 R
no.text = arrtbox[c];  B) Q1 e4 t4 i- L
tbox[c] = no;
( @9 j+ E9 J% e, Y) H1 a }$ Z* G( ^3 M2 t. x
}$ x+ |5 Y$ r5 \: P& Y" q
</script>1 }, |! r% J( X- y& Y* V0 @
</body>
" `& y1 L1 y' ?; a1 ?; E6 T, u

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

返回列表

jsp+javascript打造级连菜单

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

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