Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
# T4 [0 @; \+ p         c pageencoding="gb2312"
: M9 I+ l1 O7 f1 J/ w# X: y%>$ f& S+ `1 O- Q- a
<style>% Y! E3 {1 z, x, a6 D2 N" |
.f9{ font-size:9pt; }
" @* m( v" G7 K, a+ `" N0 O) M.bgc{ background-color:#aecaf9; color: #0033ff }0 A5 A! Q- _3 ]& O! ?
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;3 n- t2 Z; E0 M9 W' w5 ~4 z) l
  border-bottom: solid 1px #4e7dc1;/ \4 O  I3 B. I" y; a
  border-left: solid 1px #aecaf9;' `% z9 i6 q3 h/ {, }' q9 U
  border-right: solid 1px #5679bd;
+ N6 B, X8 f  ]  padding:1px;- c( s# D2 _* S8 }! z" U( w+ @2 A
  margin:0px;}
- U, Y& ?6 f5 S) g) g. i& Q1 C( V</style>. J; V, r7 L* H9 _
<script language="javascript">% H1 J, n  |) [0 ]# F3 U) l
<!--7 N6 G) t, W, d2 y: u7 ?
function rv()
6 t1 N: g3 @6 q/ C  ~) n& v! v, x{9 c2 x% f9 O' D
  var val="";; ?  E2 Y/ V) I, U8 b
  for(i=0;i<combo_box.list2.length;i++){" d, @+ N* K4 M% ~' ?! m, U" s
   val+=","+combo_box.list2.value;5 ~% r6 X3 W" g4 K7 k- z
  }! N& D+ e( ?) F8 G' }. b' p. P" I' V
  if(val.charat(0)==","){
5 e& s% e6 S) I9 ~+ |   val=val.substr(1,val.length);
4 J# A& x$ ?! R, q2 R& a! {  }
# M; c, e& O% N  opener.form1.frecname.value=val;
! B8 _9 I0 C3 R( |. h' u  self.close();
* s8 E; v/ n  E}
! ~  U; q" ~; m0 V3 }//-->2 B& ^4 W7 v, Q1 w  I
</script>
6 P) E  I# w4 B) F, S8 \<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
" o1 ~/ q9 T+ S( M- [; ?<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />2 j+ t2 \) C: w6 m& {
<%% C- C  J( m- S: x- w2 l6 z! e
  cdatasource ds=new cdatasource();  //数据联结bean实例- Y5 |5 o1 s) d" h
  java.sql.connection conn=ds.getconnection();
0 g9 i! `: J+ H  java.sql.statement stmt=null;8 c8 c2 d2 @+ b7 L9 j7 i
  java.sql.resultset rs=null;
8 _( z' G. e: S, q4 F# N& a  cdatacheck dc=new cdatacheck();
7 I* a6 `/ l" A2 |8 L+ R%>
7 n  _9 k+ v; H# l1 _7 f<%+ H- a8 s+ E9 Z7 Z( y# w* m5 W* 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";& v. e; Z9 S4 Z5 P, N$ m9 C3 |9 E: H
stmt=conn.createstatement();
3 b" S  p' k9 Q4 Qrs=stmt.executequery(sqlu);
1 Y6 R1 K, E+ E$ e%>
8 }! X8 I$ M' n<script language='javascript'># Z9 b$ s8 L( _' S
arr = new array();
  U: `) L, \! D# s0 ^<%  int temp=0;$ F/ ^' h# h6 @0 i( L2 ]( Y
while(rs.next())
% m( v' S9 |( U7 h5 @5 G{8 g# x" i1 F* q( o/ R4 O
%>
: z+ j! u3 @9 Parr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
5 c* f7 n2 Z, _) \  M% P3 U  O<%
4 ?/ D2 S) H" X: d! {5 j0 ^  etemp = temp + 1;& N1 O8 @* J2 F* X, x+ N8 N
}
+ z& V1 E- m) i& X: D%>1 b- a! F9 F- ^* s; F
temp=<%=temp%>;$ M, [$ U" @; {: R1 W
function changelocation(id){
! y- x; U, u$ r8 ~document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 1 ?- B7 a1 Y1 N& }$ J, R, V
var i = 0; 8 Y/ q, p' V! o. [5 s
document.combo_box.city.options[0]=new option('-------',''); 2 j/ z; p" ]3 M1 X
for(i=0;i<temp;i++){ ( `: t+ j5 `6 P
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
+ ~$ L* O0 b! o* J6 qdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); & U8 Z7 P+ H7 J8 R& A9 j
}
5 e  g: o4 p* M/ A! a' C}
* b4 H$ R3 m5 F( p& G8 \} % [7 O  O- J' a& v! M. f
</script>
! F( j) N0 \4 g3 L( b# \$ d; h& ^3 P& E# Z4 D7 k0 p
<form name="combo_box">
" J+ S3 N6 y3 g# X7 a' |<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
% }7 x- v) _6 ~' V0 t! N$ m( z1 e0 Y  <tr height="24">$ {' J# e, m" O" O& L$ T$ e& @7 M9 Q
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
7 h) H5 o! I- H7 `! F+ i/ n' j    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
1 s! @/ I: o  @( s  x    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>0 C# J, Y* d' |* x* Q1 G0 v
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
9 }! M2 b) o$ D  _& s: R8 G7 h  </tr>
3 X7 r, Z" z) `: ^. O- y" I  <tr> - N$ P0 J7 @( D; K- F
    <td>
4 V: s' G* _& g9 F7 b$ x  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
  [8 t0 k9 D3 N  <option value="0">请选择部门 ---></option>
0 n) X3 G5 C: j" k<%: a. ~4 |, Z9 C" p5 D
    string sqld="select * from tdept";
6 R- C+ I+ L8 i! T, Zstmt=conn.createstatement();
, o9 E7 h4 V4 F, @" krs=stmt.executequery(sqld);9 p0 Z/ h4 d' O" b
while(rs.next())7 ]* }! w5 @4 ^- t6 g( ~8 e+ ^5 \
{/ E+ c# w& K! R- ?6 }3 V6 Y) P2 W
%>
2 q; H( k+ Z; B7 S7 q  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
% G3 \& T8 `$ [7 a6 T) g<%
+ J( M1 C. J, T, ^. x' s/ m}
9 Z5 x7 b# b3 T& K' Y8 P: |' {7 k%>
% P- ~' W5 _+ F2 j  </select>6 B# X0 {+ {& f0 [6 [
</td>' N1 [5 i6 t% W6 @3 K
    <td>1 e2 }3 s3 T+ I4 T, T+ u
  <select multiple id=city style="width:150;height:200" class="bgc">+ x4 h8 \! K9 N. B4 r4 G% ]
  </select>
4 u. N0 \5 P# T1 ?$ H3 n* L- G</td>2 ~1 n' k1 t% H1 Q' ]
    <td nowrap align="center" class="bgc">/ _5 Y& H  K8 C3 X
  <input type="button"  value="<<" class="buttons">. k) o: C9 |, _
  <input type="button"  value=">>" class="buttons">( t- K: G1 H; z- I6 d5 F, J! j0 g
</td>
# b2 S2 y; v- ~9 `3 P& ?    <td>
5 l+ e4 y* E& k: w. n8 f2 x7 P5 }  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
" k3 l. `; I8 K# ]" X  </select>. ?% \, [; r8 {) h
</td># U9 Y6 `5 }( y( Y
  </tr>
: D7 d$ P2 p, w- y1 u3 o% b    <tr class="bgc">
% q, [, K8 H7 E. `    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
, ^- o- e# X- e5 r. S* U  </tr>
: {  D5 n. G2 G( E) x  F/ ^</table>. ?" G3 c' H: a; \
</form>$ c/ K& K& [" Y, [" i
<script language="javascript">
3 N0 D0 Q% K) ]7 `  d, U3 I//人名移动
' y$ D  w* d! \% D9 \1 lfunction move(fbox, tbox) {7 y5 E" y# \) R3 L1 a% }# \
var arrfbox = new array();6 D0 f1 k# c6 j
var arrtbox = new array();9 I9 l) k6 F' n4 ?5 ~) L9 h) m
var arrlookup = new array();
  J0 W+ t) F# qvar i;
; R6 Y- [+ u" I$ efor (i = 0; i < tbox.options.length; i++) {% O  ~# f$ B: r8 [6 Y
arrlookup[tbox.options.text] = tbox.options.value;
. o7 F% a0 ~5 E) a9 F0 U& larrtbox = tbox.options.text;
( @" E# I7 Z& Q/ z; p* T}( @6 y8 V; x) K  C; t, X
var flength = 0;
% R6 r* O! Q. \$ X" b1 @7 mvar tlength = arrtbox.length;
/ P# y. W1 t2 l* M  F* ]; sfor(i = 0; i < fbox.options.length; i++) {
1 f/ q0 e5 f8 }" F' z" }8 _7 N' f* _arrlookup[fbox.options.text] = fbox.options.value;! P6 Z& ?5 D6 J( Z  E
if (fbox.options.selected && fbox.options.value != "") {2 l# N& t6 g# z6 t% y
arrtbox[tlength] = fbox.options.text;
+ N: y' c% Z  b/ Q1 G7 j$ S/ J3 rtlength++;
4 o4 _) W% ?4 B}0 N! K* J6 g& g
else {8 N# v" p. o1 ?- L0 f
arrfbox[flength] = fbox.options.text;
: @0 t. B# R1 p& M- f7 \flength++;' i( H; p& \6 q+ q
   }; F! e. C; G) d" e$ U3 g
}: E' }6 F& @  i/ W2 f$ {6 I; \0 i
arrfbox.sort();3 F/ C" F3 p$ Z. j  G6 S, p
arrtbox.sort();" V9 V# }, W; f. b4 I, E

9 p3 [! p, F2 E: ~9 S) ~fbox.length = 0;
4 v- B: z4 q& K  Qtbox.length = 0;
2 w: O7 B" S" k/ c/ M/ A& t  g7 @: T: Dvar c;
9 Y, X. ~, _  P' L4 X; H- Bfor(c = 0; c < arrfbox.length; c++) {
% W% H) B  ~: I* wvar no = new option();
$ ~* `3 t: @+ p- M  c3 `0 uno.value = arrlookup[arrfbox[c]];
8 @% q8 \8 Q; V$ B5 Mno.text = arrfbox[c];5 g! v  q5 f) f& Q
fbox[c] = no;
$ H4 C: z+ ]% e$ f4 z9 Z. z; _# d}8 e! n: `- f$ G4 Z4 Z% t/ q
for(c = 0; c < arrtbox.length; c++) {
1 A4 L! |6 u  o7 y! D! wvar no = new option();
; N" ^; c- Z2 `0 \no.value = arrlookup[arrtbox[c]];
- c' [6 P9 m) A0 H3 ], A/ Tno.text = arrtbox[c];3 R1 s. l) C. T
tbox[c] = no;
3 ~5 C$ F5 O8 c4 n/ H   }
  a& W/ ~8 @7 ]" m, w. S3 V}, @, s6 N/ o! w2 F
</script>9 |: _4 d  m2 m
</body>6 z& g- s- s6 ~2 H





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