Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"& g) G" O4 S2 c& s- _6 U
         c pageencoding="gb2312"* f& e  {0 ]! C- {& k: S
%>
) N0 U1 v. Y3 `( D' Z# w) L5 t<style>9 g6 }) B4 L% K! t# v. w
.f9{ font-size:9pt; }
9 K* p$ K7 i' W7 Y$ C- m7 z/ p.bgc{ background-color:#aecaf9; color: #0033ff }3 v. ]( N, l8 x) e
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;5 f( u8 D5 `: @8 s+ L
  border-bottom: solid 1px #4e7dc1;+ Q+ o" j6 Z1 u% F3 a/ a
  border-left: solid 1px #aecaf9;
7 Q. F! {) _! b* v5 D  border-right: solid 1px #5679bd;
+ f8 n' h9 U/ D! U# F& [  padding:1px;
; V( J0 Q$ w8 i) k" o4 U4 }' _  margin:0px;}; Q1 S+ t% n4 F
</style>  |; Z3 n4 F4 u4 V' y
<script language="javascript">) `+ ?2 f: h0 p
<!--
( @0 @' o  j! y$ t: u' N% U7 V2 gfunction rv()% E: b  V, H) q: C6 L. ^! n
{5 g, }5 U! M# l. v9 c# l2 h
  var val="";
2 ?+ E5 y8 P: H3 R$ w: Z3 U& ~  for(i=0;i<combo_box.list2.length;i++){
" u3 B- z4 f8 t/ P4 f" g' G   val+=","+combo_box.list2.value;- Q; ]$ [  m- k% V* r% x8 k
  }
( T$ k% F# p$ ]6 O: p9 b' I  if(val.charat(0)==","){7 h! \/ t" l% B3 U
   val=val.substr(1,val.length);0 e1 d! m8 K: o9 ^! R" @- ^
  }6 T) ~" W  X. u
  opener.form1.frecname.value=val;
1 _9 B* o8 Y( ~$ a) c( g# l  self.close();
. I* A: F% ^& B% F* N( f$ Y}  J1 k9 R- ]4 \- P9 l7 y! \+ K
//-->
: J3 d& G0 h1 [* m</script>
, x9 C$ o4 {2 |" B1 q9 A0 T<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">1 e; A: s- d$ W( ]) h
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />9 b2 r/ b% I% S' k
<%- \  q* [1 d1 q; J: \- P: }9 T
  cdatasource ds=new cdatasource();  //数据联结bean实例
7 s+ c$ I6 M$ s: K) P% v( d  java.sql.connection conn=ds.getconnection();5 _  \/ }% Q3 Q$ O1 s% O
  java.sql.statement stmt=null;
; C0 f7 c5 j2 F8 O+ T4 s7 d+ ?  java.sql.resultset rs=null;% N; p; i/ C9 M
  cdatacheck dc=new cdatacheck();
5 T0 g, ?% J" S' ?% t( L2 h%>& n* a" H! }! I7 f
<%
1 w* y/ }  [2 ^: fstring 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 J/ l2 t, Q2 S, E' ?3 R
stmt=conn.createstatement();
- }) ]. t9 r/ yrs=stmt.executequery(sqlu);
1 |4 u# N4 S% V. _%>
7 E* F# }4 v- q, W<script language='javascript'>' b1 ]' [8 M& l+ A2 O' \
arr = new array();2 w6 G; n) l8 q0 S+ A5 A6 n3 S/ C2 l
<%  int temp=0;, U* h4 R. A9 e; L% a' v6 }
while(rs.next())
5 h4 j8 C* T7 b9 `; d: }{
( _8 M0 Y# R/ `% _) L& m%>
5 P  G  V7 l9 ^6 ]. D( E' b5 T& Sarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");: }8 M: E2 g+ O2 P% A9 W
<%; g$ g! R0 N" G6 [1 R2 l6 j
temp = temp + 1;, ~* C4 M* D: S' O
}: l: ^5 @" }/ V- y, }* ?
%>
% Q  S, Y+ H, K- d; Y$ ~0 Y. d8 [* gtemp=<%=temp%>;" b4 `' d# ?0 W0 k9 |: p. e
function changelocation(id){
1 l& f0 x) b7 \( w- g! Odocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 ( u/ a5 q9 ?" I
var i = 0;
/ j( B3 i$ a/ \2 J6 l0 z' Hdocument.combo_box.city.options[0]=new option('-------','');
. b% z  ~1 N8 y6 r4 {for(i=0;i<temp;i++){
6 z% d2 ?& c" G6 o% O2 Qif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
# v9 g2 v8 e, @4 K% jdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
( o# _8 ^. o4 r% D/ @( M% ~}
7 T8 T; c* u3 d} " ]# o; A( p% U' N8 y# q
}
1 d6 a9 |: x8 O9 _% b) L</script>* J) g. V( g; b$ d3 X6 e4 Z
9 P. M& `  U$ V7 R
<form name="combo_box">& k/ f" ^0 L  L' O) {8 N! K
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
2 |# w* d7 E, S  <tr height="24">6 I* i* ^! N# J, w9 R, n' U4 c
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>7 i2 l/ x  x* f2 A. P3 ]
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>; _2 G3 `& ^! i( q# Z& e, I
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>) l* J) u6 c' H0 U# L% W
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
) `' c- G3 r; w8 b  </tr>
; u+ m; x5 m& I2 n6 c# q/ `  <tr>
% ]) U+ `+ F$ Q" ?5 O; `1 _/ S1 \    <td>
( _; B8 N/ C1 Q# V8 x$ u( D  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
4 \& L2 n- ]4 G9 |/ L' Q  <option value="0">请选择部门 ---></option>& N1 W& R* r9 H8 E/ H
<%
/ P  [4 o) k# p6 {5 \4 G    string sqld="select * from tdept";1 {' S3 D2 M7 F% j& L" E
stmt=conn.createstatement();
& z- ~& a3 M$ u& V) C* w3 zrs=stmt.executequery(sqld);' y0 j; Z9 ~" X8 e2 |% ^
while(rs.next())) j* d; Q/ E0 b
{
) Q/ @! e% M) B$ y! z6 M%>; V8 U) O- r5 d* O; l$ o& V
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>* U7 V. G* m2 o" v
<%
; |3 T! A! U. O% W# _% |5 o}
+ r/ K7 G: q1 e7 I  O%>
( J6 o  `7 W6 {+ K% ?1 t& W  </select>& i1 S$ r+ q$ S% ]4 l- l
</td>4 \$ y, ]8 F1 _7 ^5 M
    <td>- G: i0 K  P& V# l; I
  <select multiple id=city style="width:150;height:200" class="bgc">$ N+ b8 d3 B* x2 }5 z
  </select>0 T$ e; Y; E; ~! r1 ?: t
</td>. s) A1 }6 F1 \2 {! M% b
    <td nowrap align="center" class="bgc">) o8 l. C/ o1 W$ Q* M7 I0 ^; j
  <input type="button"  value="<<" class="buttons">* X3 l- a4 T( `) o6 _; A- \
  <input type="button"  value=">>" class="buttons">
, |) k+ ?4 u# d</td>
* W9 B$ F8 z1 D9 y) b; a5 X6 `    <td>
( B. W7 M$ R' c) \- }  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
8 \& n6 y5 o* R4 p' \9 D  </select>
3 z3 e! d4 x) D# e+ s</td>* e4 I3 P/ p* c$ Y, q8 d% m8 w
  </tr>" T8 o9 S6 e! ?2 M! ^
    <tr class="bgc">
9 m) ?) P# P+ l. K# A. g+ W    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>$ F7 e% r6 r. O4 u
  </tr>2 i2 A/ f+ F! Y, Q( P2 Z
</table>
2 g" ^2 z$ s0 k$ F3 ~</form>
3 @' C; \8 K; K- x, u8 O! ^<script language="javascript">/ ?& @8 v: f! [6 q
//人名移动
1 p7 p8 T$ v1 Wfunction move(fbox, tbox) {
2 v- Z) p8 o) ]* C8 J6 lvar arrfbox = new array();
- s9 p- U! m' Q; p( m* Y3 nvar arrtbox = new array();4 f6 ]3 Y& d1 a# Z
var arrlookup = new array();2 m7 c; a. K5 ^) f: Y* U
var i;
# h. x3 F8 S4 X6 d2 R/ _: I& Y8 b6 yfor (i = 0; i < tbox.options.length; i++) {- V( a7 U$ ~# G3 V" ~7 Y2 A
arrlookup[tbox.options.text] = tbox.options.value;
2 M* b# ?- `. r, d: [arrtbox = tbox.options.text;
8 |: T: H, F% r! o}
1 w1 X3 {$ U/ F4 [' A4 d7 [! |var flength = 0;. L7 Z2 K7 t$ w- ]
var tlength = arrtbox.length;# h; r  v+ w7 |( p
for(i = 0; i < fbox.options.length; i++) {, ~8 s0 |) D* B6 M5 F
arrlookup[fbox.options.text] = fbox.options.value;
; E, [  {3 T2 U+ x, r" N9 tif (fbox.options.selected && fbox.options.value != "") {
- E* K( D9 O, [; ~! l" c' uarrtbox[tlength] = fbox.options.text;: x- g* D8 j! o: y# q, l& t8 ~( d4 o
tlength++;
- u4 _) x* ]9 P. w% t2 M5 M7 L}
: f8 y. H7 M  N# D; E: O/ Belse {
! N" M9 y# f! z* S+ Varrfbox[flength] = fbox.options.text;
/ R# O6 c/ f; s) h! Xflength++;
  H" T+ z2 C$ Y4 S   }, \; P0 l/ O. f4 A' P
}, @+ i# ]. [- S& l% o
arrfbox.sort();
% Z  S: d. C1 v/ h" u* sarrtbox.sort();5 m: T; _1 b" a  U+ o
4 {. Y8 A1 o1 X8 o, e0 w. p
fbox.length = 0;
* b1 _5 n9 X- @tbox.length = 0;
5 S/ t8 o# i4 a5 n. ?0 Tvar c;) N) `$ n7 \% l5 z4 X
for(c = 0; c < arrfbox.length; c++) {& N5 X( \- _2 x4 A
var no = new option();
7 _7 y, j$ o  ^; F& cno.value = arrlookup[arrfbox[c]];
) m/ v5 {, i# l# w" R* v4 C- hno.text = arrfbox[c];# F* I0 @8 X& Y( [1 V' W
fbox[c] = no;
% ^# P+ I# _4 j9 W6 l1 l. Y" [! Z}
) k! [. G% s$ Q, S$ r- c0 kfor(c = 0; c < arrtbox.length; c++) {; i! \% v& _7 X- B
var no = new option();% `* o& y; l1 I* @/ B& x
no.value = arrlookup[arrtbox[c]];  p6 F* E: w6 j* ~
no.text = arrtbox[c];
* a: g0 K6 t" x4 I! z$ _( otbox[c] = no;
! A& H- G8 S( ]3 x   }9 s- H% x" {2 ^! J3 R# }( T
}9 g! U; P- B  G
</script>0 l, H: f0 ~! g* H6 ?8 p
</body>
# G) Q$ I0 b' Y; _& g





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