Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
% v% f2 O2 {& ], v" ^# }6 {         c pageencoding="gb2312"0 q  D$ Q; ^) o" y/ g2 N
%>
% T0 F5 ~, c) X/ o3 v" L. r<style>* M+ z2 b& s4 I) g
.f9{ font-size:9pt; }, O7 S/ |& Y8 S/ X4 e3 R8 O, w
.bgc{ background-color:#aecaf9; color: #0033ff }; J9 H; c6 D8 q9 e4 ?2 t
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;7 p) h: o, E/ A' y+ o9 M
  border-bottom: solid 1px #4e7dc1;
0 B* E2 S' \( X/ p; F0 Z9 d) p4 o+ f  border-left: solid 1px #aecaf9;
! n# {# _# N1 E6 d. f  border-right: solid 1px #5679bd;0 e1 Z+ [" H4 d/ m! }
  padding:1px;# I7 N& o$ q; H- t
  margin:0px;}4 s7 g; ?! J2 c; v; z
</style>
5 l9 L  `& b, B7 V0 }5 A: w<script language="javascript">0 n" N3 P8 k  D  W
<!--+ F2 H9 o3 x. P) O- W# q2 r* E5 d
function rv()
, {5 a; T! @9 G3 Q# @{1 _: h0 L; {" L. b/ x* Q, E
  var val="";
0 n: d! ?9 Z9 o4 z; B  for(i=0;i<combo_box.list2.length;i++){
+ U4 h  d9 k9 {2 H; f' Y& U   val+=","+combo_box.list2.value;
7 O" h" c6 E' t8 D% k% ~  }6 z3 a" @( p9 y% D5 V
  if(val.charat(0)==","){9 x+ \$ Q4 P- ^& P- ^( ^& ]
   val=val.substr(1,val.length);
) ^) [4 w+ J" B; S! ]) B: @4 Z  }& j) Z( E- j& [
  opener.form1.frecname.value=val;3 y, y7 b# w7 Y0 M
  self.close();
+ {) W3 p5 i/ d6 i}
3 z" }8 y) ^' F( o5 l- R//-->) w! y# h/ f: ^: _: G8 J- l
</script>! F/ B/ y" m6 L3 T9 S' K( w
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">" u3 b5 P* j: v0 O* e: x
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />) K- a4 _! c# K* V) Y
<%* T: T  j9 {) m: I, D
  cdatasource ds=new cdatasource();  //数据联结bean实例) B7 G* o! l, ]# a4 B
  java.sql.connection conn=ds.getconnection();
3 r8 V* V3 k; ^* y  |$ Z7 o  java.sql.statement stmt=null;
# }5 M) b/ ?! Z2 y8 H  java.sql.resultset rs=null;4 B( S% Q2 l9 y, s
  cdatacheck dc=new cdatacheck();  j7 m4 Y& x9 k: D% {: f
%>  p6 k6 Y6 ^) ?) C
<%
9 P& L4 r" _1 d5 o. f/ ystring 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";3 o" y  d0 u" G- z0 L& p2 o
stmt=conn.createstatement();
5 ~* S, e) t$ q0 V" o- zrs=stmt.executequery(sqlu);
) B0 E, @- w7 {2 X%>4 u7 b  V4 k. g+ x
<script language='javascript'>
! l8 V/ I0 }8 n, Y. Z8 Z8 ?/ A% carr = new array();
5 l: X" c# U2 q) o+ ^, o, M' e* E1 s<%  int temp=0;6 s& v! D# u% }  ?$ H
while(rs.next())) O7 R3 B% h6 Y! b1 m6 O. t9 K' z
{6 B0 t* C4 x' J( {4 {
%>+ r  \9 V+ h: Y: G
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");4 {0 Q  s/ B' @7 Q" ?! h
<%7 Y+ P5 ~% r0 D7 M, u/ r+ l1 P6 C
temp = temp + 1;! c. a8 v7 d# N! a) J! c4 f
}
, u# d  R) q& ]1 K6 K$ @1 g; z! B%>- P6 [) ]1 }' M# s: m& D* c
temp=<%=temp%>;
. L* Q3 M! F- I5 U* d3 ?function changelocation(id){ # g  x: W1 [! F4 s# h' G
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始 # i3 }) |: v) e8 a1 Z
var i = 0; & f  `! s# u) P+ T
document.combo_box.city.options[0]=new option('-------','');
3 L6 `5 F. ~8 L1 v" afor(i=0;i<temp;i++){
6 E! `3 b; K6 S( B) c* h7 [$ R+ Sif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
& R: Z6 D# b; V2 g" A  [1 Tdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
8 _* Y, h, k3 f+ _- K- T}
3 \/ w2 f2 c+ v: z, V}
* _4 @7 x; ]7 H: `/ `}
: X7 c/ [' d* G$ F</script>
2 a! P* s1 \* H  z( A8 G
. ^2 `! k# l/ L<form name="combo_box">
1 m) d; Z/ S6 H4 U<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">1 W: r; z5 d* I3 B
  <tr height="24">- r' o$ v0 g6 _; @" m3 Z
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td># u4 h- l2 b" H8 [
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>% D  m6 Z6 ]; E1 T' ^  P- ]
    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
& U/ C) Q: r# R! i1 a$ |    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
4 `: h' {/ ?' B7 [7 w+ s  </tr>" |; f& O+ S" d  e$ Z% Y
  <tr> # k2 c& S9 S0 J  e! t
    <td>
3 S  V7 U' Q9 ~  k8 y% v  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">: I9 ~  O7 m/ o- y( T% G
  <option value="0">请选择部门 ---></option>: T( p! N+ b7 z  A
<%
3 O& r& \( ]( n, n+ @  _" w2 o    string sqld="select * from tdept";5 E+ N0 N8 A, b
stmt=conn.createstatement();
1 n8 ~, z2 P- brs=stmt.executequery(sqld);
3 P8 X6 u  s- o) v: X7 j6 dwhile(rs.next())3 b6 T1 c* h$ k3 J- S5 g' y0 e
{
  x5 ?2 L' L8 e: z* ^%>3 |6 y. b* r! K4 D8 b
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>( s$ H, F+ j7 J' C
<%
8 ^: X: ]5 P& {7 d% T) M}
, ?; I: f7 m" Q5 |) l% l, l4 s%>
2 [. `" |2 A+ E3 {  ~' W$ e  </select>7 r/ `0 R" F) p" |+ G" {
</td>8 m1 N3 x& Z6 R3 t  J! x. j
    <td>
! m2 H! [8 p" L1 x& t. Y  <select multiple id=city style="width:150;height:200" class="bgc">
* K( s9 u, y+ b& s  </select>9 E& [2 ^: ]  o6 f
</td>
, W/ A7 w2 `5 F* ]    <td nowrap align="center" class="bgc">$ p+ [6 E( V2 s: f; s* R8 X; h. T
  <input type="button"  value="<<" class="buttons">
3 p: t2 \) r- D4 S7 ^; Y% R7 {  <input type="button"  value=">>" class="buttons">
  ~  f- @3 ~4 L* g2 d, o7 ^</td>
; N- P" J: [6 k& S) l    <td>' s' z  O9 ?) G& k: l
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">) s0 H$ P5 A/ p5 I8 v6 n0 v7 h& g2 F
  </select>( J+ @% d: J) s( C4 x+ E2 l
</td>
" P9 l; h1 o9 ^1 c  X  </tr>
, }& W. y" ^' e$ v    <tr class="bgc"> * h, U0 a4 _& [: L  N( |
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>: g1 V& E' i1 Z) H# k
  </tr>4 n5 e7 ?+ o8 i
</table>2 T5 U9 |- m0 ~9 I
</form>) Y0 V: |" u' G8 o+ m6 o9 I6 C/ |
<script language="javascript">( O6 y8 @" x: d9 g2 z1 A
//人名移动6 K' Q! l1 W4 U9 \: s  L- q
function move(fbox, tbox) {
- M3 K; i( ~$ g8 p  ^1 y# n1 Xvar arrfbox = new array();
) _- V6 U! P( ?& Svar arrtbox = new array();
3 M8 a6 W5 u1 c$ ?/ ]6 p% c! {var arrlookup = new array();% v5 }7 H% L7 Z1 m
var i;
% E; w4 m4 T3 u; G- J  sfor (i = 0; i < tbox.options.length; i++) {" J7 i7 J/ O; I2 t" V7 e  Z
arrlookup[tbox.options.text] = tbox.options.value;5 Q" a5 y7 n: R. k6 M& ?9 F3 l
arrtbox = tbox.options.text;
; G4 Q0 I" |5 C( H& N0 X/ U! g2 Z# N}  b5 A! d; M) z
var flength = 0;2 X. i0 G  Q. N: N( }
var tlength = arrtbox.length;
  b" C2 s  w3 d4 Rfor(i = 0; i < fbox.options.length; i++) {
' _$ O" |. {' Aarrlookup[fbox.options.text] = fbox.options.value;" d/ [- B) j" W: o0 R2 n( e
if (fbox.options.selected && fbox.options.value != "") {6 v7 c8 m! Q1 b% b& {: n5 t2 y7 E
arrtbox[tlength] = fbox.options.text;3 Q2 V7 s( a- {& D, k
tlength++;
; {5 d0 d) A+ c6 K) ~/ h}4 P9 o. n. ?2 [* }
else {
2 J( r; M- \  B/ I5 K/ Narrfbox[flength] = fbox.options.text;
" Z+ x5 z/ [" d& R5 o* ?* gflength++;: V+ u# A' Q5 e/ X0 Y% c! E5 t2 Q
   }
% G4 z  n$ h$ C# E* R% t2 j}
6 Z9 y. W) u. [+ n: G1 E+ _arrfbox.sort();
: q/ _" n! k4 B# H$ G' Parrtbox.sort();. _# ^! Q- R( G) V& y. x
. A1 M0 P  T5 g* Q3 P1 o* N; D/ T
fbox.length = 0;+ F. }3 L5 E4 q
tbox.length = 0;% L6 a0 w: B& }" A7 y, G
var c;: W6 s$ M( d4 a5 ^
for(c = 0; c < arrfbox.length; c++) {
* X8 q' E2 D$ K1 [var no = new option();
) p" Z2 j4 U* B* W! @* ~; lno.value = arrlookup[arrfbox[c]];
0 S" s( j5 _$ ~. k4 Wno.text = arrfbox[c];
* P3 m6 j0 X# o! `* w# s6 o' Yfbox[c] = no;- N$ d7 S& b1 `& m5 q' \
}
. X: S8 J; ^1 c6 Z3 \) J+ X: A" p5 Gfor(c = 0; c < arrtbox.length; c++) {
/ e% X7 ]9 m; X  ?var no = new option();8 J3 h5 ~3 `: N7 x
no.value = arrlookup[arrtbox[c]];
* S8 ]$ {) J$ M% C  h4 q7 l! uno.text = arrtbox[c];
2 E# }! Q1 `& X- B6 Etbox[c] = no;
/ ^1 l5 |& G8 {( O5 d9 P   }7 n) q- j6 C# c3 H7 ?% m, R8 T7 G3 L
}
1 t+ @- ]0 ^/ z9 h- m* H</script>' A1 y6 r9 D6 h& _& e
</body>
  `4 `5 }$ l5 I9 s2 h) S0 T





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