Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"" n3 c' X" Q" B, F0 @
         c pageencoding="gb2312"/ y, B. s! z9 w2 f. [" L/ t, E
%>
: P. B+ M; a0 @. m* _<style>
/ Y  `8 D! S& _  q( t.f9{ font-size:9pt; }1 @- N$ j' Q5 Y0 H. b) }- j; X
.bgc{ background-color:#aecaf9; color: #0033ff }
5 G) Q+ D* ]( I.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;1 X6 U) f6 p/ W+ h
  border-bottom: solid 1px #4e7dc1;: N  r6 C+ D) G- q* S/ U* A
  border-left: solid 1px #aecaf9;
- H( n% Z9 ?) r5 Q4 Z  border-right: solid 1px #5679bd;
7 M7 d1 z, A9 o6 k) C" j. P  padding:1px;  c! L& Z) ~9 {: V
  margin:0px;}
; Z5 S  I! A3 d7 G# c/ f</style>
& [* w5 p! D% {! |+ A<script language="javascript">4 S7 ^" k' G9 \! t; m
<!--* X% o( q. Z0 s' `5 r
function rv()6 d; z+ t. ^( P) a% t5 X6 h3 c! }
{4 i3 V, j; m& F, J
  var val="";- J2 P+ F, o- G
  for(i=0;i<combo_box.list2.length;i++){
# D8 m: O& K! B5 f! Y# ]5 i# a+ B2 E' d   val+=","+combo_box.list2.value;  o- z1 r3 v7 ?
  }# d( T8 D( n, \7 Y
  if(val.charat(0)==","){
5 j* n3 J* A9 F8 @% F; d   val=val.substr(1,val.length);
) u8 K3 V  q' W) h+ Z' i  }0 s- M9 v' H, ?8 E3 g
  opener.form1.frecname.value=val;/ E: J. R+ [1 x3 f" d
  self.close();7 j! r2 o2 g" m) g8 X) ~( a
}
. x& k- w# h' j5 ^//-->
2 V$ Y) c8 ]- j7 P9 v% i4 W</script>
! G8 R. }! p# n# f<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"># S: F: p. C# P4 X8 O' T7 }$ `
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
% u# ^. d0 |8 J8 k<%# _2 e/ t+ p0 D. n; ^8 t
  cdatasource ds=new cdatasource();  //数据联结bean实例
  W! A8 J8 a8 e& T" n7 s  java.sql.connection conn=ds.getconnection();
" [& m1 {# M+ E& G% `; @. P  java.sql.statement stmt=null;2 i0 W! O( W- f" P5 s
  java.sql.resultset rs=null;
4 H% E$ m- N* h7 C7 W  cdatacheck dc=new cdatacheck();, T  x( N* u3 L6 Z- x4 B
%>
8 a! b, A4 m7 c5 k' n4 s<%* r3 b- G: ]- Q6 Y  ~
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";
* `: O% |  N1 Q& j) _$ h6 `. r$ H& Jstmt=conn.createstatement();
  l9 o# d7 Y* v" y! R7 q3 u7 Q/ Ars=stmt.executequery(sqlu);. T9 C/ Q7 j" G9 M# X+ j+ w) A
%>' T- `$ J5 K3 h9 ^/ z
<script language='javascript'>
' D  ]0 f+ ^+ marr = new array();
" T/ M# Y6 i: @8 J<%  int temp=0;$ H, L) l6 s) G+ w8 |
while(rs.next())
+ b) X' Q, ~: Z+ d# G. h9 E  t* i3 @- ?- n8 Q{) e- k5 I- a, M/ ?# y4 }# i
%>
0 N: B& V' ^- O; p( iarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) f3 L% G, ~* Z. Y. k<%
& ?3 h8 n& D% N( _temp = temp + 1;4 S' d% K) u# B) _, L
}
; V- A9 `( Q9 b$ s; D0 d. C( a%>8 C: c$ s& K2 H. K4 G
temp=<%=temp%>;
- w* A& D6 N2 I2 pfunction changelocation(id){ # G8 c/ M7 d% p* r# b7 e7 D
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
) D. t- t" }; gvar i = 0; 6 }& ~: Y/ H2 V$ ]4 h
document.combo_box.city.options[0]=new option('-------','');
2 L2 S0 a" p, a/ j, w9 z2 Mfor(i=0;i<temp;i++){
: f* b& p1 B- |: g4 S+ E( rif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
- d$ D6 _! W/ R  U5 wdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); * Q8 y* X# J8 l4 v% B
} 3 {+ w) }- q- H2 c; M- H' a
}
2 ^- A* s. R  S) F: _3 W7 C} 5 G( N5 I% [8 X2 L5 i
</script>8 \' d# y3 a; i' v3 P- w

2 W/ ^& @# Q7 E# ?  e<form name="combo_box">+ R7 t- U/ e: R3 E
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
- y; |6 T* `4 `$ p) I$ q  <tr height="24">& L2 f# }: l( a, d. R3 c7 O" ?
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>( w8 C* Y: N5 b1 Z& W' C- @+ Y3 R
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
- A( e( L- F5 F" j7 l    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>6 e! A4 j5 n; J/ ]/ K' D
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
7 K5 ?% o' v! x/ x) F  </tr>. ~5 ?& x+ K' B
  <tr>
/ R" N' C9 n% ]/ J    <td>0 T- R9 _& j/ [% X2 ?/ Y( O3 f
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">6 i. Z) u4 {3 {% A" K8 w
  <option value="0">请选择部门 ---></option>
3 b: u4 l. {0 R. u" I5 A<%
5 M& ?7 i0 a5 T3 {$ s* I+ i# {" P    string sqld="select * from tdept";! y4 i; V4 Q& d9 X" `2 N
stmt=conn.createstatement();
5 \6 n1 X4 [7 j# N2 ~; e  lrs=stmt.executequery(sqld);
. ^' M, b; \3 H) q4 h( m0 ?) }while(rs.next())! a  E" D: n, k: C, ?9 P/ r  ]
{5 S. M! b" H) Y
%>
  u, I9 L0 G+ g+ n. V7 ]  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>. ~* @$ R4 T0 F: G3 T
<%
6 m$ u5 B, u* r' }}, _$ x* ~# r4 o! J7 [$ L9 v. t% m
%> 2 n; U. a( L8 v' O
  </select>) `2 {) X6 g: _& m0 \, @% S
</td>
7 L6 n- C6 M" o8 h' w    <td>  M  n  p, y4 Z( C% r& _  x! n
  <select multiple id=city style="width:150;height:200" class="bgc">
2 M) A  k$ |% i5 {% F; j- V  </select>
, S" q. [' v$ n</td>
$ f' m0 g3 n- \8 q    <td nowrap align="center" class="bgc">5 D3 }3 K2 W8 \  r: F' _
  <input type="button"  value="<<" class="buttons">3 p# C0 [" C8 k4 @" m6 z) N* a
  <input type="button"  value=">>" class="buttons">- K# m6 t& p% f
</td>
5 T( P, {) O; _8 T8 j; m    <td>
- A' C$ R+ F% I9 A) T! r  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
! g$ l* z+ i* l5 l& G0 X" K  \  </select>( `' I& u, j1 \7 t1 k
</td>! @2 @/ c. e$ d0 L& \" w
  </tr>& q, a+ |6 o& U
    <tr class="bgc"> - }+ A" Z* ~* @" i& a
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>! J/ g6 D8 o  y" |$ I( N( \
  </tr>; V* E, \# d6 Y! F) k3 I8 j1 j
</table>
3 J, {6 P2 v" _$ k5 U. S</form>
) Q: J+ v! ?5 y<script language="javascript">
# ~) ~6 w# O( V" Q//人名移动
/ C' {! Z7 G1 t9 b' tfunction move(fbox, tbox) {4 Q/ Q8 ^( r4 ^% J
var arrfbox = new array();5 ]2 y3 B' X5 V( |
var arrtbox = new array();
2 B- @1 M: Y& D0 V) |: S, ]var arrlookup = new array();' B" d& P# |* T$ ^/ [5 B) ^
var i;
# t# s9 f1 b$ U7 x, Ifor (i = 0; i < tbox.options.length; i++) {4 F  ^$ i8 B* x& g. S4 R
arrlookup[tbox.options.text] = tbox.options.value;8 _( E9 n; A& A9 R. \  ~  a
arrtbox = tbox.options.text;
# H8 t* a+ ]' \6 o" a}* F; P3 e2 Q2 [. V! |
var flength = 0;, F$ D! V) k9 j: e: \
var tlength = arrtbox.length;
; p' p- C! `( t5 R; D+ Sfor(i = 0; i < fbox.options.length; i++) {* @. n- n7 X# [, m; v
arrlookup[fbox.options.text] = fbox.options.value;
2 h0 {" P: _' e7 [' Bif (fbox.options.selected && fbox.options.value != "") {" U' o& {: u3 e: c% t  L% Z, l
arrtbox[tlength] = fbox.options.text;
+ h% O' g! F* [) l8 Etlength++;* {) l. V2 L* V' c
}0 y) t( ], p0 }+ X7 R7 _9 D
else {  X6 \) \' s7 b
arrfbox[flength] = fbox.options.text;
8 z9 i2 A) R; k& {. ?1 M" b$ O9 {flength++;
& n; e! a& u0 L' q1 M. T2 [   }
# z7 t- V, a. c1 E( G. N! r# W}
) r3 G: E. X6 a0 m5 W3 {8 Iarrfbox.sort();8 f* E; W. \; P6 q0 g' ?8 i
arrtbox.sort();
1 X6 u- [2 S* h$ }0 w
6 d; p( k+ }2 Q6 \) lfbox.length = 0;
8 [% J* w. v8 W1 ]7 i1 E+ [6 _tbox.length = 0;
9 {0 ^+ B( ~+ b1 T$ |var c;  D  N; l  t; t
for(c = 0; c < arrfbox.length; c++) {
! F* m+ z( b6 G! h0 Z; [var no = new option();
* h' |# `0 l- U1 uno.value = arrlookup[arrfbox[c]];2 h8 u0 j& ]2 K' S* [& X+ ~
no.text = arrfbox[c];$ \0 h1 j' Z* C; ]/ o+ u# c4 @
fbox[c] = no;
. R. _$ s' i8 q2 Y# m; @8 `  |' M}
! `' ~/ U- X8 I+ S; [for(c = 0; c < arrtbox.length; c++) {
! y6 F( h) S' X1 vvar no = new option();
: P8 X* q0 W3 m1 ]( Hno.value = arrlookup[arrtbox[c]];
) v6 n/ a+ K+ k, Uno.text = arrtbox[c];* q- @  A, Z) g7 K4 D9 Z
tbox[c] = no;
- C* \/ y$ N6 _: K4 N   }
$ Y  b0 C4 o- o* a( a1 ^}
2 y6 y+ L* U% x/ S</script>, H& m0 A; N' A* Y9 o( D
</body>! V9 c% p- y$ [' ]4 [, T) j





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