Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
$ U7 N% W- G* u9 R  B         c pageencoding="gb2312"
1 {# K1 }% y: }7 H%>9 U5 I, A& [( h" r
<style>
8 O5 v$ c  k+ O% n.f9{ font-size:9pt; }
: v. \( c; u: A5 d& K2 Y.bgc{ background-color:#aecaf9; color: #0033ff }( Q/ U, h' F. u! I! w
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
, [- W) j2 J9 T0 o9 ?' E) z: N( Q  border-bottom: solid 1px #4e7dc1;. M3 o8 Y  q6 z1 I# ~) y0 e0 d
  border-left: solid 1px #aecaf9;
' T) k& D/ ~2 B# i  border-right: solid 1px #5679bd;) [2 O! Z" I0 @, A$ m' G
  padding:1px;- [/ l: }4 i. |. C. k
  margin:0px;}
# u' h# s0 I; u: n& k" g# [</style>
, ?$ P0 O. y+ c# g7 j+ \/ ^5 }<script language="javascript">
, J/ e1 n0 a7 ~% G<!--! e. X8 D( z$ i) q+ Q6 A/ L
function rv()
# B  F* t  a2 @& {" p{
) f+ T" B5 @9 C: u  var val="";
% m( R+ y  c4 t  {1 h5 L( h! Q8 k  for(i=0;i<combo_box.list2.length;i++){
$ ?2 \. u3 V" Q. D1 P$ C   val+=","+combo_box.list2.value;' L" E* k2 m/ q7 h  ~4 a! \0 K! h
  }
( B& i7 S! l  ?; }1 F  if(val.charat(0)==","){& m  {/ i2 t0 H( p/ o( f- T- h" T
   val=val.substr(1,val.length);
& g, Z. `, g8 b; A! G  }
; h# B# V2 v" U  opener.form1.frecname.value=val;, B  e8 h6 L7 s: q' S% h: ]
  self.close();
& {% `) ]  n! F3 X: ^# D0 V0 K}
; ?6 m2 M9 }5 C//-->3 E% X+ g5 U" }$ @1 b- Z/ h" ~
</script>
4 X& i0 f9 J3 N+ V<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">4 |+ l/ @$ g, l( h( R6 |2 Y
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />  g& P0 D2 Q% g( W" `. W
<%! c4 N3 u' i9 w/ A" v: b
  cdatasource ds=new cdatasource();  //数据联结bean实例
; w7 S7 F3 F2 K/ w* E/ t  java.sql.connection conn=ds.getconnection();
! ?$ t. ^7 \7 P1 M  java.sql.statement stmt=null;/ p; e, f$ a/ j; q& D: X
  java.sql.resultset rs=null;# Q$ d  X8 q, D. R4 p
  cdatacheck dc=new cdatacheck();
) {8 y6 @+ W. k( N' J5 u4 \& U/ \%>1 g6 Q# d* t* C  ]
<%4 g: p3 D7 R1 M/ e# }5 U
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";
. [: t! W  [3 K9 Z: y! Wstmt=conn.createstatement();
& G6 L, x$ F4 J1 u3 wrs=stmt.executequery(sqlu);1 \8 @9 A2 D9 T  f6 `1 i/ j) D. w
%>
) C8 W- x  i1 u  u' O( {; b<script language='javascript'>
1 z: f+ y% G- M2 S3 a9 d9 R: Earr = new array();
5 C: G7 T2 D0 k4 ]<%  int temp=0;
) ^& o% T, ^, ]+ S2 k" Dwhile(rs.next())
, p4 d  h' p- @% U7 S+ N! }{
% }; ?9 Q- a  q1 N; n7 Y%>* l; n4 E" b3 d. M; s  w  P
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
3 ?; f6 H2 u' o+ }4 c' F<%
/ [2 e1 R8 f& ~: M) I7 }1 Rtemp = temp + 1;
; r2 ^- ?3 f+ |7 n2 z  b; r( u% s}
' h3 j1 V% z- u%>
$ U" t: q* |8 z3 B4 Q& S/ Dtemp=<%=temp%>;+ h0 L: m- e2 P& z3 M, N. G3 G
function changelocation(id){
- |( B9 H  J+ {- L9 o+ N! Sdocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
* Q5 q9 c) E7 @var i = 0;
/ \1 t0 w3 F  W! \8 k2 fdocument.combo_box.city.options[0]=new option('-------','');
! Y, g* q) L+ Nfor(i=0;i<temp;i++){ ( v" s7 y9 P3 K( |5 N
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] + e7 M: W) l" a9 @# I+ b& f
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
% N; _. T3 L6 p% ^7 D2 Y/ E9 q} " }6 l  Y- f7 O6 e6 |# |. B% b3 s
} $ J: R& n$ @7 U) N' E! `
} 4 W. l6 B1 q9 [2 ^9 f8 G
</script>, b; }9 F/ g9 ^9 [! f9 W5 [" Y

1 H* Q9 y$ H+ w6 J( V1 c<form name="combo_box">
' e1 q" i% K1 O7 e% a3 n2 Z<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
# G; A: a% V: M& F4 \1 V. z  <tr height="24">& ]0 [$ I# A/ z$ {" M
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
- l1 z7 Q; E5 n, B( M    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>3 C5 v# W, W$ q8 [
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>6 W! l- Y) |  v9 R. M
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
& a" V3 m/ F: o1 `& M  </tr>. Z$ e% t& [$ w0 ?, {/ U
  <tr> 0 g# R: ]% K% R& g7 d* o
    <td>8 a$ {: _2 g' _" Y  k/ t
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
: D- Y7 k: D$ @& v1 ]  <option value="0">请选择部门 ---></option>: q% W" B, \$ b5 Z
<%3 }  C! c" c' o) r/ U- g
    string sqld="select * from tdept";
2 Q: K' @+ b" k1 @+ ~! V, Q8 Lstmt=conn.createstatement();
# r* `. Q" y, l9 Nrs=stmt.executequery(sqld);
& v/ v: y6 _- v$ b) r* I. i, kwhile(rs.next())6 m# S- _7 |" }; B" X+ h
{: _4 D: |7 o9 l( r
%>' N# _! t) F$ u" I
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
1 o( e$ D9 O! C0 Q2 p& H( |<%  z* g* z8 D& o# n. Q
}* a  {' X/ ^0 C* \7 G" }
%>
3 q8 O; x/ I" U9 x3 z$ ~7 v  </select>0 ?( T! h$ `5 S6 x! V
</td>
: H, `7 s6 y3 n0 ]! i    <td>: P% Z& o8 r. Y. z9 g1 t8 K
  <select multiple id=city style="width:150;height:200" class="bgc">8 J. D+ [5 k, v6 _! [
  </select>
2 E" V2 \* W# L: W- W* Q3 H! @9 ~: ^</td>
! T( e$ k- [. z* A: e    <td nowrap align="center" class="bgc">0 _- ~- Z$ _( y$ G, N$ y6 O
  <input type="button"  value="<<" class="buttons">- y. K, O* j3 o2 U# S2 W8 j
  <input type="button"  value=">>" class="buttons">
4 \9 ~, a1 e' z' W; a+ O5 Y</td># N: y; }8 |" p3 K( F
    <td>
8 Y: G+ f3 p: R% Y# m/ D9 `0 Q  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">' u; D; C+ _, m! i0 N3 C
  </select>1 I9 s8 L$ z+ n1 }1 @
</td>
: c+ S$ F, |/ d4 _. [  </tr>
! @% G+ C: X; a4 l2 r1 ?# p    <tr class="bgc">
' l: d8 w5 w- s( E+ M2 `    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>' \( q7 n, l+ q" P* C3 w5 @6 t
  </tr>
, j7 H" K% u  {  v4 D; {7 t# ?</table>9 e: W. _% k0 c& u* f# R
</form>
3 {9 b- d7 X6 T3 l* H$ c6 C<script language="javascript">
0 e2 o, i6 _, _7 i; d, _//人名移动
" D( g0 q& O, H% T& o% q; p& K+ ofunction move(fbox, tbox) {+ u: z; U; Z. C3 n* V9 |- }0 a& L
var arrfbox = new array();
! Y* @- {7 J: u1 s  H; q4 {var arrtbox = new array();* E6 l. x) l3 V
var arrlookup = new array();
' R; r# q6 r. H1 t4 G# Lvar i;+ D  E# V3 D$ p: d
for (i = 0; i < tbox.options.length; i++) {
+ {! F4 L# R- V1 e( }2 Jarrlookup[tbox.options.text] = tbox.options.value;
) e' f/ T" f8 V# Q+ |arrtbox = tbox.options.text;3 ?, D2 ]* I4 r% E2 T: `* t
}  H6 a( ?/ ^+ d# {4 K7 S
var flength = 0;
/ \2 z' W. b( T, Yvar tlength = arrtbox.length;
% R1 I/ U, q- y& n/ kfor(i = 0; i < fbox.options.length; i++) {& o1 A  o% @3 c0 Z. [
arrlookup[fbox.options.text] = fbox.options.value;
" _9 z4 p2 t. w8 Z* A: vif (fbox.options.selected && fbox.options.value != "") {
" P; I6 X8 h7 b  j9 A* M; b3 qarrtbox[tlength] = fbox.options.text;3 g, o3 x' c* o6 `# G; L; |
tlength++;$ F8 d+ t$ ?/ ~* v0 q/ T8 A+ h
}
$ q5 ?# ?7 ?* t; jelse {
9 x3 ~$ y) B8 u: ?/ t6 barrfbox[flength] = fbox.options.text;: f! m& b& p  }; z
flength++;( y) L' ~, [: M4 f! }) h9 F9 W
   }
" _9 ?3 W: c1 u- s7 }}
8 B6 m: n/ G3 C! A* iarrfbox.sort();) a4 l) `* h# V9 U3 E' Y
arrtbox.sort();: \; F& J+ H/ H1 F0 T

' O9 w) M* _; ~1 ifbox.length = 0;7 ~$ b( f" r3 D2 U( Y$ ~( L
tbox.length = 0;8 k* `& i* e' `4 g
var c;+ g, O8 S" B$ z% I
for(c = 0; c < arrfbox.length; c++) {* X0 n  B# _% S7 f+ l
var no = new option();! M) s, r* v6 W- b7 J- Q
no.value = arrlookup[arrfbox[c]];
: B$ K! [7 S$ P. f3 ~6 ano.text = arrfbox[c];
; N+ q( W: U5 hfbox[c] = no;% n4 G0 s+ G# @* A/ v5 |2 g
}
" c$ w/ p; k$ E+ pfor(c = 0; c < arrtbox.length; c++) {
' d) k6 c$ v3 i/ Q9 a7 H1 O8 T7 D3 r: Xvar no = new option();
4 A7 R2 b7 E( t. R+ tno.value = arrlookup[arrtbox[c]];, \; h2 q/ G" h6 u3 i, |" G/ s
no.text = arrtbox[c];; [; ~/ H1 q0 Q9 X0 j' b
tbox[c] = no;
7 n, ?+ Q3 W" e8 K# k% h2 g; W* A   }
6 B4 y+ H5 y) l" o7 F1 r}5 }) {' h% R4 t( {% X+ N8 a. t
</script>, p3 Z4 W7 _* x, p5 b
</body>
5 N4 @! Z' }/ ~  {' G7 Y8 K





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