Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;", |* }9 x1 O# y, i
         c pageencoding="gb2312"
" h* Z( H  o7 v0 Y5 k( ~( `7 Q& x( X3 t4 p%>2 @! i; g- s( h* A& ~, z; ]
<style>
# w9 o% h/ X6 ^) y& }: S% O; a.f9{ font-size:9pt; }$ p1 ?" p( w3 S
.bgc{ background-color:#aecaf9; color: #0033ff }
/ J0 _5 B. F! i, K" V6 o9 w& z.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
& G# E3 R0 I$ Z$ ?+ M9 ^5 a  border-bottom: solid 1px #4e7dc1;
4 }" ]9 S) M7 v) w' b  \  border-left: solid 1px #aecaf9;: M- ^* t, }9 X+ {6 o
  border-right: solid 1px #5679bd;
( `2 X. ^* t' K: G  padding:1px;
0 ?' n2 O9 G. C) ~  margin:0px;}
" a+ t0 F% k: ~</style>! I3 x; T: j, N, V' r# F
<script language="javascript">
1 U) {( f4 |3 e0 U9 t6 P3 I: H- W<!--1 \; V3 P. q5 h1 P) {- p! X# q% O
function rv()4 R( Z  p# h1 c. }$ {) \6 q2 Q
{
( }& M& N6 M( }0 O1 Z4 v  var val="";' e- a+ L7 K0 o* ]
  for(i=0;i<combo_box.list2.length;i++){
) u) m4 Y! D, v1 _( ?   val+=","+combo_box.list2.value;
" a/ B/ P, q3 K  }
& p6 [' D1 g  N+ M! f  if(val.charat(0)==","){2 ?: ^6 X& I, Y) ~+ ]1 y. J
   val=val.substr(1,val.length);
- Y; C0 H! G1 L4 v5 u( \# R  }& S* ^' s: o  u8 E
  opener.form1.frecname.value=val;# l/ O8 V1 h2 K/ j: [: ~
  self.close();
2 f2 M: X  ?! e7 ?}
. |' t' N. B4 R% }# S//-->9 }4 O! P7 k8 k3 {2 Z( X- C* Y9 ]
</script>
( H2 l$ O/ O" c3 d/ v2 f7 P- `<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
! N/ e3 I5 d3 M% Z! R, M2 M. F<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
5 w% {+ X  x1 r5 V' I% @<%- j! @7 K  q2 Z$ S/ J3 |
  cdatasource ds=new cdatasource();  //数据联结bean实例7 C; W2 P2 S- n0 u
  java.sql.connection conn=ds.getconnection();6 }; L+ @% `: b3 Z: i
  java.sql.statement stmt=null;
  Y8 o! L( X" R1 j2 C  java.sql.resultset rs=null;, P/ P- \2 D( n, X% b: s/ J' [" N: c' O
  cdatacheck dc=new cdatacheck();
' o1 ^( z; j' b3 h7 _1 p%>
! G9 B5 H+ @$ y$ y, t& [, L<%4 j6 O4 @! m% c" A- s
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";/ Q$ J* z  a  R# w6 d2 \
stmt=conn.createstatement();) \) k8 `0 d2 l4 p% Z& q' B# S1 }
rs=stmt.executequery(sqlu);+ U7 N& U+ x% l  U( H+ y% s
%>
$ D" D  Y1 G, Z, d) Y<script language='javascript'>
: R8 |) D# U+ ^0 P: {. {3 E( d0 Garr = new array();
( ^: H' X- w  ^, ~$ N8 _4 O# N: X<%  int temp=0;
9 V5 Q4 U5 [' ^# wwhile(rs.next())
) e6 J$ R8 u4 e; G8 I- I7 I8 b{
' i* c* ^* [6 k! _6 M' F9 \( i%>' y; i" w" a% _( Y
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");3 O$ G) ^( o6 `; G% h
<%
  j) _. e' C$ N; X5 ^temp = temp + 1;
& h+ x# N" s) N7 z8 u}5 T  n- v/ E  Y0 B) G# p
%>
! P, t+ D# z+ [temp=<%=temp%>;
9 H# {+ G  ~" r6 \. N, B* _* Rfunction changelocation(id){ & R7 i$ r" d, g) o9 ^8 o
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
+ d/ i  `  V8 M, v- f/ ]var i = 0; 9 r1 }/ s! _& a
document.combo_box.city.options[0]=new option('-------','');
9 D3 p4 J: t( v; m, Z5 hfor(i=0;i<temp;i++){ 6 S5 o0 ?( ^. F1 K! w) M2 r
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
" g+ [$ x( s6 ^1 m: k# ^document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); + E7 E- _$ k0 O
} # _  I" R/ ~- ~( Y1 g
} 4 N; K+ C, G" F, A; x
}
$ V& T6 T) H; C) i0 _; P7 C</script>- _6 ]+ U' o# B
" r! L1 `5 |, L% [% P6 d
<form name="combo_box">% b# P0 u4 R; _: o  l
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
6 S) M# z  T! m& B) Z- n, n  ]  <tr height="24">
- g! K3 z0 j; n" v6 ~; l2 h    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
1 I8 l, n( v& t: f; T, f4 c' I: j    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>+ K5 k1 @% H: P
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 f  N! [' x8 O% h- J& [: P0 i# h    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
1 z  z' v" x% x% R, m8 W( V  </tr>
6 U/ g  x$ S# f. d6 I  <tr>
# I( I2 K. Z8 y2 j% |/ X    <td>
( x9 F0 ]/ q, I: I# d1 @1 |, ^  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">- I8 {9 F. M( P$ T0 }
  <option value="0">请选择部门 ---></option>9 r! y, K# p! v; D' k, U
<%
+ ]0 b  Z, g; t1 z# C9 U* y& |    string sqld="select * from tdept";
/ h0 _' P4 e' o% }2 H* e$ X0 Astmt=conn.createstatement();
# J- `8 U7 ~, G* T1 r9 `; K5 drs=stmt.executequery(sqld);
6 s9 i" T$ K, R% i: ?( f  iwhile(rs.next())
% V+ p6 V- e: X5 k# ^{6 K+ Z. K- e1 S
%>
/ T# p; V" }. j4 Z# a3 Q: i3 w% `% l  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>6 r: F5 a( Z) R% ]
<%
' ?. m) f# U1 h6 ?. k8 q}. Q: s0 @5 }6 Y& }6 H1 t8 r
%>
3 ?  W9 A1 {5 f( j1 m; L# ?  x  </select>
' p# }2 }# b6 T3 j8 d</td>
+ j& Z# l# x. L7 ?    <td>. L" w1 D/ e8 ]# D
  <select multiple id=city style="width:150;height:200" class="bgc">
6 q2 I8 l& K7 n7 q5 x( q( W, W! x6 w7 J  </select>
4 }' G# }4 A8 \; F4 B, {3 R' o</td>
4 k+ s( k9 T5 U7 D& G! L& ^, I6 h    <td nowrap align="center" class="bgc">
$ _  ~+ {3 N1 ]0 K, @$ J  <input type="button"  value="<<" class="buttons">
8 `6 b2 l4 F7 j7 @  <input type="button"  value=">>" class="buttons">. n8 i5 B$ _4 r4 v0 _
</td># Z/ e1 F( s/ B1 w. E& [& K
    <td>* @6 l5 {: G$ f4 Y6 c
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">* W5 m% |6 v4 C# ^4 ]1 q1 N
  </select>
6 ~. W5 g' A( ^  {( j( {2 K</td>
2 _& ?7 d: N  T0 V& s1 a* F+ P5 ^  </tr>
# t6 Q0 E" e1 K8 ?  c    <tr class="bgc">
5 E+ l# p2 E8 G7 \% z    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>- J- K; O' {( N( C+ P
  </tr>
/ o7 Q) f9 N+ d3 L9 x/ u</table>
, K3 e0 q8 n  b/ ~/ f, a</form>
, a  J) H4 T- r) m' z8 @' w" E<script language="javascript">
) U5 Z1 z% e6 k* g* i3 c. ]- r//人名移动) A" Z6 w8 Y  C2 M/ p  a% ~
function move(fbox, tbox) {
4 j8 {" {4 m2 x3 U% ivar arrfbox = new array();
4 b# V, u/ k7 w/ fvar arrtbox = new array();! b- E1 r+ o6 T  |0 K- A) c- S
var arrlookup = new array();0 x: j4 w. h  k4 d$ a( K
var i;; a% F7 {% r. D% B3 }
for (i = 0; i < tbox.options.length; i++) {( V, i! s# }7 i& C/ d
arrlookup[tbox.options.text] = tbox.options.value;- t( H9 u8 {2 \* ]$ ?
arrtbox = tbox.options.text;
: K( n% I5 ]/ {* k3 p3 q" ^3 |}
; R+ C" R5 }0 _0 J$ |/ ^var flength = 0;/ ~4 e1 B7 k# s' H# d9 r" b" g
var tlength = arrtbox.length;1 o1 K) j+ B: @7 P/ A  W
for(i = 0; i < fbox.options.length; i++) {
% R7 ?+ ^7 m8 w, e( R! B& Carrlookup[fbox.options.text] = fbox.options.value;) |7 C3 }+ t$ c+ H) v2 P
if (fbox.options.selected && fbox.options.value != "") {
8 o2 N" i0 U/ a9 \/ iarrtbox[tlength] = fbox.options.text;
$ g* f; v6 A- {  W, [) ytlength++;
+ N% y# K" K" R- P  U" }; v}& _- v+ R, P( h% ~  t$ c6 L: E" B
else {
9 U; p) Z2 i& v$ ~0 }2 s" ^) Tarrfbox[flength] = fbox.options.text;
& I! K8 T% T% O& B: Gflength++;% O3 y! o0 l7 K  G+ ?$ H1 X
   }3 p1 ]. D, G) Q+ q, Q! X
}
6 C  S5 S( `" Parrfbox.sort();
8 W  @' g+ a; u, _$ m" xarrtbox.sort();
& R5 A1 B1 ?- R- Z
3 H" c! z, R& d) I1 `- [! v7 ?fbox.length = 0;
* h" n- L2 k% b& q% H/ rtbox.length = 0;4 F& v$ o/ S9 ~% k7 o9 D
var c;' b4 ]' w8 r. G" e6 \
for(c = 0; c < arrfbox.length; c++) {
9 b. D4 p/ O7 M! bvar no = new option();; H. F3 D  c# d
no.value = arrlookup[arrfbox[c]];
- c% s3 P" O' L1 c) D& ^# Eno.text = arrfbox[c];9 w# f# D. u- t" U) p
fbox[c] = no;
& h1 z  w3 L: e# ?) G  S% m  F}
: G  Y' x1 I% E1 Nfor(c = 0; c < arrtbox.length; c++) {4 c* v' b, z- d7 H
var no = new option();5 w: z, P6 i! E- A0 c
no.value = arrlookup[arrtbox[c]];, p8 x2 O% s8 i- H
no.text = arrtbox[c];0 ]4 D9 O3 W' M/ O/ m( D
tbox[c] = no;
- A! C. l% \" {4 ?, @, L   }- T9 i6 L( I* [9 g
}1 c& N2 X6 `* A0 B# u( e0 B
</script>
( g2 D+ D' g! V2 s</body>  u# D7 K7 m, d9 T( s, Z7 X+ }





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