Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;": `) I2 r7 H+ q0 d
         c pageencoding="gb2312"7 }) q5 b. ~' v
%>4 F$ a% m" l& I: n2 I* r: k% n3 W
<style>5 x. I) g5 X& q& O, H5 _( u
.f9{ font-size:9pt; }8 Q' B' X, S' C5 M' F+ ?
.bgc{ background-color:#aecaf9; color: #0033ff }
* d4 s& `  E2 l; f- c  ^% u.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
% X# }% ~) H/ `/ j( @7 \% b  border-bottom: solid 1px #4e7dc1;0 _" L4 V( R5 L8 [
  border-left: solid 1px #aecaf9;
0 ~; Q& s4 u+ v! d  border-right: solid 1px #5679bd;
$ T" n2 u( F) c! L. |5 ]# C* I9 Q% B2 ]( g  padding:1px;9 I4 z5 C1 B1 T1 F9 l7 y0 G* S0 L
  margin:0px;}$ P% v9 \/ Y% E' E9 \0 P1 t& s9 H
</style>% f+ m9 `: ^! M+ v4 K
<script language="javascript">3 H/ P- @( E) X8 y: z  i' n6 C
<!--
$ d2 W$ @5 C' r# E- V* c' I: ffunction rv()
: a, `) n: ]4 P* M6 v; ^" T( Q{
( t3 f7 i" T3 p5 ], Z0 C; J8 D  var val="";
8 [$ L5 K+ ?: n/ z; ^) |  for(i=0;i<combo_box.list2.length;i++){
" J) @+ t% r$ o$ o+ d+ m$ b" |   val+=","+combo_box.list2.value;
& f5 x: J9 S' E# o/ _7 }, v) r, w. f  }
- l. l) i) P  G, Y' N  if(val.charat(0)==","){+ x- Y  }+ d- L+ ^6 t: [
   val=val.substr(1,val.length);
1 M5 h# P: y% Q% V) Y% W  }
- U' \) k! D% I  opener.form1.frecname.value=val;! i6 w1 N. u. k
  self.close();( V3 _$ v6 f) V3 K' V9 Y& S
}
1 \3 |5 g& Q. Z- d1 U//-->
$ p! r: y. B" a, i# {4 j- q</script>2 Z3 A# Q0 F4 Z& w
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">- Y. P9 E$ R8 i/ \, v0 G
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />) A5 w% I, ^0 w( o/ }6 m8 f0 O
<%
9 s- N/ B9 |2 |1 {$ }7 H$ L0 X  cdatasource ds=new cdatasource();  //数据联结bean实例
/ d+ ]! Z- k4 t% U7 ]  java.sql.connection conn=ds.getconnection();" P1 ?: k% e1 h4 v! |1 U4 t  H, g  I
  java.sql.statement stmt=null;5 U9 ]0 ^. q3 c2 m4 i  E
  java.sql.resultset rs=null;
- Z8 c* Q* v0 y' \, ~  cdatacheck dc=new cdatacheck();, H: q' w. h& T& y
%>
1 ~# n2 u: L9 \5 |; _, A<%' y. Q3 x- H: b+ e2 M$ w
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";# A5 l8 d. T. m: [
stmt=conn.createstatement();0 I  E1 V7 m6 M0 `3 {, o* d0 k
rs=stmt.executequery(sqlu);
7 Q0 j1 T0 G3 J" w; N0 b%>
3 q9 ]2 {: y5 m7 O# [# }0 B/ f<script language='javascript'>" _; P2 T8 E$ W$ S
arr = new array();
5 h3 |. b3 O, N8 N0 \* G2 K0 p<%  int temp=0;
" V6 J! g( L/ Q: N- {while(rs.next())
1 t8 {' g, i4 `" t, U3 j{/ x4 ~. ~4 k! w7 n9 ]
%>" d+ v% @' {+ n" ~
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");8 D3 z8 J) E3 R' J1 E1 R- w4 O4 Z
<%/ ~, D" E: }; q
temp = temp + 1;
/ s5 f* G+ ~  o6 S}+ J5 f, {: d* M" {8 Q; I. g/ M# E/ v+ y
%>8 _8 j( s. ]' L5 Q
temp=<%=temp%>;# y5 \9 _" I  [& g  m
function changelocation(id){
' {# k, n8 h0 B, p' N) i& edocument.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
5 `" C- r2 S, Yvar i = 0;
4 e8 a9 \5 N. {% `) ?document.combo_box.city.options[0]=new option('-------',''); # f' W' v/ P$ V, L/ |
for(i=0;i<temp;i++){ + b, i6 ~) ~- S( T2 V; h% h
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
& ^1 |+ A+ s% I  l: Sdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
% W- t5 l% w: \, C8 {) y' N' S}
5 Q. ?! L- v6 k1 G} $ P0 s7 L7 q; N' N2 z- f
} ! f. p: e5 W# o" U- J
</script>
/ @5 r; d3 t) T0 x7 f9 J/ D* |  Z
2 T8 K( @4 |/ \2 F/ g% h5 ~<form name="combo_box">
8 ]8 Q2 Y5 L9 o<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">: b2 V  ]5 o1 C6 }' B
  <tr height="24">
+ {1 s" G1 n4 g$ K7 C: Z" S    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
# P! o, x% n' J    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
- e$ b6 w5 X7 X    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
0 G  A- f* A  v6 j    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
# j) p/ s. z3 D4 c9 t  </tr>- Z9 w4 ?9 X/ g4 x5 |: S0 s3 V
  <tr> : o1 t+ t/ i1 ?" E  B6 f, y6 Z
    <td>
* ~; _4 t& A  P4 l  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">% A5 E% a) y4 e' C+ v
  <option value="0">请选择部门 ---></option>
1 Z" }( ~' q4 ]' A<%, S/ [( i4 f  @; |- B3 T) H
    string sqld="select * from tdept";
5 b9 U  h- F7 D1 G1 mstmt=conn.createstatement();
  \! Y0 x8 a2 A- {  M& N/ S! Q6 yrs=stmt.executequery(sqld);+ B* c  x# X' P0 I. ?
while(rs.next())3 j( Y8 J( V+ `8 z, T  |  V
{- a0 i1 D$ V7 i& c/ P. S& j
%>" h5 |, ~, i+ `, x
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
( w( p: {) ], }* e<%2 r* c; {/ i" R4 {: H# `5 p
}
/ h! v4 L/ h8 |: N. r% U0 f%> ( p7 d% Y6 b2 M- m( ]& @
  </select>
6 ?% R( Z1 r9 g, `) x& j</td>; g7 e% z5 s, Q
    <td>
' B. Q' G2 ^  c  <select multiple id=city style="width:150;height:200" class="bgc">% R- C5 e* {  \; L! `1 h/ B
  </select>. x4 Q3 t; j2 ]4 D7 j; p
</td>& X5 |7 f) b( Z9 N# X
    <td nowrap align="center" class="bgc">
' g/ Q& U2 G5 l5 }; b/ i  <input type="button"  value="<<" class="buttons">; y4 U( `7 D- n: V* u# |  P5 b
  <input type="button"  value=">>" class="buttons">
6 o: L' g% Y1 k- ~</td>1 B- Z' W3 n! C% {
    <td>
# h( d3 U. a2 |# H  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">& I5 D  [% ?# |5 X
  </select>
9 H# U% [6 F( u- {( l/ C) I2 h</td>8 a: r9 ]; h. c; [) a/ o8 O
  </tr>2 F' X" S0 w5 x
    <tr class="bgc"> ! {- E8 D, u* R) m  g7 t8 b
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>% S0 {9 S% U, c8 Y+ O" S& [
  </tr>5 T; [6 x6 X& g3 \
</table>
+ {8 H4 v4 T& V& i1 Z</form>+ {* [: J2 Z/ l" O$ [5 Y0 H6 g' v
<script language="javascript">& ~# _* s( a# \1 g6 y
//人名移动, F. j/ j% R! W: P5 x  w
function move(fbox, tbox) {* T0 L! U* w4 i9 z7 t
var arrfbox = new array();
! }2 X* O  U  E+ s' R2 Hvar arrtbox = new array();& Q4 w2 V. s, @: L% q
var arrlookup = new array();
& _, V0 a6 S6 ]2 n8 G; {+ a' Ivar i;2 ^% N5 m' M4 ~: z% m, P, z
for (i = 0; i < tbox.options.length; i++) {
4 O7 e4 J4 }9 p$ q8 N% p2 Iarrlookup[tbox.options.text] = tbox.options.value;3 N' }% ?" U* B. _( J2 Y
arrtbox = tbox.options.text;
5 |" s% R' M! ~0 ]7 V}
- L* O- E; t! j+ Y3 K  uvar flength = 0;, h# j5 d! j( W) x8 e+ P& b/ h* E
var tlength = arrtbox.length;) u3 W! q* r9 K0 K" A
for(i = 0; i < fbox.options.length; i++) {
! y* m- q/ v+ j+ `8 rarrlookup[fbox.options.text] = fbox.options.value;
* k  W( I3 t* t7 ]1 j0 Z. Z( f+ |if (fbox.options.selected && fbox.options.value != "") {
$ F! {$ H! ^+ N' K1 karrtbox[tlength] = fbox.options.text;
: Z' m$ d" ?. f- D2 \7 stlength++;5 Z+ |5 Q. Q$ Z. A. F7 B  f
}/ S0 |8 \1 U/ ~3 P% s
else {
! E' W1 C+ Z0 r) U( Narrfbox[flength] = fbox.options.text;% e: s: h8 k3 F$ Q) v: u
flength++;* A" k( |/ u8 \4 g; Y
   }
; r) c7 s" M4 |( M6 c7 `! T- H}
8 D$ x2 i5 b" Barrfbox.sort();& @: x2 o$ N) B) S
arrtbox.sort();. ^4 J" s2 A! V( x7 [  X: B3 U
1 W! S7 [3 ^6 {( q# I
fbox.length = 0;
, ]% M5 H* K% }2 C2 Q1 ttbox.length = 0;
3 E2 v) U, f  ovar c;5 y  h7 B# E2 g! Z* ~+ O3 v5 E& S
for(c = 0; c < arrfbox.length; c++) {! ?" |& C+ E0 D5 W9 T0 y
var no = new option();. B; f/ J$ S7 b" z# X; y
no.value = arrlookup[arrfbox[c]];
9 O8 `" ~! E" |+ P) F9 r5 dno.text = arrfbox[c];% `" d/ f) e) `! d- R
fbox[c] = no;+ [8 r% `$ l4 b: _( |6 J
}5 M& ^! l3 b" f- y
for(c = 0; c < arrtbox.length; c++) {+ w) N& E6 d: _$ R3 _! P
var no = new option();
+ n9 ^  W0 ?7 P* P4 D  \! Sno.value = arrlookup[arrtbox[c]];
- {8 ^+ i* ~  E5 a/ O1 xno.text = arrtbox[c];
7 X) x/ ~2 M  ntbox[c] = no;
9 i3 s0 C% G( K7 L, P% h   }  P- W4 w- H4 J+ U! I
}
# }& m, k3 c; z4 j</script>( V+ g0 [( w' k% v# N5 |# o! Y5 v
</body>( x. t0 \$ w8 i* X) _- ?- X5 j& l





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