Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"- V, ?5 M$ Q3 J: A" ~
         c pageencoding="gb2312"
* Q; o$ H0 F( _; \* S1 ~/ b%>8 m2 N, J' m  D( ^6 J4 c
<style>, c- n3 R( W, d7 c+ B% \+ a7 P
.f9{ font-size:9pt; }
. `- ?0 D/ q& g$ ^; H.bgc{ background-color:#aecaf9; color: #0033ff }
* N* [# `; d: Q) j) ?$ k.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
8 K5 J9 W3 x" ^! N  border-bottom: solid 1px #4e7dc1;
& T* s( |, y3 M  border-left: solid 1px #aecaf9;5 w& G4 P5 i$ X' T5 n) E
  border-right: solid 1px #5679bd;9 m5 h6 K1 w% l% F1 p) g8 f
  padding:1px;
% U: \" r& t" X0 ^  margin:0px;}
. s; u+ d4 K# }2 `</style>
; W1 z7 r8 P% H$ Z- T7 d<script language="javascript">
) p' X4 m  f( D+ y" D; f: D0 I( H<!--$ B- c, r! g1 o3 G
function rv()
: @5 b' c# g' N) \$ W{: o9 v  \/ w) L6 X2 M6 @
  var val="";
, D" |* _8 m1 S! A  for(i=0;i<combo_box.list2.length;i++){/ i3 o* f9 s. W$ ^* W# W. I# j
   val+=","+combo_box.list2.value;
0 E" A  ^/ T- M  }# Y+ h. u( q* q. c
  if(val.charat(0)==","){
& t$ |$ y% k( I3 [6 `# e   val=val.substr(1,val.length);
- g5 E6 Z( p1 R& ~5 [$ r  }
" Z  p7 I1 O6 [' C  opener.form1.frecname.value=val;
, u3 Z8 Y5 k$ c: x6 ~' L4 K  self.close();
& G! F. u5 N( t  |! O( L}% E9 `+ l! l% j- P! t. c( y
//-->
8 }5 R' `3 n, w+ l" [: M</script>' Q* q* b3 K. @: l! c
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
( S. w0 K7 o6 X* c: M' r, M<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />& D5 D# g% O# M  N# X
<%- F- k. I9 v, @6 z4 V4 {, p
  cdatasource ds=new cdatasource();  //数据联结bean实例1 y& j) J. T6 ]3 m. N; d7 _
  java.sql.connection conn=ds.getconnection();
5 v5 B$ G0 k' g  java.sql.statement stmt=null;
- o* [' h3 t+ I" \5 M( H9 U) b  java.sql.resultset rs=null;4 F1 _: X  B- g/ L" ~: S4 e9 s. T
  cdatacheck dc=new cdatacheck();
" [! I# T) p2 p& e7 ~0 R% ^%>7 g6 x2 F0 t! G0 a6 k
<%
$ f( m/ D+ K( n8 rstring 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";# d+ S5 |0 }0 p
stmt=conn.createstatement();! U$ w2 [$ A4 m0 z
rs=stmt.executequery(sqlu);$ `2 F  `8 {+ I- e6 ^
%>
3 P- G6 K" t- Z4 f  H<script language='javascript'>
, k& l' T' Y' karr = new array();" P% [% X; W5 K4 ~8 f& c4 _
<%  int temp=0;
6 J1 G$ c/ \( W6 Kwhile(rs.next())
9 p8 W9 x* w& q: j% ~) J{
4 L% S0 {* E+ W4 U- s. d' H6 o6 s%>
) q1 |' v0 M" e* parr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
6 r. S* ?# n! |5 ?<%9 F/ G. N0 E) {  B
temp = temp + 1;, R1 e3 _  x* {! O0 @; y1 Y5 q
}9 d# h1 y: G/ q/ k! ]
%>. k: x" ]  H# _' ~6 J6 _+ `
temp=<%=temp%>;9 g3 J  W( s7 t6 J6 {: |2 y" |
function changelocation(id){ $ X) R" e7 Q6 n1 c5 I) U- k7 ^
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 + v9 ]3 T5 b( z: M* J, B& G4 w
var i = 0;
8 n. p( T2 V4 I& p* sdocument.combo_box.city.options[0]=new option('-------','');
3 v0 @" H' C  @" Dfor(i=0;i<temp;i++){
& l( D/ ?5 u7 Y2 L+ c$ O4 k! _1 G, _if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
  Z& A4 ?! b0 x' U8 I2 Z0 K) w& Gdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
. a8 X  L7 @1 H) I+ w, t} ( D% @& f, L  P) y4 C- @
}
( ?& `8 Y" g8 i  x7 M}
( Z& n0 F7 h2 x! X</script>
& |0 }$ g4 d) C( l" @& y) w2 g8 q& i# O3 E+ l) @4 K2 E  M
<form name="combo_box">4 h6 D, {& ?  n( p4 k- \# o( L# D
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">/ H8 _$ A. e* a5 {: E
  <tr height="24">. o0 g: P1 x: \) u
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
$ _2 X8 l  U/ A' b7 D    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
+ h5 b$ L) G* Y$ J2 Q9 `    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
# ]; M( Q) Z! D5 C    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
- }) M, I% G& }4 q+ l+ p# N  </tr>
; G' u& I3 Q6 E  <tr>
8 B% T! a8 C# }: s    <td>
4 d- l$ ^% ?& M7 X/ o* \5 G  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
3 m; J4 A: {8 i7 B  <option value="0">请选择部门 ---></option>
+ p/ L! v) @$ p$ ~3 L' b0 B<%/ x; h: T. [  _/ D" n2 T/ k/ ~( a' m
    string sqld="select * from tdept";0 }% ^6 Q3 r" e" F
stmt=conn.createstatement();
+ z) f5 |) \1 G/ H5 hrs=stmt.executequery(sqld);% b1 i% q( \' j" C
while(rs.next()). D. A4 }. g8 |7 a/ f( q/ v" R
{
& R7 M0 m* Z( l* D! S" }5 M%>
- P  k) N- A3 g  M  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>9 w. E1 Z0 h) v0 X  D. m
<%
  T  M% g' M, T7 s( h8 B}
+ p2 v+ {  |( J5 ~9 p7 x$ U%>
7 @1 e) Q5 q4 D+ B. N: J# a) J# e. }- W  </select>
5 u/ p! {6 _0 p</td>; t. X/ |2 R3 w/ ]" k
    <td>
" N: G7 ~" E1 [' k: B7 E! B  <select multiple id=city style="width:150;height:200" class="bgc">
, ~( L& \4 i% X! b  </select>
9 r& _7 }* k4 Z/ T8 U3 J9 R3 [</td>5 m% E" z! \% s9 X$ D
    <td nowrap align="center" class="bgc">; f: |# l0 j/ s) I6 C
  <input type="button"  value="<<" class="buttons">
; U/ D) s% w- ~( T; q, \! ~; l2 l  <input type="button"  value=">>" class="buttons">
: b& g) ]$ t0 G+ z% [% \8 `</td>
/ X* {; U5 k, H- E8 I    <td>
( F) c, R! F! e  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">" o% F: k- V& l4 O3 @
  </select>9 G3 \+ L& Q" ]2 y1 ^" r5 Y  ^
</td># s1 m" N$ F: `1 u- y: R3 D, C+ q. K
  </tr>
& F) c2 o+ p9 k0 c    <tr class="bgc">
6 v$ M* k/ D( E1 D' w/ m1 |    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>) N# b" q$ O1 g; C& }
  </tr>& N6 h6 X1 u: ?( }
</table># C- }# p+ b0 `; s
</form>
5 h7 ^! u/ U5 q: D<script language="javascript">
1 Q! ~& d; B! g$ e# R; W6 |//人名移动
- p( s: p! @- G  a3 y5 e2 C) [function move(fbox, tbox) {* Y4 U, y( ~; m
var arrfbox = new array();3 w; F$ D$ P3 U2 V7 R4 T2 L
var arrtbox = new array();
; e+ ~; i* T$ B6 n/ u  jvar arrlookup = new array();6 n3 E/ x2 a8 s: I* U- d. F! h: t
var i;9 I2 i  d1 Y' Z) h
for (i = 0; i < tbox.options.length; i++) {1 @: R9 j; U* J, J1 n' }
arrlookup[tbox.options.text] = tbox.options.value;) j) e" c/ }& D0 \8 _
arrtbox = tbox.options.text;
. q4 C' f) ]/ d7 e/ M; }  d2 }}+ T7 l( w+ c/ W  C7 {
var flength = 0;" y: C( S# M+ q( M- d( Z. J
var tlength = arrtbox.length;. j; e* ~" \0 q7 |" S
for(i = 0; i < fbox.options.length; i++) {1 ]8 S5 T, d; @
arrlookup[fbox.options.text] = fbox.options.value;, F0 q7 ~( F! J2 `
if (fbox.options.selected && fbox.options.value != "") {
, f6 e+ a  W* k! l+ E9 `3 @arrtbox[tlength] = fbox.options.text;
$ u( m, g& W9 g* z; k" V( Mtlength++;9 t& h8 _2 Z2 E( h' B: n
}6 f' a* X0 E( ]1 L; q
else {
  O. Z- J% _) _; ~arrfbox[flength] = fbox.options.text;. X, h( e4 j7 w. F: ]4 G5 G+ }
flength++;
! s; w( z( E" P3 k. U3 R   }
6 f/ l5 B5 N, ^* k: X* B}
5 m" n8 F! P! t/ Y7 o% ~# `arrfbox.sort();
' m$ s* Q2 T$ f. I. C/ O4 W3 qarrtbox.sort();' d$ a+ z5 \" A/ }! ^

8 o+ M0 J4 R3 E' a+ |& Ifbox.length = 0;7 U/ y9 ?1 U8 ^2 L1 N
tbox.length = 0;
9 w* q. E8 f( [2 O1 K: e! l/ |( hvar c;/ P& d! B* p9 m. m4 D! G+ \" ~1 i
for(c = 0; c < arrfbox.length; c++) {
( N  c* L4 `7 a5 ?/ a# R& Nvar no = new option();
" H; S6 i" \& \. u) D8 Hno.value = arrlookup[arrfbox[c]];
6 B' m( m4 b) Z! c' rno.text = arrfbox[c];
5 d/ j$ q, _0 A  Q5 ]8 p; Wfbox[c] = no;
% q  D* U# O+ ^" F* E* J* U}
: n5 X' ~& L+ q" sfor(c = 0; c < arrtbox.length; c++) {4 y2 L3 g8 E/ f+ ^
var no = new option();
1 D6 Z( v, z3 }: v% Y# b# Dno.value = arrlookup[arrtbox[c]];+ T- ]- J9 E9 F  t. o
no.text = arrtbox[c];) A4 P0 k" }& n
tbox[c] = no;0 F, H2 L4 J+ t, E; E
   }( n! ]1 n2 f3 R& v9 W' T' U8 U
}8 M! I9 i) [# d8 J
</script>& x6 r: T! w( O0 n+ @
</body>
, M. i- E9 h. k8 ]9 X' L





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