Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
4 g+ `1 a; z6 d' h  X6 _% ?0 F& D$ R         c pageencoding="gb2312". Z  ~% k/ K( m% Z) ~" f' ]+ Y% @
%>
1 `. P' n3 Z+ x5 R<style>5 I5 _) F* E2 u4 t) K0 C- i- z
.f9{ font-size:9pt; }
5 c$ K1 ~: Z. k# g, I7 O6 W# |.bgc{ background-color:#aecaf9; color: #0033ff }: {, x( L, b1 b+ j  a
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
. k$ E# y2 V9 B/ z  R/ P  border-bottom: solid 1px #4e7dc1;/ `# w. n0 P9 k# T$ a8 H) |6 l. \5 x
  border-left: solid 1px #aecaf9;# M" j+ R* z9 x+ J+ |
  border-right: solid 1px #5679bd;" b' r& x6 D' o6 h& B
  padding:1px;
5 v% R" _, D' L2 J  margin:0px;}! @" c0 Y5 a* W% l
</style>
+ v% C2 D( a. \  `3 ^( ?) }<script language="javascript">
) ]0 T# M2 ?4 ]# w<!--
; I5 @4 L0 s% B; q- nfunction rv()
5 L( u. }( V- T7 s( Y{$ [: ~+ T9 Y" `! k% u: K! e
  var val="";6 w5 [. y- N3 i) O
  for(i=0;i<combo_box.list2.length;i++){
3 {9 P+ W7 N3 n   val+=","+combo_box.list2.value;
6 Q3 Y/ i! F' V+ Z8 A" J; f( q& P  }7 `7 v) j3 G. h7 S8 \% d! k. H6 o: m
  if(val.charat(0)==","){
& m/ E/ M1 C7 U% `, ]  m3 L   val=val.substr(1,val.length);& H* o, x4 x/ m
  }
1 w& r6 l8 y  p  opener.form1.frecname.value=val;
# m- y. o4 L$ r  z# v  self.close();$ P( k; N* i. D  F  {/ y1 P
}7 z# b, ~3 F, L8 k( J9 p% a
//-->0 `0 T8 y$ y* A/ d
</script>8 N" b! A5 A4 a6 A6 v! A- t% O& L
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">& x1 p# `8 q: `. ]
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
  w6 E$ G- J0 y* U' Y& L* G8 x# y3 P<%* Y9 y9 ?& d0 O1 s  H; S% [! R
  cdatasource ds=new cdatasource();  //数据联结bean实例3 i, t( D0 A' Q9 H' R- y, @8 h* k
  java.sql.connection conn=ds.getconnection();
; ~! p3 `  I- P4 c8 z  java.sql.statement stmt=null;
$ |; e+ P3 c+ @/ c# q% ~6 U: D  java.sql.resultset rs=null;  {, b1 C4 B8 n" c
  cdatacheck dc=new cdatacheck();6 P% t3 K% N, B/ D2 _9 a" _
%>
! R# M* s0 c4 [) B<%' v7 H' a* d2 s5 X
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";2 \. b' M$ s( B& I8 ~1 B& D( z: B
stmt=conn.createstatement();3 Z9 @7 {' D  m
rs=stmt.executequery(sqlu);
- [* k; E, [% j8 l& f* W- ]%>  U" M6 y3 n# Q, K) \' l" i
<script language='javascript'>
* J: l3 I7 |: _* \- P# barr = new array();! {& O2 V. |# T' x8 B
<%  int temp=0;- M  D5 X9 Z: v: t
while(rs.next())% K) c$ f$ E/ U. F! G
{
! r, s: r  v- m; d%>) `2 j/ o$ f  I; s
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
8 l5 e+ g" q# _* [/ o9 h0 k1 n" x<%
% H" f6 R3 ?' |  Y1 a* f8 htemp = temp + 1;  l! |( u, M7 p& ~- J3 F
}! T2 q+ y3 j& N" Z; I; X6 g. B1 l
%>
" t- j1 Y) O2 G# \. Q; Ttemp=<%=temp%>;) ]7 K8 V8 @. `/ w
function changelocation(id){
( [4 P; E  J/ b- S' ]document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
+ g, K- u7 |' }" [- wvar i = 0;
' [( y+ p$ w( H2 e8 G& E* sdocument.combo_box.city.options[0]=new option('-------',''); ( a# h: D7 l4 y$ \! {; [9 q/ E
for(i=0;i<temp;i++){
5 i7 j; T! W# D" v6 p/ Hif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ) k! t) U  O, U  E& i
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
7 w; p1 J/ E$ z+ i" \; c* o" ~+ X} ! X7 O5 j& p) q! e0 `6 e
}
' M* S0 b# P/ M) J" [- m7 A} - }. \; C, e: A  T! \) G6 f! J% g
</script>
& E% ~1 F% c8 ^1 X" r+ M1 Y$ Q0 G$ A
<form name="combo_box">+ Z8 N3 k0 o" B/ m% q
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
9 Y$ Z$ a& C3 w- e  Y  <tr height="24">
; S( ^# x+ ~# v# X5 j    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>+ `+ P2 l: c( x
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>" F0 u  s+ l& C- e  j
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
& `, h$ L  c0 C0 u, n, d: z    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
7 m* L( L. p7 H1 K% I6 o2 T  </tr>
8 E- ^6 |: U" u$ d; h9 r  <tr>
8 I! H( l$ Y7 O5 T    <td>0 z2 b; h- I  \' M
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
$ v7 K! U0 P5 u  <option value="0">请选择部门 ---></option>$ U$ f' t- F: H, e1 _9 y- o
<%
  R, Y1 Z% R1 y7 K    string sqld="select * from tdept";
3 W( V# k; i9 ~5 gstmt=conn.createstatement();' ]- b# a  ^- A8 _/ Z# m- v) v
rs=stmt.executequery(sqld);* h) P/ w/ G# }" K, L0 A
while(rs.next())9 R/ @: U. K; a
{
( m. k3 a4 o. I1 n1 j7 r- @! [  x  K%>0 w; ^6 M3 T$ B- j
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
! b( t2 e4 W/ N/ M" H5 i<%
( T$ [! R6 t0 v; Z}
0 U3 w5 Q9 \* K& R3 W* ^3 b%>
8 `) J8 x$ O( i" b* \  </select>
  c: x" B! N8 S</td>3 x7 n2 s* m, z$ R: t
    <td>
& \" X# K( e* c& ]- m# d& _  <select multiple id=city style="width:150;height:200" class="bgc">
1 ?% v6 {6 F) |: Z1 r3 a+ l  </select>, z) L$ }* z6 ~: Q( m/ J
</td>
% @; z6 f' ]+ B! f/ w) G6 I, V    <td nowrap align="center" class="bgc">
9 `. V- v, p% H1 ?9 Q/ z  <input type="button"  value="<<" class="buttons">
3 ~* V4 I- k( E8 n' ^  <input type="button"  value=">>" class="buttons">- i+ }5 b0 b& u! T# \$ n2 L5 a
</td>
1 l. o/ n) u- Z% D    <td>4 f( p( v- e  G, f2 a( K8 n. @
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">- o) @% }& K$ o. W/ r5 Q  X! j6 d
  </select>
  w! }! W2 t8 o' ]/ A6 C</td>
- Z) s" b+ k- U" r: l' Y$ I  </tr>( ]3 R" F3 ~1 Q* Q# `& y
    <tr class="bgc">
- `9 ~' u& N" ~/ L    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
$ r. [6 M+ \' \# D- m2 K, [/ m7 `  </tr>
' v; o# Z$ H/ K& M% {' S/ f</table>  k7 I" _# K9 @" [# w/ W' w4 u9 z
</form>0 J/ f! B9 y$ V; K& E
<script language="javascript">
6 K  L. W/ K+ b0 P$ o! B" T" d, V//人名移动
3 Q- s# ^" s% r  L& a- \# ~+ Vfunction move(fbox, tbox) {9 m5 M0 N/ e5 O8 ~4 _$ u; R
var arrfbox = new array();
$ D% [3 L  S$ X% @! ~0 _var arrtbox = new array();
) X9 Y2 M" {& X- Y% Y2 N: rvar arrlookup = new array();; a" B/ c7 v! K% o  N  \: {
var i;
$ i: x. a4 m# d0 R& Dfor (i = 0; i < tbox.options.length; i++) {: K8 W3 U) i  K+ Z
arrlookup[tbox.options.text] = tbox.options.value;7 Q$ H& R( I( |# [, {4 `
arrtbox = tbox.options.text;
( i+ M/ @+ X5 K, [+ H! k; N}
4 @* M1 A/ j$ y$ y( q# @# Zvar flength = 0;
- f7 \7 t2 b; r: Ivar tlength = arrtbox.length;! z* `3 O+ d7 v3 R( D
for(i = 0; i < fbox.options.length; i++) {+ L5 ^. O4 k  K8 w! k
arrlookup[fbox.options.text] = fbox.options.value;( _- |3 `6 p) w
if (fbox.options.selected && fbox.options.value != "") {+ q; p3 w, I2 v: r4 u
arrtbox[tlength] = fbox.options.text;
$ D+ }/ }" v, W3 |tlength++;
* U0 X) y5 r! v) C) J}* S. w) [; _# e7 n  C* A( u' k+ E
else {2 x7 ^0 M' I* y1 [
arrfbox[flength] = fbox.options.text;
1 t! s( u$ A0 Q4 B& e; R9 j8 fflength++;
* X2 ]7 ?3 ]4 t- X& H   }
! f9 h5 m* c/ {( o( i  Y7 s/ B! r}& p" M: y( o6 K9 \3 p1 N* L" z
arrfbox.sort();; F7 R& C5 E7 r: X' m
arrtbox.sort();
* q( R( x3 H1 a4 B3 J8 o4 @0 p, s' ^$ y/ W; Z! h
fbox.length = 0;
7 f. t* X8 {; Otbox.length = 0;( n* E, o+ z# F/ c' d) ?
var c;% Z! B; y+ R7 a: R
for(c = 0; c < arrfbox.length; c++) {9 u; h  A) w+ c0 _: i
var no = new option();
( R' j* I2 ^( Z1 N5 X' Mno.value = arrlookup[arrfbox[c]];  B* t2 Q" e0 P& g! m
no.text = arrfbox[c];
0 w" m% z4 S, |' ~, C" |fbox[c] = no;% J7 A1 _& b0 O. t: t+ R5 z
}
# v( d% z9 H% a# B" F1 z1 Ffor(c = 0; c < arrtbox.length; c++) {
9 S/ W, |5 W6 ?, C8 O" Pvar no = new option();
' l) ?6 H& J% A6 _7 m6 G1 sno.value = arrlookup[arrtbox[c]];8 Q8 N* A& d* |, P2 d+ O- @6 g& U
no.text = arrtbox[c];4 L, [: [0 l" ^# u5 X& f
tbox[c] = no;) S  h8 d0 C3 {1 ^2 \8 Z" L
   }
6 ]% d$ w# o5 A$ u}: f2 {9 B1 E6 e3 L0 H
</script>
6 Z3 d5 c6 U4 V  l$ D, O5 e</body>7 ^% d* z0 E; F" p( ?





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