Board logo

标题: jsp+javascript打造级连菜单 [打印本页]

作者: admin    时间: 2007-12-5 17:43     标题: jsp+javascript打造级连菜单

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
% Y, F- l5 |% U         c pageencoding="gb2312"3 ?3 @8 ?: K4 |  I6 z4 X: Z
%>
& G; P5 H' O8 _- B/ E<style>
$ u! s2 q( V9 o* C' B7 C.f9{ font-size:9pt; }
6 r* V0 [  ~4 f7 \.bgc{ background-color:#aecaf9; color: #0033ff }
3 L! u8 l, |( v( D: o( Z.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
* F$ v/ T7 P& n3 N! i) n8 e  border-bottom: solid 1px #4e7dc1;
& }1 Y9 W2 t* ^4 ~2 R  border-left: solid 1px #aecaf9;( @7 P# H5 h9 w2 F
  border-right: solid 1px #5679bd;
/ C- z$ l( F9 }9 Z9 b  padding:1px;* W6 i$ F) k8 Y
  margin:0px;}, |5 S  J) [# p# y" k8 ]0 e! i$ I
</style>, b. p! U' L( p& c6 i8 D% F
<script language="javascript">
0 P- {0 g6 }0 I) n  c<!--: c8 V6 b9 n: K! _% y
function rv()* \) U! Q" z5 Y. V
{
0 Z0 N2 s8 m% V# u  var val="";
+ x0 ^& m( ^) w- i  for(i=0;i<combo_box.list2.length;i++){/ z9 x' [! s: f6 F/ i6 B  b
   val+=","+combo_box.list2.value;3 t7 g5 L+ _7 k/ l. s& L
  }
4 m, P0 W- g( S2 I  if(val.charat(0)==","){
/ i% f9 ^# W4 k, L0 t- {   val=val.substr(1,val.length);$ R7 Y( d+ J4 J9 Y. c
  }
7 e& r. r0 f* n; W. M$ x( s' b  opener.form1.frecname.value=val;
) L6 o7 G; z/ U% b1 ~9 ]  ?+ i/ k  self.close();. R4 N0 a) z# X: _
}' ^* a, }) ]+ |' }- N
//-->( W0 ]8 B5 m& X) Z! t
</script>
/ X( G) _. h  N4 J8 N' B<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">, d. i- J3 O. n% W# V
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
1 c" o2 s2 g/ e/ l- M$ D<%9 P$ X. Q' }3 R; C) C" n+ P
  cdatasource ds=new cdatasource();  //数据联结bean实例  \0 k( v! w6 p
  java.sql.connection conn=ds.getconnection();
/ F1 D8 P7 x( E& Y- S  java.sql.statement stmt=null;
9 J* O& ~1 q: r' l) x5 l$ z  java.sql.resultset rs=null;
) T/ g/ c( Q! t7 \. W+ z  cdatacheck dc=new cdatacheck();
& ]. }( d8 S7 Y0 X5 s%>: r3 I. G+ b! A1 Y- `  Q
<%/ B  N* s- I! g: |: w9 g" G
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";
" C! d; b2 N! Nstmt=conn.createstatement();
5 F1 m0 Q) z8 Z6 T3 \1 d' crs=stmt.executequery(sqlu);- u- Y8 Q1 [& o$ K- P/ U( ?
%>" E8 o/ t  W5 M
<script language='javascript'>) ~( v. V+ K8 E2 s; m; E6 ~1 s; y
arr = new array();4 G- [4 x' d" C/ N4 `
<%  int temp=0;
. z2 i. c2 ?! b3 P4 J5 c& S0 `7 _9 y& ]1 uwhile(rs.next())# j3 X- i3 c2 l9 D8 p
{6 j( N* _1 R# G& _1 K
%>
" `% @  g1 E% N2 y' [" B, Z) G8 Z; sarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
: a5 d0 Z& N6 u1 T+ b<%
/ V; w* u8 V8 f, z  Stemp = temp + 1;/ }# B5 D6 B$ a0 z0 H) {
}5 z/ ]& g% K- g$ C% W2 M1 e
%>
9 E5 u' H' ?) ~2 Z% u) t1 mtemp=<%=temp%>;4 e; Y3 k+ \% V; f! X
function changelocation(id){ 0 c. o, x: v% S7 f
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
/ l; ?# f; A6 Q4 a4 rvar i = 0; + t0 X; v; @7 N! `- L5 I
document.combo_box.city.options[0]=new option('-------',''); 3 V7 a# b) E) |$ l# f
for(i=0;i<temp;i++){
  ~  p& y1 Y" k9 B* cif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
8 t4 }: k6 G+ R, ^% e2 ^document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); # l$ X, C! ]+ t6 r$ J) k; ~* o% Q
}
8 E2 t$ t1 c  B9 T1 U}   o) _0 F: S/ P0 ]9 A4 M
} ( X5 a6 u7 s& C5 G$ a% ]
</script>* W; \" |: i; c* W9 G; R% L

9 G8 Y/ d3 w8 e+ r$ o0 s# X( k2 @<form name="combo_box">- i- _8 F7 I! w* V
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">1 ?) {8 o0 I$ B( V7 Q2 }
  <tr height="24">
( O0 A: W$ H4 [9 S  t/ F0 @    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
! O3 m! V2 B! B2 [8 k: T    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
, y9 K& o" b* I6 `- W% x$ j  p    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>, t4 y. r' Y, h. [; y" g- L  K
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; b" P' j0 w* Y" R  </tr>
8 Y- |! W2 R$ v+ _% `1 g  <tr>
! v+ }) x& _5 H$ W    <td>
9 u" H# ?. B: E/ u5 c! _) ^  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">9 i4 k0 V3 `4 F
  <option value="0">请选择部门 ---></option>
9 H+ ]" c! Z# ~, B<%
. ~* U' ^& w3 |    string sqld="select * from tdept";' a% h. w; x9 ]
stmt=conn.createstatement();
$ R1 N" m' J" N$ W: S* Grs=stmt.executequery(sqld);1 u+ s- c9 s, g, Z- y& K* B6 L
while(rs.next())" t1 j0 I5 i5 Q
{
8 T2 {& x( {! k6 Y# X%>
+ S9 s* ^6 y( D, ?) B  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
" F! r, w, _/ x" i( }<%
+ G$ S' u/ F) g}
5 p, U$ F) k/ X1 [%> ( P4 l+ T8 U$ J: {, J
  </select>7 Q, U: g+ O. s3 G) j0 H
</td>
# q' V. u  x  Y    <td>+ N' W& e* @# t& ?7 r: \, Y0 \- Y4 ~
  <select multiple id=city style="width:150;height:200" class="bgc">/ F  ]1 O  d, [% \$ q
  </select>, {7 B# t2 }" y2 N  s
</td>2 d) q2 v" f2 k! W9 U: v  X) S8 Q# Q
    <td nowrap align="center" class="bgc">
( e" q2 @& d7 O, y  <input type="button"  value="<<" class="buttons">
2 h1 j  [* l5 j/ q; t( A  <input type="button"  value=">>" class="buttons">" ]2 }0 D/ c! h4 z9 R& ~0 n$ i% |
</td>+ V3 Z; n0 Z. i( c9 `5 l3 n
    <td>
8 `7 I1 W! U6 _! u$ u  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
, p5 L! W) m+ A  </select>* H2 Y8 b% E4 Z# n
</td>1 L2 ~. \. p( {# K$ A
  </tr>6 v: H2 W& X  g
    <tr class="bgc">
: N: }+ B/ R! {0 K5 u) E. z    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>0 W8 c8 r8 ?) [
  </tr>2 O  y' J6 z" u: P& q
</table>. c( V* x( l: a+ K1 N- g. P. \9 L! e
</form>
+ k! a  S: |: o) Z" z& B- K<script language="javascript">
* Z5 x6 d: g& g+ o* H//人名移动. D; o+ |' J" s( v
function move(fbox, tbox) {( S4 U+ B8 T, u" _) K
var arrfbox = new array();6 B1 n, B, `1 Z' }
var arrtbox = new array();
4 G: l/ T! p% E7 B/ u2 vvar arrlookup = new array();
5 d' Z) S" }0 @& }. g1 \1 n$ fvar i;$ C& U3 C+ Z) h0 T" j; B
for (i = 0; i < tbox.options.length; i++) {
; }/ ]" k+ j8 b: U% Iarrlookup[tbox.options.text] = tbox.options.value;
4 W5 S5 n  R3 h  S( c% u4 u4 ~6 [) Qarrtbox = tbox.options.text;. g6 S+ j% U7 p$ r+ A
}
: w, }  d. X$ C' Mvar flength = 0;
  n* x% f+ s  n2 Y% @: O1 z0 |var tlength = arrtbox.length;: \4 U- _0 ^' @& z
for(i = 0; i < fbox.options.length; i++) {4 N$ F  q0 E: a$ }! m1 A2 [
arrlookup[fbox.options.text] = fbox.options.value;& _2 M( ]0 M/ R
if (fbox.options.selected && fbox.options.value != "") {
  Y& h- u2 H* @: I* r2 [' Xarrtbox[tlength] = fbox.options.text;7 X# J- Z0 x: f# @8 |$ R$ C
tlength++;1 i) d' E$ i: r3 w: r
}3 `9 q0 h1 P6 j) C/ J
else {6 s5 e% j" }% ~# V, \1 J
arrfbox[flength] = fbox.options.text;
9 V' T. z$ `8 T" ~" ~4 D# {: Oflength++;
' C8 q: ]" m/ F7 s6 Y   }
5 w9 p, }* y- G+ J6 x}
0 B" x6 S  @# ^6 Z  \1 Z6 Barrfbox.sort();, @6 M3 H. t, D' j2 a
arrtbox.sort();
! o# q4 n& B4 ]  G. K! [( a: L  v1 C+ e& N- [& v# R
fbox.length = 0;
: D, d( U, Z; @# U  `5 A; e6 Qtbox.length = 0;
! l# N3 r) |! \  `var c;# k- B7 U0 X: h9 Q1 h! s6 e$ l1 C
for(c = 0; c < arrfbox.length; c++) {- V  K4 b3 M" G
var no = new option();
# x) ^6 n; H( p$ }1 Y8 _4 Jno.value = arrlookup[arrfbox[c]];) {0 j# a6 O0 A8 ]& r
no.text = arrfbox[c];4 M9 }, G! p7 k
fbox[c] = no;
. N' ^: F# N8 O6 `}! }+ p$ R% G2 N/ D, x4 q1 w
for(c = 0; c < arrtbox.length; c++) {+ A3 ^% u. e5 [: d4 h1 S  `
var no = new option();
+ T# ]$ u+ g5 J6 N" i2 qno.value = arrlookup[arrtbox[c]];
: ]% U0 o2 b  @! kno.text = arrtbox[c];# D; A& V% b; y3 Z; L( m2 i; j
tbox[c] = no;$ n/ s" d5 |1 x- p% t, Y0 ~
   }8 ]6 m! F( e' e2 \7 S5 o) b
}1 ^! a  ]! j2 P# W) `& m
</script>
3 ?# t# J) ~/ f! U3 I9 K$ x</body>, x/ D& H! t, p! a0 e+ t- J





欢迎光临 捌玖网络工作室 (http://89w.org/) Powered by Discuz! 7.2