Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
/ m% o$ e8 S1 i4 Z5 h0 K         c pageencoding="gb2312"
) W$ P- }4 k3 U4 C$ S& G" ~1 A& z%>
( y8 G" G6 I- y<style>" O0 h9 x, X* H4 m6 m$ L2 e
.f9{ font-size:9pt; }
9 {% B- ?, J% A, D* o8 G.bgc{ background-color:#aecaf9; color: #0033ff }: _; d2 }5 Y; I9 `: ?/ @
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
+ K: D/ y2 d" v- h( I( r+ c  border-bottom: solid 1px #4e7dc1;
/ Y7 v3 J& |2 z+ e' d  border-left: solid 1px #aecaf9;2 W$ I3 H0 Z0 n% s" V' n
  border-right: solid 1px #5679bd;
8 F* _9 W2 E' P6 Y  padding:1px;! x8 M, v- {2 x  X
  margin:0px;}3 C$ Y8 Z2 {1 L4 l4 ?# O
</style>, ~1 Q% _; b3 e: }' z% O# r( F
<script language="javascript">9 V, D' w4 V3 }3 |4 F2 v0 K
<!--. E+ c( S) x: M7 T* g8 b" y) c5 v) n
function rv()8 h. D. h& J6 }8 ~
{
# [$ t7 T: U, Z& z  m/ g. Z+ n  var val="";" B. v" O4 t8 X- _/ O
  for(i=0;i<combo_box.list2.length;i++){2 B, Q# [( c2 a9 ~
   val+=","+combo_box.list2.value;1 I4 ~0 f: m8 q. ?: P
  }, ?% ]6 q6 r$ w2 t$ N8 i  a
  if(val.charat(0)==","){5 X, X2 q2 c% L( I
   val=val.substr(1,val.length);
$ T# S# t. ?# R! r  }
7 z2 L; r& w3 r* o( o- P& V  opener.form1.frecname.value=val;  n( J5 y- ^# g% m
  self.close();
2 U! }1 a. i( n9 e}8 F2 j/ M9 \; u; H7 F. \" E
//-->3 ?1 O! }- g+ r1 O1 X8 h
</script>( L; E. k7 v" g) N! e
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
0 m$ y. {; L- A9 v<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
4 e* e2 ]( M8 w- U' ?* g6 I8 h6 N. U<%
8 O4 n6 s8 r7 `" w& Q  cdatasource ds=new cdatasource();  //数据联结bean实例
/ `7 @2 x. z$ ]6 v  java.sql.connection conn=ds.getconnection();
5 H( j6 U+ y7 C: Q  v  java.sql.statement stmt=null;
$ [  k+ ?' @& V( S7 M  java.sql.resultset rs=null;
, W6 u+ R7 v" G  cdatacheck dc=new cdatacheck();
- {) D! F5 M3 |9 n+ p, D%>
. ^9 R" K5 c! n<%# i$ Q2 G, |! e6 c9 {  A8 e
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";6 Q7 O# c5 c7 e; g  s
stmt=conn.createstatement();
" _* R- t+ [4 y  m+ p  n) [rs=stmt.executequery(sqlu);7 o  M8 S. }* X, d
%>; o/ _0 y/ m- }1 |+ h) O2 q
<script language='javascript'>, [% g/ L; X, z$ u0 q9 ]6 v
arr = new array();/ I+ ~% z( v. H
<%  int temp=0;
; }7 k9 ~3 P* ]; K" [while(rs.next())5 Y' t6 B9 J7 O
{+ h0 X5 H* F$ S2 ?
%>$ K0 I8 W2 [; \
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");6 q. n. b# C. z, S
<%
2 I6 K; b1 C/ S% v9 R8 T, y& ktemp = temp + 1;/ C# c7 W- u( u. \( S
}2 i+ G, x" p9 Y& }: D; _. E
%>
9 z7 l0 b& E& \, `( \temp=<%=temp%>;2 P. i/ j$ F  _' f0 O
function changelocation(id){ # D- N4 ~7 Q- O% R: j; ^& p2 S
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
. {2 q( i" ~% N9 ~  C) `6 qvar i = 0;
2 z+ m( \7 `3 j/ t5 G" pdocument.combo_box.city.options[0]=new option('-------','');
  P: B. u1 B$ z7 B. R1 P# G) B. efor(i=0;i<temp;i++){
& {. s5 P: v/ Q" hif(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] - ?4 d$ T" [& ~! k! h$ ]" L
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); ) a" z4 r" M9 ~
} / f( ~# ~& d: y3 g* S9 l
} 2 W, ?3 E: ?$ |* y4 w$ \9 U9 X
}
# x2 @1 h9 Y0 c& \" g</script>, b& d; L+ _% T' Q$ ~

' \$ Q' H2 m) }3 ^<form name="combo_box">% E6 `1 O  |4 p) ~9 {* f' N3 D3 c
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
: K% F! l6 V) `; {; I. u; q  <tr height="24">4 m$ X8 ~4 V6 [1 `5 u
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
/ v9 j7 d, M: v$ [1 L5 y0 H/ f    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
! v4 R( B3 r4 R$ L- @# t    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>2 Y- b! M& Y7 `# U  x
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>7 }" g  S# s( h- X% T5 k& H
  </tr>
1 N' r: q7 b6 Y& h: Q; X+ b  <tr> - [: Z$ K( A# B; [$ `4 U  y
    <td>6 d2 A  q; s  G$ `7 H
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">6 b/ x# t" w8 {0 p8 g. r! @
  <option value="0">请选择部门 ---></option>
: E; s: R. t0 ]! O; ]# K. A0 C/ I6 s8 }<%
1 J5 B8 `# z8 x    string sqld="select * from tdept";# B4 C& `. s' t# i/ c$ y" U
stmt=conn.createstatement();
1 C! |. P' m& M6 G) @2 O5 xrs=stmt.executequery(sqld);; z2 O' N6 Y* Q: h* \( _
while(rs.next())
6 o" c$ V2 H; k8 d+ z4 H+ d) s{
* f& _% L6 M8 q- [$ a$ D  Q. |0 J, r& d& C%>; T) U, S/ [' c$ }
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
. Z$ p4 q3 G# e3 t<%
8 k1 ~) i1 y- a+ c4 q}
- w5 p( F# U8 C9 o4 K%> , a3 H2 k# K* \8 D  O0 T, ^
  </select>; |; i2 G9 h  H( u
</td>
: t2 N& b' I% ^4 J9 o* y$ o$ y    <td>7 K1 `7 J$ m% U. F6 d5 t3 G
  <select multiple id=city style="width:150;height:200" class="bgc">+ h+ z) {9 q; T+ a0 t
  </select>
3 U4 T6 x, i: D% i8 H# V+ }& Z" M</td>
  c5 J$ s5 g* A# ~9 `. {    <td nowrap align="center" class="bgc">
3 U+ X0 b! O) \1 |$ j  <input type="button"  value="<<" class="buttons">
6 [6 b0 t9 @4 l/ z9 p* B! i  <input type="button"  value=">>" class="buttons">/ |/ v8 @/ y2 S, _9 C, H
</td>0 Q0 m& P% t8 P7 \
    <td>
( ^8 x2 z7 u" u# N' z  d8 {/ o  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">& Q5 w: t0 y# ^
  </select>6 Y; A: L- U7 q: Q8 o. T2 a# \3 ]
</td>
$ t6 }+ N  K; w  </tr>" P! r$ Q6 j. N) B. E# O; k: a
    <tr class="bgc"> " @( z3 ~. c* \3 B
    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>: I/ X" p7 i7 o# v( M
  </tr>
0 i; F) Z2 z5 t8 |8 X</table>
+ g# y& x3 `7 B</form>
( Q) n% ^# `: @; t. t2 Z! K<script language="javascript">
! i3 T% E6 }. |6 \1 k1 k8 p* V" V2 O//人名移动
& @& N  {6 _# `% j) _& Nfunction move(fbox, tbox) {
& `- G0 L! a8 U$ V+ N" Zvar arrfbox = new array();
$ T/ W6 a% b# h; Z3 T6 fvar arrtbox = new array();/ L$ X- x5 p6 l# {2 o
var arrlookup = new array();& {7 Q  v3 M# v; c' K  O! S
var i;
, I( j# D* h/ `! p/ Pfor (i = 0; i < tbox.options.length; i++) {
" x, v' ~( r( r3 K; Narrlookup[tbox.options.text] = tbox.options.value;
0 r4 K' `8 a# n) s# y' Warrtbox = tbox.options.text;: r/ G( N: `8 C5 I. ]9 b# K
}
0 p9 V0 Y" z5 `, i/ Z  Uvar flength = 0;
4 g- Q: u2 |% I; Fvar tlength = arrtbox.length;
! f% ]$ O( R! ?1 ufor(i = 0; i < fbox.options.length; i++) {! \* ^3 F9 L3 ~
arrlookup[fbox.options.text] = fbox.options.value;
# T1 t7 ~( ~& D2 hif (fbox.options.selected && fbox.options.value != "") {
, Z  O0 R& j8 d. n1 barrtbox[tlength] = fbox.options.text;2 `& I; H* d* r% ?
tlength++;$ E# ^3 Y; j4 |- ^' |  u1 `
}+ _1 A$ _2 c; ?1 y
else {
. J7 l: z* a7 O! L& F. zarrfbox[flength] = fbox.options.text;
7 J. \2 e( m% U& g+ Fflength++;
; D1 W5 G9 u  M$ L   }  X" F" t  h6 v2 n- R5 S) Z" d2 v
}+ D$ W( T" o$ y* o# b- M, L: j% U
arrfbox.sort();
+ o" x7 Y! E1 C+ Qarrtbox.sort();2 I/ Q: _% Z( ~' H9 D

2 S( p# g5 ]! ]' W% X" g3 Efbox.length = 0;
7 o  E/ p, R% Q% stbox.length = 0;3 `+ y9 i' k) d
var c;. w( H$ C! }! [2 }& o1 C
for(c = 0; c < arrfbox.length; c++) {
+ n5 Q& D% x( Qvar no = new option();
5 ]) [3 \- r% S4 Hno.value = arrlookup[arrfbox[c]];
" p) v) R3 G6 q3 Kno.text = arrfbox[c];: B9 {# X* i( ?0 a" e
fbox[c] = no;2 H: s9 q$ l# \; g1 n( s  `, S
}
8 t, o; ?! x1 P, v5 X, B, Y  s5 y, r6 |for(c = 0; c < arrtbox.length; c++) {% \; s5 d( N3 U* U. H* u+ f9 R
var no = new option();: i0 n0 Z- h( r; v& T: [6 b5 R
no.value = arrlookup[arrtbox[c]];
: I( x2 D  n+ wno.text = arrtbox[c];2 n8 A9 c- H3 k3 H& n
tbox[c] = no;3 `9 R' K0 M! ]- t; }
   }7 @& g- c  B0 [, W6 u3 K  t# B/ I/ R: z
}
* A$ Z' r# a/ o/ U2 c& Z- V</script>9 `3 O+ }$ y+ q0 q$ b0 N& A9 o
</body>: ?4 k" E6 ]$ |; q





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