Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
1 g2 G+ Y$ J2 ^/ w3 o( F% l         c pageencoding="gb2312"# i9 i5 B) p9 g, e' P& U7 @, g
%>
+ o% I" r& a9 L: h  R<style>* s' y) Z2 i# g4 G% L$ h( z
.f9{ font-size:9pt; }
( ^5 w& D8 ], ]# ?.bgc{ background-color:#aecaf9; color: #0033ff }
/ v1 O2 {2 y: R. A6 S7 w.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;; A) C. d4 a# {. ~0 r" N! Z- I
  border-bottom: solid 1px #4e7dc1;) u6 E! q+ c( n  A0 z
  border-left: solid 1px #aecaf9;
/ f  _. Z4 J) g4 w; B- ^0 |  border-right: solid 1px #5679bd;
6 X! z0 C% s5 w6 q2 S2 d  padding:1px;: E& B/ r5 A+ M2 v# n5 @% N
  margin:0px;}
5 u3 l5 Y" v! Z9 m5 N$ g</style>3 W! f- U7 j* _* t- ]7 {+ {/ G1 J
<script language="javascript">
3 ]" Q1 `& s6 }/ N1 {<!--! p: J4 J% J2 `
function rv()
5 t5 v' |1 D5 P2 P7 _{# h$ o, L# l3 C7 j
  var val="";
* S$ M/ a& _. h7 C$ S. d  for(i=0;i<combo_box.list2.length;i++){0 p7 F' h3 A2 l2 x
   val+=","+combo_box.list2.value;
, n( q: ]. Z9 B3 c4 b$ y) `9 r  }
3 A5 R# f9 ~- {& S2 x2 E4 k$ p  if(val.charat(0)==","){
6 ^# u. H1 D' I   val=val.substr(1,val.length);
& q+ l3 s" S9 d" H4 X* A  F  }
5 ?+ W( B2 ^9 q/ }2 w' a, v* m  opener.form1.frecname.value=val;! U. a6 S) h  Z" M0 S  z" N4 H& S
  self.close();
) F# p! L+ O; S8 f+ |/ u; Z}
8 ^8 Z# f8 Y- J5 y; N4 M# @//-->
& M- h2 l5 @, |</script>4 V8 B" J" q! I- w2 C# G' i
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
0 P1 ^" }" c/ ]) |3 X$ q* V5 N<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
; Z( C$ E7 h0 s2 U6 k<%7 \& A! M; Q* ^- u3 T
  cdatasource ds=new cdatasource();  //数据联结bean实例( N+ v1 c6 g! d  s! k- }! l
  java.sql.connection conn=ds.getconnection();3 S  Q7 ?# j* E4 ]. i! o
  java.sql.statement stmt=null;+ O- K0 j# y! e/ ^* {* Q
  java.sql.resultset rs=null;
" i4 s  P. i$ o. W  cdatacheck dc=new cdatacheck();
! p  a/ A0 o2 }- X3 ^. S%>
4 @8 {0 i; T. l2 G% J" t- \<%) F# b: g7 q/ c' \
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";
5 q+ g% A1 L$ B- M: W2 J. F% Istmt=conn.createstatement();
  Y; h, f- |# x3 X4 s4 o) ]rs=stmt.executequery(sqlu);: r8 Z, y/ H& n4 l/ J
%>9 b* E0 G# c' S' ]; p5 z
<script language='javascript'>' d' z9 P# x  [6 F) U3 S1 g. O
arr = new array();( g! D8 r# V; a- x$ v
<%  int temp=0;! K# R- F- f, L6 P2 M% f2 g5 K
while(rs.next())" p" B8 Q, Q: f. B$ H, U
{
7 Y& M. r6 }, N9 i2 o%>3 p; j; ^' R4 f2 u
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");5 p6 ]$ R( C2 Q5 A4 d* j
<%" |2 ~, F( z) I' g$ V8 W0 E! d' T9 \
temp = temp + 1;
4 S6 W. m4 l3 s  E% k; N( _}
: f" w4 K! ?! B. }%>3 H' R+ c" [9 {- E) ]6 x
temp=<%=temp%>;
  c8 {  n% E2 w9 `' F& {function changelocation(id){
1 I2 J" V( \, \document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 * g, |  I/ Y: g; J- S2 \9 v/ ]
var i = 0; ; e7 ?) c' F0 q2 R: a: _; i
document.combo_box.city.options[0]=new option('-------','');
  q3 t5 U7 ]0 C: {1 }; @# y* wfor(i=0;i<temp;i++){
: ?, d3 {# `, L1 {if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] : J' E# j2 k, X
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
4 {. a/ C+ |; K; W; ^} 5 T/ U( G/ v% j" E, v3 t# j
}
. E* G6 b4 S' u, n" T: d} - z4 v* B  i% n" l
</script>
; \9 ^1 L0 D- n7 y/ V; K8 U' f$ k2 g( d- c, I
<form name="combo_box">3 p4 v1 i2 D5 |
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">* F" y! `" d* }0 @
  <tr height="24">' B0 d& J' n+ t# ]! e6 t% a
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
! i8 c# L; Y, A! [$ t" |    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>' ~4 `% E* l3 j  l* Q
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
3 n7 r- M" i9 `# g' e! B! L. r) f5 }    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
* y  R  z8 ]8 f5 T. R/ F  </tr>  X6 s; Q  i. H2 i
  <tr> 9 A9 q! }7 _$ k* }+ m# v8 N
    <td>
6 `0 P2 u3 w; ^6 R5 ^0 Q; a6 Z$ C  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">" R+ f3 c" C2 Z" c6 C# B
  <option value="0">请选择部门 ---></option>
& k, E6 [7 q7 {% {6 d<%
' U' x+ \2 k* o: I0 \    string sqld="select * from tdept";
! b2 ?! m* D+ d  m, q* o. B2 b- g4 @stmt=conn.createstatement();
" Y) H# ?$ O5 Q; M: D. h% l# Jrs=stmt.executequery(sqld);" G5 D9 B# g4 [8 k) @$ Q4 z
while(rs.next())6 v# `  g: g& ]  \1 N
{6 a: K. s" L& `# M; B' D
%>( X7 B* ?  @7 k$ ?" V5 z7 c2 i
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>- T0 i( W- o: h
<%
" q7 B0 v1 K( Y: b}! b$ \8 g6 \4 d/ {" p) i" e6 w1 V0 }
%>
1 G. @8 J  Y  ~  </select>9 `5 T9 N. d3 i5 K! M9 Z- L# O  X$ v
</td>
2 D) v% ~6 \0 {' W5 q    <td>
2 z2 h- D8 v5 ?# U3 N$ l  r& U  <select multiple id=city style="width:150;height:200" class="bgc">5 S! p& U4 |, l1 d- ^, a$ ~
  </select>
5 }. V6 |% ~+ O$ A4 `. f" B</td>
+ n9 I4 ~% T7 I5 [; J3 n, c: G' T    <td nowrap align="center" class="bgc">6 n: k; \9 q+ ^- t$ N
  <input type="button"  value="<<" class="buttons">0 @1 |: s, G4 w( U# o4 c
  <input type="button"  value=">>" class="buttons">
- x8 B( f) M: _! A: Y+ I# p! z4 Z</td>
" h* |# O3 E2 R+ f, z    <td>
% A+ q( f" {1 x7 T& w  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
' m6 G7 \' ^4 Z/ _6 t  </select>  x- A+ o0 ~% L; O' }+ X
</td>2 j$ s/ z- l' ]2 g6 L" q( l0 K
  </tr>- A5 V, C3 I! v5 T5 E# i
    <tr class="bgc"> 3 m, V- L: Y# W$ E* y# }6 N7 A
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
* Q- u) I# s* m* r' `+ t6 J  </tr>
7 a' J, l- S& o2 T6 `</table>7 I( `9 ]0 [- F: ^, Q
</form>
, ?' @3 j) ~" v' p5 L: R<script language="javascript">$ O9 W  I0 l9 _3 S$ }+ p. A" w
//人名移动
" M0 K2 \% B9 c$ {" w0 N( Z; ]function move(fbox, tbox) {
7 R, @4 B; E& ~' k2 Zvar arrfbox = new array();0 [2 i6 Z% {, f5 T/ N. j
var arrtbox = new array();
+ t0 U8 k0 O- r9 `2 ^0 Tvar arrlookup = new array();1 A- e% I* r# d; y  m3 b3 i' b8 b
var i;
, X8 X, I# O0 r8 ~for (i = 0; i < tbox.options.length; i++) {
! T" W  ]; E# N- U' q0 Aarrlookup[tbox.options.text] = tbox.options.value;
8 ]1 Q' L0 F4 b9 @& [arrtbox = tbox.options.text;
. J, O, I4 V( ^) w}0 e( ~& [) S& U, }
var flength = 0;  Y/ y$ }2 ^/ \/ N6 M
var tlength = arrtbox.length;
! Y) [; @  K6 q$ y5 q3 P0 |1 Yfor(i = 0; i < fbox.options.length; i++) {
9 R" I- }' m) g# ~8 b0 z: _6 Y  I2 @arrlookup[fbox.options.text] = fbox.options.value;
! M! [! F- n# h& X3 o. L9 Pif (fbox.options.selected && fbox.options.value != "") {
$ o$ ?: [1 r$ l1 u' Harrtbox[tlength] = fbox.options.text;
: ?: u" e$ O- L% J6 L  stlength++;
+ ~: T: y; B/ x& w" U}0 O5 k3 B7 c; ?6 q+ w5 C3 V8 k8 L
else {
# R, c# F( I' ^  X( u$ z3 G* d4 }arrfbox[flength] = fbox.options.text;. d; N, o6 n3 C( ~+ i2 i
flength++;
7 p' u6 t3 r5 F  y8 ?   }. o% o  r8 g  Q& J3 `, m
}9 ~7 t5 T$ N: r: S1 Q
arrfbox.sort();. X1 @( ~5 }6 n# r# m. g% u& d/ r
arrtbox.sort();
% w! T2 J7 Y+ J9 ~# _5 Z$ j
$ c; P7 L- n- s7 R' {fbox.length = 0;
% K0 l! S. i) d# U( htbox.length = 0;# R7 w' L  C9 K0 q: a$ v% h3 K' K
var c;
; N6 b1 e8 G+ ifor(c = 0; c < arrfbox.length; c++) {3 A. W0 P9 u* D6 |8 G8 b
var no = new option();
9 D0 F0 }5 K( _) N5 [& pno.value = arrlookup[arrfbox[c]];
$ V+ Z; ?! R. c; B9 Zno.text = arrfbox[c];
2 ]' a8 A/ n' W2 N1 [# g# hfbox[c] = no;' L- x) Q9 a" F, v& X& C- U
}2 b! s6 e6 T$ S7 K1 b* t& ]
for(c = 0; c < arrtbox.length; c++) {
$ F, m2 F' F9 p1 `4 y0 `; P8 Evar no = new option();, ^8 j& U% N; l6 f
no.value = arrlookup[arrtbox[c]];
* b' t" S  u8 k! n2 {no.text = arrtbox[c];
. [1 r4 Y& B. y& {* F& R. ]# m, v( Ptbox[c] = no;
, l: x/ }; m/ S2 T   }
# q+ u3 N# D0 i* b  P" a( U4 u1 |}) a7 @$ O6 s' d7 A  {  R9 B7 [
</script>
1 u- H& D6 G# }</body>
1 A% `4 I% Y( s7 c





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