Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"6 N) y5 b" ^4 `# u
         c pageencoding="gb2312"7 A) f3 K& q( [4 C; R
%>) q! t: c/ W2 e
<style>0 z3 i& `1 x9 n$ @, {2 i
.f9{ font-size:9pt; }
4 r* A  Y8 l+ ?4 z7 z" j& ^/ S.bgc{ background-color:#aecaf9; color: #0033ff }$ Y3 ]/ ]. a$ D- s5 s  Q
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 O/ h; F, ?* @$ B% o  border-bottom: solid 1px #4e7dc1;  c  y# T5 j, m% c- h9 |$ f6 l" W
  border-left: solid 1px #aecaf9;
/ H5 J9 f& W& F. W4 e" _* c- T* ]  border-right: solid 1px #5679bd;% `9 l$ b. u9 V; I7 I7 {* Z6 O
  padding:1px;: f7 Q( A" g' Y5 Z) N
  margin:0px;}, _+ k. D3 X3 ^9 v: Z
</style>
0 J; Y* m' {0 N0 ~' d<script language="javascript">
$ c, H7 l3 K) H# ?6 f8 ~<!--' N1 W" i4 S" r6 n' S2 k  ^
function rv()
9 D/ O- h2 |. I6 Z" a$ h{
# T1 u: J5 h9 {8 I7 n  var val="";+ \3 t, P9 m" i" W  Q
  for(i=0;i<combo_box.list2.length;i++){
/ Z4 J* {# F" g8 d   val+=","+combo_box.list2.value;
& F5 @9 z' K/ M7 t+ m  }
( I  D3 B5 d1 e: G, x' B0 L  v  if(val.charat(0)==","){" s$ q0 r5 s. c& C1 v- M
   val=val.substr(1,val.length);
: f. y3 l* v4 d6 g8 d6 I3 T( K  }. [, U6 Y5 Y5 Y: [! j  F
  opener.form1.frecname.value=val;
9 ^1 D$ l- p+ z+ Y0 {1 C1 Y5 Q, {  self.close();3 T9 B/ T7 c7 Y' M8 ~) i" O
}
) Z! Q0 T6 u( P//-->
- Z, O* d6 p- s4 v  g5 O, O9 z</script>, T' }' k% l5 B/ ?
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  y6 U; E6 z0 [: u. d2 u. n& k<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
& P( h6 H- M( j2 I4 X) C5 O7 c( z0 P7 ?<%
: ]( Z4 I+ D. X' u  i; Y4 J$ v+ j% L  cdatasource ds=new cdatasource();  //数据联结bean实例( Z  }. I& Q  @' f1 Y, e; W! L; c
  java.sql.connection conn=ds.getconnection();
% M7 R5 F, b0 N+ g& n" g  java.sql.statement stmt=null;
; f, t. m, W) M* w0 T. J+ j7 D3 `  java.sql.resultset rs=null;
5 J) h( n0 Q( ]7 p& K6 s0 Q" O  cdatacheck dc=new cdatacheck();* n! D9 _; |% m
%>* O, W; `" y4 M$ z
<%
; [& U. L" k* p5 ~8 ostring 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";
$ U( B, x$ K2 w6 N  fstmt=conn.createstatement();9 e  g1 `/ b! s% z: m0 t
rs=stmt.executequery(sqlu);
( x2 k( F7 E( D, s% H2 p0 P%>; B. U4 i4 a2 g# L7 i5 F8 ]1 g
<script language='javascript'>
9 C. b7 U9 N' P# q& f0 harr = new array();4 A2 v2 g! V- p8 L* ]% |
<%  int temp=0;' B! @; W; p$ z9 H6 p5 X  W  [
while(rs.next())# Z! n" r, `7 j5 D
{( M+ ?( v( Q. z1 ~) ]9 e% ?8 o+ t
%>+ f8 S2 o! D, o
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");; x2 b- O2 S) l. N
<%! d! N- E& F0 \) L3 d
temp = temp + 1;, N; Z( z# h* O3 }1 D
}& i6 C# I; u2 F6 H+ y' J, o6 s7 `
%>
4 z4 V4 ~  [: ?) Qtemp=<%=temp%>;
6 y, K5 r. `( b) H0 ]4 Vfunction changelocation(id){ 1 o1 y7 q+ Y* c' d1 I: U2 f, d
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 " L* q( b# E. {) t& B0 n' F) m
var i = 0;
; q3 j. b$ d  r% ^document.combo_box.city.options[0]=new option('-------','');
5 }% m/ H& L- M% N$ v8 S8 Ffor(i=0;i<temp;i++){
  z' J& I/ `) e0 l9 Pif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 3 T( V5 V' _4 }
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
0 y3 K1 x0 X/ u' m% I2 H+ B}
* ^& d6 G! y$ ~}
% p: h/ s' G" {& K: j9 a' _' `} ! z$ e! G' \' v
</script>; Y. B: k& Z  K& @) M

1 c4 n6 T+ \  w7 ]$ Y: f5 H6 `" r<form name="combo_box">
) h8 E5 u! E6 ~1 n<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
* Q$ C8 F5 I# V4 B) D  <tr height="24">$ f, O9 i" t; g/ o( r9 U
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
5 h) u0 w" ^: e6 I# C8 K    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>3 r( H1 {# _$ O4 |& k/ Y
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
( {0 B, v9 ~" c2 }  w    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
  n$ d7 D7 u; X, W* n# s' d  </tr>9 K6 G! D8 l2 a
  <tr>
/ w# e( L$ q* h2 V7 Z% k    <td>
) W3 h/ K7 _6 @  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
. u6 B" T4 e3 ^  }; }7 H  <option value="0">请选择部门 ---></option>
* p7 V1 @$ Z' T5 c<%
6 k5 ~, ^4 N" c) l6 c    string sqld="select * from tdept";! b- \( }3 V  B! R/ v0 o
stmt=conn.createstatement();
, Y+ s/ F0 W0 A8 E2 {rs=stmt.executequery(sqld);
% Q) p( a+ s9 s. ewhile(rs.next())
* c: N9 Y: N/ H: B; t/ f{
! N+ {7 v. |$ @% }6 h%>
6 r; ^* a; I& Z5 R+ B9 b" t+ G- F1 Y' e  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
7 \% @. {3 a9 W  e$ J<%
: s$ S, S3 C5 R6 k$ e" |}8 M4 L; I7 S/ ]+ \8 L4 ~
%> " ~2 n. ~6 |4 f+ y: X' q
  </select>4 y' a; Q  t# z$ Z" Y' U  X; g
</td>
! }5 G( f$ E1 ?- C+ ?3 B    <td>( Q' O6 i2 w* \
  <select multiple id=city style="width:150;height:200" class="bgc">! q# i- F+ |. v9 ]; E% f8 U
  </select>
& y9 }4 J! B4 [6 }% B</td>
# h: t! l" V( V  f3 M    <td nowrap align="center" class="bgc">
* u, T$ ?( j. S  <input type="button"  value="<<" class="buttons">
5 {+ k9 c2 a, ~2 n; E2 r5 I  <input type="button"  value=">>" class="buttons">
# m' A5 d, x/ O2 M' [- b</td>$ A0 b( E# i, k! N  V- V0 U
    <td>- W4 W4 q5 l: ]+ `
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">0 a8 y/ K. v6 W- ]8 d; I8 Y8 A
  </select>7 {/ s& Z2 J3 V2 X+ T1 X" O) U4 Y
</td>% ]) w6 `+ @& C, s  o/ a; _2 ?
  </tr>) o$ }9 M+ h3 }' B% P8 f6 J0 r" ^9 A! @) \# w
    <tr class="bgc">
, h5 N" |) `) S8 O! n    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>8 @* k# s# _5 u+ O/ A) o' D+ P
  </tr>
( M4 C& r7 W6 E0 a% W/ p</table>+ ]8 ^0 ^! j6 p# C, I
</form>! z$ W- T9 Z4 N  z, c2 p- M( A
<script language="javascript">
! h% C6 W1 C& T4 I//人名移动
2 q% W& Y, a0 Bfunction move(fbox, tbox) {
- {, U6 w* L6 d! B6 Svar arrfbox = new array();1 Y+ k" M$ ?2 s
var arrtbox = new array();" `# `- k3 u4 U) I$ J; P( f3 |9 O: w
var arrlookup = new array();; R8 E9 h* @* B. v/ w- N; r3 w4 l) f
var i;8 h& n+ I1 ]3 ^+ i5 ^; H3 E
for (i = 0; i < tbox.options.length; i++) {
/ a8 ]2 b* D4 R+ v0 Q$ n: G# varrlookup[tbox.options.text] = tbox.options.value;' x% ~6 F# P! ~1 s/ G$ Z' J8 x. }# ]- p
arrtbox = tbox.options.text;
$ K. o9 g% q6 ?( h}
" o3 [: [7 _: {" s# d  ^var flength = 0;1 z. m0 c- k1 ]# E# y5 {% N
var tlength = arrtbox.length;
, h& z8 m7 _' _  ~for(i = 0; i < fbox.options.length; i++) {
4 ~9 \( h# Q9 ]- y  P) D/ A& qarrlookup[fbox.options.text] = fbox.options.value;; Q8 l# j2 c# f0 q' z; w$ b
if (fbox.options.selected && fbox.options.value != "") {
: H& W: R" g" D* ]" v4 narrtbox[tlength] = fbox.options.text;% \. n$ J7 I. `9 D6 @, |; K6 n
tlength++;
7 y9 N8 J" W+ }, |1 d8 l}9 y1 l9 H: r0 `; B8 X0 L- W
else {8 E9 G4 a4 o5 |7 k' E
arrfbox[flength] = fbox.options.text;9 A) f/ u5 ?+ @
flength++;
" R, U4 u$ q: H6 |" \   }: `0 L: C6 P1 G! L% F. `
}
* E. F; l* {- b( l. u+ R+ Rarrfbox.sort();
; m8 i& C3 S; o. @$ k6 aarrtbox.sort();$ w% S  _5 f4 V) E

3 ~: j3 J6 Q$ x, k$ Dfbox.length = 0;
) T1 ^% z4 t7 r$ v' ^9 Ttbox.length = 0;! C, \7 v% N4 _; f2 C+ m# [
var c;
( |+ h3 K1 X9 I& B) ofor(c = 0; c < arrfbox.length; c++) {5 ]2 [" I  E6 `& U; e
var no = new option();; C* x4 G+ e4 N9 `1 c
no.value = arrlookup[arrfbox[c]];
) B9 E* y$ p" x& T& Z# {' \! e0 x& Ono.text = arrfbox[c];# X" E, W5 M' G6 T8 G- C/ N
fbox[c] = no;& W/ e! X+ F3 V
}
7 e5 @; b5 [2 u. a; Ufor(c = 0; c < arrtbox.length; c++) {4 Z; c' j& ]' y
var no = new option();
( s. k) N0 e: q9 M$ `6 W9 Vno.value = arrlookup[arrtbox[c]];0 o! f, q3 A0 m* Q1 v0 F, }
no.text = arrtbox[c];9 b4 r7 Y" c7 V2 b
tbox[c] = no;
& c( Z0 y+ K' k5 X' n% z   }
( N- q) I% I2 X0 a4 ^1 K}
5 ?! w& o; Q1 |$ r5 M8 i+ U( L</script>
3 C: w. _1 X. ^</body>
9 B; B' o; n" r* O- Z+ ]





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