Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
! \' a% q* f$ g* i9 t; n         c pageencoding="gb2312"
* L1 l: J* Q; O8 x%>
$ d) C) Q2 ^: R6 d1 q  l7 a<style># D  H+ l7 ^) K' I1 U1 q* L
.f9{ font-size:9pt; }3 w/ q# Q/ o! }& ]9 q! ?
.bgc{ background-color:#aecaf9; color: #0033ff }  T2 L$ R6 T: j! ]
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;( s& ~, ^$ v# y$ u
  border-bottom: solid 1px #4e7dc1;
8 o+ F* f2 s& m) \: d9 a" A  border-left: solid 1px #aecaf9;+ H& W/ O: h( Y& l0 u
  border-right: solid 1px #5679bd;
' B" |( S" _- C0 k( n$ n  padding:1px;
/ u7 P% P0 j' O* j0 Z  margin:0px;}
( y. ^* x5 D* e( P' ~) N7 }' m</style>
( o& x& k% M) X0 n' A<script language="javascript">
, Q. [9 @' U6 b) V& W8 H<!--7 i8 C3 Z" n3 Q, ~
function rv()
8 B  |# c; a. c# i) U{% g2 K# T, o. {& k7 Z6 J
  var val="";
$ Z( g' p6 o" |$ W2 q  for(i=0;i<combo_box.list2.length;i++){
+ ~5 D5 M1 A5 h0 F: g, N" _1 F   val+=","+combo_box.list2.value;2 y" {/ p$ D/ j2 c: Q! r) @
  }% Q+ I- N) M& `
  if(val.charat(0)==","){
6 w* o2 E2 l. j, y# c  ~   val=val.substr(1,val.length);, Q! I% c9 q" }/ Y; v  j7 |
  }
; S! ~" }/ C/ l& B$ E2 Q+ z/ q) U  opener.form1.frecname.value=val;
; I9 f  r$ ~+ A  self.close();
; U1 d, X$ T7 z* }, v. |5 L  F}6 y3 I: y6 T# @+ o$ z) o0 v
//-->' B5 a6 f- g! v. y0 f5 o
</script>
! a: J- r! s4 B9 V1 i: g" n<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
1 m( z& B5 F. Z1 x; x' o<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. s5 e+ @$ R) v& L. e# J: V; I<%- Y) E2 d  w' m4 W( M' c
  cdatasource ds=new cdatasource();  //数据联结bean实例
- A! s* C8 O) p+ w$ w' B0 W  java.sql.connection conn=ds.getconnection();2 n/ E" Q4 w( M2 h
  java.sql.statement stmt=null;
# X& \' v5 n6 n8 T  java.sql.resultset rs=null;
; ]+ n/ M+ K2 c+ _. P: h. c! Z$ |  cdatacheck dc=new cdatacheck();6 }0 l6 {' U% C$ G
%>
0 ?. e' l) s! u! F/ H<%
( J2 w6 B+ e3 x1 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 d7 \2 N0 _; Q; j1 p8 d- L" L
stmt=conn.createstatement();
. |+ H; y8 f& v' F6 Y, a% H4 vrs=stmt.executequery(sqlu);" v; W* x! r; \5 I
%>  `' V. ~( L. Y0 t& Z6 p" g
<script language='javascript'>
7 y( p: s! G7 |/ Q  J' r9 M) zarr = new array();
; `7 D/ L* z! [% I" }<%  int temp=0;) E$ n$ L( F$ q$ p  D* ^' J9 u
while(rs.next())
- l" g$ |0 z: S/ X. I9 ]{9 T( {& Y# Q/ v. k# J. \
%>' w* T2 M# Q2 \* Q# v5 B
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");3 S  l, M- L+ L4 ?  \7 Y7 R/ r
<%
% q  a/ _8 p( N6 ], J0 \$ I8 x, A+ s8 Y7 Rtemp = temp + 1;
$ ]- |9 d7 h  R+ \  M9 k}
2 @3 H0 a6 l9 `3 V0 n# k7 t%>9 b7 ~5 n. P& V6 [/ k" ^
temp=<%=temp%>;
, k- Q; c8 ~& V* i7 Cfunction changelocation(id){ % w, Z4 k( u1 ]* ?. ^+ [* T
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 : C1 t8 v5 _3 E# N. C
var i = 0; ( i9 Z6 U) S) o7 d% d1 H$ e+ L) f5 k4 ~
document.combo_box.city.options[0]=new option('-------',''); 7 B. o9 A) z# n6 o4 b$ I& }
for(i=0;i<temp;i++){ # ~% g* E4 h* l$ r( B, T6 t
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
$ \2 y5 G7 [" ^& jdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 2 B. t: r; V4 u; S
}
$ v) e( y; M6 |9 g5 F8 u}
' x1 L, X& I9 B! J; m5 x  W} 5 `5 p/ }* }- @$ q, q* I1 Q
</script>
( M% f8 U, \8 F: S/ L* a. R
# W# d. h2 ^! C  |/ ^" p3 }<form name="combo_box">- k4 [: B4 c0 K/ r+ ?/ v4 |$ ?# S
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
2 D. h3 m5 e0 }' H4 w  <tr height="24">4 D6 C# \6 C% X$ C: a
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
7 J- F' t2 U5 S; h- G( }$ c1 S9 N    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>+ J' c6 I5 B7 q/ G1 d; N4 H7 ?
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>5 _; H/ [6 v8 `& Z8 Z2 J
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>+ B) z7 X2 U0 k& r. t$ `- p9 R0 T
  </tr>
/ V9 l: g" w5 ]  <tr>
" G) ]. H( J5 h8 f5 m7 z1 O( }6 F    <td>
) D+ ~3 n) |9 l$ k$ z( v" a+ j  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">/ h+ o+ c2 C# W6 z) |3 C. X
  <option value="0">请选择部门 ---></option>' y# J! ~& u1 m: {2 j
<%2 j6 h7 N8 U  A
    string sqld="select * from tdept";
  o) _  F" [$ v4 }! [8 m# Kstmt=conn.createstatement();5 x" @- t# d" n: k& s* S
rs=stmt.executequery(sqld);& T6 Z; z+ V* b, _8 u1 A2 y; ]
while(rs.next())
5 j& y5 X8 u! @/ S9 {4 B8 i{
7 {' O$ b6 b& [0 Y6 f%>( o/ P7 Z5 `- |7 q& E5 H5 E
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option># G) @( X" Q2 K/ e# y. ^5 M
<%3 p5 L# e9 O" \: R) |
}
5 T2 E3 A1 c5 u+ B" O* d%>
6 r! q7 S! o6 r2 H0 S  </select>8 L& b$ p! ^: Z% c6 y5 p. S
</td>
3 x) b* H1 d4 s7 W  }% ^    <td>
) e9 Z0 }  I) ?' j  <select multiple id=city style="width:150;height:200" class="bgc"># n( P) H0 {6 N8 _6 n; T; m  _
  </select>% c, m& W: K) N9 S1 H* W' N
</td>
9 I% w! T$ S; O5 C    <td nowrap align="center" class="bgc">- m) J; A4 R4 ]  Q' e! V
  <input type="button"  value="<<" class="buttons">" ?& E3 e0 l. @" n* `8 h
  <input type="button"  value=">>" class="buttons">$ r4 K  m! E' N! ~; n, w2 s
</td>; \2 _8 Q  |+ w6 S
    <td>
/ v& F! X' ]$ \6 |4 ?! S  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
1 J' p! k6 _( ^* N5 c+ L1 O) i5 Y  </select>/ A. w5 c' l1 V" {! p
</td>
2 Q% N1 O- a3 i- C9 i8 u  </tr>2 B( A' d  w8 e: w9 A
    <tr class="bgc"> ( ^$ ~' C' t- _3 Q) Z  ?
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
" D) Q4 Q' \4 x/ U$ V( W  </tr>
  w& R+ E) v5 m- n3 a& Y3 X</table>  e, M/ V$ x- v' u7 c
</form>. y2 s! c" y% e; U4 {6 V
<script language="javascript">, [8 y8 b) ?* E2 b# |& H9 M
//人名移动
7 a9 N! N4 v, `$ j. H" \/ N( Xfunction move(fbox, tbox) {3 `# B: ?9 @5 ?/ U$ N
var arrfbox = new array();8 C2 J, \/ n) g3 W% t
var arrtbox = new array();
; n* f) q' k, M# Vvar arrlookup = new array();/ z# w5 D+ F' B0 E
var i;
& ~" t( d8 B0 S& zfor (i = 0; i < tbox.options.length; i++) {) e+ ^# K; O0 X5 H+ x8 O
arrlookup[tbox.options.text] = tbox.options.value;
# N$ N% O' [0 N6 |- M6 m( w, larrtbox = tbox.options.text;, p" @0 J& e1 K; [
}
1 [0 P1 O+ |$ V2 [' gvar flength = 0;& t+ C. ^. V/ J8 b7 a+ h# f! w
var tlength = arrtbox.length;
& Y% e4 L: G+ I- R# n' Zfor(i = 0; i < fbox.options.length; i++) {0 v+ F$ I! M2 h* @
arrlookup[fbox.options.text] = fbox.options.value;
  S8 A; K" B  s  c0 b1 ~8 ?4 l8 Vif (fbox.options.selected && fbox.options.value != "") {
# r( j% {/ q8 s% ~: karrtbox[tlength] = fbox.options.text;
7 f& G+ ?8 d; d, a6 ^tlength++;
2 W7 \6 r7 [; L2 |" [& d" `" t6 g; Y}
9 c1 N2 e7 i, t/ L% }else {$ R, R6 Y! z; p; x% A9 p
arrfbox[flength] = fbox.options.text;- d2 c4 j7 ?0 r' D
flength++;
9 W9 g; S& B$ M   }
; K" c, i. b+ w}; e9 I! Q; c( y4 g9 p: z# J
arrfbox.sort();
* {/ A: ~% P* j! r( I$ j. s& U) L" M$ Aarrtbox.sort();
- U* n4 H# Y$ Z( j# [/ E7 x
/ p  [5 h$ _; L; b* Jfbox.length = 0;" R! l* t6 z1 m) F& |: e; B
tbox.length = 0;4 y) o" b5 H4 f% F4 [( {
var c;
8 w8 M1 \$ x- y5 {9 lfor(c = 0; c < arrfbox.length; c++) {
4 C) T( `0 _9 @( Avar no = new option();
6 q. d* ^6 S' \; G) p, W5 nno.value = arrlookup[arrfbox[c]];1 T$ m+ Y$ t) f6 t$ l* x
no.text = arrfbox[c];
+ y. C7 E; ?( u4 C- x7 ufbox[c] = no;$ B( O$ g  p: C! h
}0 K5 F# M" S. X" m9 i% _1 N
for(c = 0; c < arrtbox.length; c++) {; e, \# G( Z' s
var no = new option();
" {* G% E" k) P7 T* a6 v+ l  a' ?no.value = arrlookup[arrtbox[c]];3 c" F/ \" q8 f) v: B8 `
no.text = arrtbox[c];
. N. j4 k7 P$ [tbox[c] = no;
* h# `% j9 q  n+ |5 N" C   }
% |. l2 \! x0 {# I! C2 h& x: u}& y2 }8 }" ^+ s) `5 b; A
</script>: L; D/ n9 N5 h$ I. R5 @/ a
</body>
0 z6 G+ M( X+ G% E





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