Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
9 z8 c3 f7 o; g: e% m         c pageencoding="gb2312"
$ j/ I1 K" @7 J- v( w/ J$ t' z%>
+ t# q4 i+ p' c8 X; U: d0 {<style>) Z8 `( T9 e4 o' ^+ P( d" |2 a: p
.f9{ font-size:9pt; }
! m$ N5 S4 V! l$ F  u.bgc{ background-color:#aecaf9; color: #0033ff }4 d$ @7 {# g: m: H- G
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;% E5 L! @+ B, N$ Q) E
  border-bottom: solid 1px #4e7dc1;
% d) s4 O* |. q) n  border-left: solid 1px #aecaf9;$ b! s  W# o/ x/ L
  border-right: solid 1px #5679bd;# f( G8 b( z( ]2 R- V
  padding:1px;
* U; X% z0 Z6 p7 d6 _. }# E  margin:0px;}+ f% c( w2 i$ G% V" v: I
</style>
: A. g2 I, e6 n7 q3 t/ w, v<script language="javascript">5 j) S! o6 [* w2 M
<!--
/ j/ {9 f! n" q) Y! Wfunction rv()! z2 b  @5 a6 M! m3 A2 E! M
{
( n4 x0 E9 `! Z) Q$ w7 G4 b  var val="";
" F" F3 [9 {8 Z! O6 x  for(i=0;i<combo_box.list2.length;i++){. n2 t% J/ u2 ~9 t, ~" ^$ C) ~
   val+=","+combo_box.list2.value;- N7 M" \7 D0 u: _7 k4 T
  }
. V$ `: G2 e& }. V  if(val.charat(0)==","){( y. C0 I8 }' W5 F! E# b" @$ K
   val=val.substr(1,val.length);6 [  ~+ E5 e" e/ r
  }
( @) B& z+ c2 \' J  opener.form1.frecname.value=val;6 [8 s/ I5 ]7 D$ `2 M5 g$ Q( Z
  self.close();
# R; W1 i' k5 t4 Q! P}3 L  I& d# c4 T
//-->. ~+ I0 u! C/ d* o) F: G& s
</script>8 U6 _1 V0 |, E5 {& p
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
, I9 Z  o4 i% a" N# G<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
" Y( F/ q: Q& n<%% w- M: Z1 j, T# F9 p" Y
  cdatasource ds=new cdatasource();  //数据联结bean实例
/ r+ H' L" K& d% Q' j  java.sql.connection conn=ds.getconnection();
/ F. c" ~8 p4 E0 I% p: Z  java.sql.statement stmt=null;9 `+ W& l; I/ z
  java.sql.resultset rs=null;
5 v/ `- D) S0 j0 K5 `. m  cdatacheck dc=new cdatacheck();' K) U* i" j( K
%>+ W8 J& ]  K; l! v% ?6 m
<%
. ~" G7 I5 r/ B5 i: A" Istring 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 m4 f4 |' M1 l% ]5 d: c, T- {stmt=conn.createstatement();
7 k- F" c' h' I. T& R8 D5 I& {- s4 ors=stmt.executequery(sqlu);
6 ?  I2 p+ K0 n8 s; J9 M! X$ C%>
3 h! N: ]: `; i<script language='javascript'>6 e( m7 I" w# r$ C/ k/ v: \
arr = new array();
& R* Z0 z$ n; o9 q  J0 t<%  int temp=0;
1 M7 V& \8 I; a& ?7 _/ }- Jwhile(rs.next())
% @. M. N: `$ o' t7 j4 P{: x9 w& A! E3 J
%>
: C7 K6 x* s5 @; I/ Y1 |- |6 ~arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
! T# L: A0 v# ?/ I<%
$ |: Y" D/ Z# F$ c! a9 Gtemp = temp + 1;& H- G+ r: G9 f6 ]  z
}
* R! M4 l" q" y) ~%># E6 H4 x' u9 y' @: E3 U# p) K2 O
temp=<%=temp%>;
1 l& r3 a9 v% ~8 `. F. z) |function changelocation(id){ & P9 {* M. o9 l2 E  W- B
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
, M/ `# I% [: W1 L% pvar i = 0;
& d7 x4 z: X. R4 ], U% Jdocument.combo_box.city.options[0]=new option('-------','');
2 ]! W( f  `, f8 r# |4 |* s+ Tfor(i=0;i<temp;i++){
* f/ o/ @7 W0 m4 f8 cif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 8 b5 S' W9 Z. H) y( U
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);   l$ w* B# n& z+ i
} 5 `. w+ W# \  q6 N( ^
} 5 g! W6 [* K% s5 _
}
! g; E/ q, D# [: a</script>
( q  n- X' G9 c. x
/ B5 H0 Q2 s* @- ]/ o9 u<form name="combo_box">- n6 l: A" ~2 m- p0 a7 J  t
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">' D( y( t* r; k7 s: t8 X- Y# {
  <tr height="24">) L: A/ @2 R# n6 e& O( T
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
, A7 T& I0 ~+ C- g+ j) T& Y: l    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>  N3 u2 V! D. H5 U* I/ C" D1 U
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>7 A7 H0 s* F+ f( Q; ]
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
7 c0 b6 W2 f! P9 W4 k$ o  </tr>
& ^# A2 ~" V+ {, J( b  <tr> ( r& }- g- E. o0 r9 [
    <td>
. K4 Z- J& I) J$ b. R& i$ y+ H  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
0 m* D' \) K% L$ w! x1 Z8 ~  <option value="0">请选择部门 ---></option>
/ s0 D& C% ^  t) {! U<%. v3 f( s/ s2 T1 V5 O* l5 R
    string sqld="select * from tdept";
! r: Z7 M; C; }# N3 [% bstmt=conn.createstatement();
9 g: a* F2 X' R& ]. vrs=stmt.executequery(sqld);4 r7 M! h) m! a
while(rs.next())9 y, e& N; D0 T2 R
{
. U) ^) F! C$ L! l5 J( g. E' |' L& S%>
* X+ Y4 u7 Y% T: W  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
2 m4 U4 ]5 u0 @5 u2 l+ g<%: R- R2 g( L# n& w" \+ A, G  j
}* k; W/ U1 E6 \: y$ R5 Q" \
%>
" D$ i+ Z" c; B1 S& Z9 @  </select>
6 ]9 b  b, ~6 Z</td>
4 l) D% `6 {) F" L- n    <td>. _* ^( V* m. t+ l7 s
  <select multiple id=city style="width:150;height:200" class="bgc">3 P: `- C! Q' p+ }
  </select>
9 j9 X! }8 T5 i</td>0 x% J: o0 `- {# [/ c% T
    <td nowrap align="center" class="bgc">
2 a: s/ M$ G2 n# `5 z) o  <input type="button"  value="<<" class="buttons">
) \& q0 F* D2 B0 q3 d# {8 I/ H  <input type="button"  value=">>" class="buttons">& }8 w& I. y$ K
</td>9 G" H( e7 P- z& |  Q9 n  ]
    <td>
$ T8 j0 r# `6 z9 m4 e# I/ K9 |  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">9 j1 B) m; C3 i' U. P  j+ `7 e, H
  </select>0 s2 `" H; h. t5 g/ ~  h
</td>
% `# c3 i5 R5 a% o: V2 t3 U6 s6 o  </tr>
2 w& ]& Q# A8 ]- r    <tr class="bgc"> 9 o' Y0 p2 X1 N2 n
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
+ F5 V  e# K5 n7 F5 n: V0 Q  </tr>) M/ u& x. b  k0 H
</table>
$ u0 N1 U/ }2 a* u  a- j</form>
* E" y) U0 ^2 f<script language="javascript">
/ \' L/ ^# @# f  ]" E* g3 i4 ?0 w9 n//人名移动" f8 Y; Z4 `6 r2 |9 b
function move(fbox, tbox) {8 I2 g9 |" H4 N4 M  j7 t  s
var arrfbox = new array();! G& R/ j; Q& k' E) i
var arrtbox = new array();! k3 v; b( I6 x* u, \* i
var arrlookup = new array();9 u5 W1 _9 n/ B- j! ?9 z. A8 M: X- u+ D
var i;
% N# _; q. v& x% r1 T2 d- Lfor (i = 0; i < tbox.options.length; i++) {
9 _- J0 T; ]- I7 T/ S# K0 Larrlookup[tbox.options.text] = tbox.options.value;
1 d6 j7 ~5 G2 u& F& Q2 harrtbox = tbox.options.text;' Y, W2 A+ I5 @/ B% F# J
}
! V: T5 n! N3 E6 w& ^1 H! Cvar flength = 0;$ N3 d. a3 T# J  X; S% o
var tlength = arrtbox.length;
$ k: G: X/ |+ [for(i = 0; i < fbox.options.length; i++) {
+ q7 K" V1 l, F( ]4 V/ [4 e! }6 Earrlookup[fbox.options.text] = fbox.options.value;6 A0 P' Y$ O% R3 d
if (fbox.options.selected && fbox.options.value != "") {! O+ E: C, _+ i. d0 `# R
arrtbox[tlength] = fbox.options.text;
8 m5 U$ ?7 G( O! ]tlength++;3 |4 H2 Q8 [) ?! e( p, I/ c
}
$ o/ }# Y0 @! [4 \3 xelse {  {" t% V" R# |  ?+ g2 |
arrfbox[flength] = fbox.options.text;3 n* _* x. p. {  K* P
flength++;
4 T: n, s$ Z: A  e5 s& j; N   }
2 {9 y' n3 ?& ?9 V' F4 i: ^}
/ p1 O; x! l) S; zarrfbox.sort();
* l& ^; Y: z. Q: k" U0 j! w( earrtbox.sort();
7 h( a- Q8 z0 |( Q
. y( J% D! o5 T. rfbox.length = 0;4 f$ d, ~3 a7 E2 J" z
tbox.length = 0;+ X0 w# g4 u$ e* F  s9 C, _  j9 S( ]: b- B
var c;) g" D! R* j, E/ A4 `; R8 Q
for(c = 0; c < arrfbox.length; c++) {
/ d6 m* Z1 y$ c9 ~+ N* B7 r; V" Y" S" hvar no = new option();7 t5 `- v1 m6 w+ x. {
no.value = arrlookup[arrfbox[c]];2 C3 t: ^# B; N/ O
no.text = arrfbox[c];
! P9 r% _, _% c5 v# K2 P5 d$ gfbox[c] = no;2 b+ Z: ?3 ~9 u
}, }( S' e: ^9 q  x* v
for(c = 0; c < arrtbox.length; c++) {% C' x% T! W: x8 n8 A4 Y9 }7 r+ I
var no = new option();' u( C# I  ?+ M
no.value = arrlookup[arrtbox[c]];
& ?: B+ {. y3 q6 g' E* _no.text = arrtbox[c];5 R9 [1 J7 d+ C2 L- @
tbox[c] = no;% R/ s4 g" K5 A, L- R
   }: G3 a' y2 f+ ~, t5 {! X+ C
}2 m6 ]9 T: n" |3 y) u
</script>
+ S! s. \( B0 S) z% N</body>  M9 \9 \8 `  d: O





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