Board logo

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

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

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
* f" ~8 c+ X* x2 [% a         c pageencoding="gb2312"
8 S$ b& k$ l- I3 \%>: u5 ^2 K; v6 W2 D4 V! P
<style>
! P5 _: W' z  x7 o8 k4 O.f9{ font-size:9pt; }- X/ W5 M0 O( e: L/ L8 N/ W
.bgc{ background-color:#aecaf9; color: #0033ff }; E& F+ }& ]6 ~% B9 m! v0 ^
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
) y: m' `4 A5 n7 }+ z  m  border-bottom: solid 1px #4e7dc1;
, \# ?+ K  y& \7 L" D4 `  border-left: solid 1px #aecaf9;1 `- B! ^0 h2 [9 H
  border-right: solid 1px #5679bd;$ b; z4 g) }/ }' K1 {9 ]
  padding:1px;& h9 B- d& c" Z  a
  margin:0px;}/ N3 n1 Q7 j" ?* Q
</style>
1 J' |7 a( H3 d4 |<script language="javascript">, w4 Z/ |* O5 @& O
<!--2 z6 w/ a6 D! G8 E2 M% p, B8 m
function rv()
" A- ]6 [. T9 O2 c: V" C& }5 `{7 y* Y( B, w6 M/ A( \: v
  var val="";
0 P( Z% ?$ I( o/ Q  for(i=0;i<combo_box.list2.length;i++){
" F- @* k7 w8 I. g   val+=","+combo_box.list2.value;
) p! g4 B2 K  |. R& g  }9 N9 r: _2 p4 \( h" \* W* Y. B6 {
  if(val.charat(0)==","){
3 g/ R! [) f9 b. ~7 L6 v   val=val.substr(1,val.length);
* x- z& q$ c. x; ]* `! J  }
" [" D( @; `9 g# x. h# V% p# t9 d7 Q: L  opener.form1.frecname.value=val;
, I! O  d! y0 l/ H& s# x  self.close();7 Q- }2 C5 U! N
}' |- [# X1 n8 J& H3 w
//-->
& x% [. S9 x9 q</script>/ ]% e# u2 i3 s. c) g5 v- U
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">3 n2 V- |: ?. t6 i
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />- L1 z* D4 \! o2 D7 q
<%/ u5 m6 e/ R7 u9 B3 Z
  cdatasource ds=new cdatasource();  //数据联结bean实例
- U3 v1 `  q3 c2 P  java.sql.connection conn=ds.getconnection();
- y# R; M) Z4 S* l/ p: B) L  java.sql.statement stmt=null;/ |5 p& B1 q8 V, B. `
  java.sql.resultset rs=null;, r/ m  a: ?! t
  cdatacheck dc=new cdatacheck();
8 y& U# j! z/ e$ Y%>! i) _  V5 ?; e( v; x
<%
" \4 D: d  s$ x& ]) H6 E* B1 o4 istring 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";
. T$ Z; I4 Y: C+ h! N& a1 t, Xstmt=conn.createstatement();
2 F$ f1 Z4 t/ Y9 e. z$ Xrs=stmt.executequery(sqlu);
1 R; U# e$ S5 E: V* \3 s% O%>
# I# B- x# E3 m, {  |. E<script language='javascript'>4 M8 N/ A- A" S$ ]  U
arr = new array();
1 Q$ n& t8 S* k' T  E<%  int temp=0;* R" X2 _/ z( J* {8 f- _
while(rs.next())
" H/ c: K. Y! p6 m9 S{
3 ^9 {7 X# j0 m5 e* b8 ]2 F/ \+ `# c%># R) z; E# F# F, K
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
8 S  G* D$ A" b<%
7 P0 a" I. Y7 vtemp = temp + 1;
7 i3 X' z3 Y5 h}+ q3 B, D1 g' Z* I* r
%>* G9 U6 r6 T" `5 p( [
temp=<%=temp%>;7 L- h, Y) E3 P1 ?# |
function changelocation(id){ . a4 F9 C8 N/ l6 z6 r$ j
document.combo_box.city.length=0; //初始化第2级菜单的长度,下标从0开始
9 T9 S# Y; r; [! Mvar i = 0; ! B# ~" I3 S; |4 o% u# P' n
document.combo_box.city.options[0]=new option('-------','');
8 Y3 |3 M( J; ]2 {8 I& gfor(i=0;i<temp;i++){ ' l; _4 @* Y8 C% U
if(arr[1]==id){//如果相等,证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 6 u$ M5 \9 f5 E4 s. N  z
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
& C# X2 a! h" R7 b} ( M7 J2 ~2 i6 F* s" z$ N; _
}
0 V' B: ~- g2 s& j' o} - P( K. O2 ^  x: d  s' I6 q) s' ^
</script>. `  Q& I! k3 N% V' @" `
/ l3 u) z9 B) b$ X' x* j! j8 a
<form name="combo_box">! X8 B# e; G! _7 |' |' E  f3 ?! c
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' I9 C- H2 ^+ Y8 j  <tr height="24">, R$ B5 O+ N% H$ n: {2 @2 g
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
; o5 |& K5 F0 B3 D( Q  P    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
2 D0 g3 `5 o7 @* ^' G    <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>8 J+ I* e  @0 f  U+ v2 M  I! g
    <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
" }1 [3 {4 }! H, B8 {7 T& }, N  </tr>
2 z9 V/ D, ?' Y$ s* w  <tr> ( R, X4 z7 f8 }/ z/ J: k
    <td># `: s7 |  L( i; D' r/ e
  <select multiple id=prov name="prov"    style="width:150;height:200" class="bgc">
0 j' ^( B3 i% x; [* a  <option value="0">请选择部门 ---></option># C3 j4 [- P/ w: n- i% m
<%7 V2 k4 q# g. ~
    string sqld="select * from tdept";6 d% u# Q, C5 n+ c. ~3 ?; H6 b
stmt=conn.createstatement();
$ s3 i* [* w& H/ srs=stmt.executequery(sqld);
) p  P. L: W* I/ s0 D- ^while(rs.next())* N2 b; a7 _& {! O+ ~2 i0 ^
{" L7 ~9 I7 U& T
%>, Z, {+ C0 e7 l
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>) l0 h& F4 n" H: ~# ]
<%0 i, M3 m4 K  w* y# S8 I  ^$ J: [
}
8 Q$ P# M# }0 I6 z( r" U%>
5 C7 E6 j0 L! a  </select>
* u# M% H$ e9 @7 X0 I) ?6 u2 L</td>
  G0 G  ~7 A2 |8 R3 s+ j5 ~, [    <td>
8 H5 a; A3 N, N$ j( s  <select multiple id=city style="width:150;height:200" class="bgc">. b( I$ B0 f* ]4 @
  </select>
. r; {- Q* S: h5 S6 d! u</td>% |  U9 g* N( W. D
    <td nowrap align="center" class="bgc">
  r: d* a6 L( k) }  <input type="button"  value="<<" class="buttons"># ^0 m8 ~5 Z: B* B- ~
  <input type="button"  value=">>" class="buttons">
& u2 K2 L: e" q, n</td>% L. H; S/ }. M( g5 k; V  U, B
    <td>" B5 f2 M. ?# l5 h! l
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">. V& K& H' z; E( b4 p1 d) X
  </select>
4 ~0 p% ~6 F0 w- c0 a( ]4 j2 |, \</td>+ i; z  J# f  A  |" L0 a
  </tr>0 v# E4 U8 \" c, a; |! G
    <tr class="bgc">
+ p8 I1 g% F5 c; T% }3 u    <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了!" ></td>
. Z9 ^* Q+ O9 H5 |7 K  </tr>
1 p' Q1 q9 u2 t- B5 Y% F</table>: V7 v% H3 Y  u! c. s
</form>7 J5 Y5 h+ c& C# S& v6 v
<script language="javascript">
, v3 O$ X1 Q$ B//人名移动+ y8 V7 I% G) M% O' g+ D
function move(fbox, tbox) {. X' W2 y& N% [- i: b7 S
var arrfbox = new array();
+ g" z( h- s& k1 ?! Z4 j3 N' Avar arrtbox = new array();+ v5 p$ `; J6 p: I! N
var arrlookup = new array();
- q! D- d) I/ q; V3 ^var i;
: }( Q- B" M( M) s/ J0 Cfor (i = 0; i < tbox.options.length; i++) {- P; z7 k, @7 F. q
arrlookup[tbox.options.text] = tbox.options.value;1 m7 _4 C  p4 R+ z. `. m. V) V
arrtbox = tbox.options.text;+ J8 W  r  b" `7 b$ Z/ K1 N
}
$ T' E+ y+ D  s' D$ gvar flength = 0;9 q* |5 i' l, X5 C
var tlength = arrtbox.length;3 E8 i$ O% g1 Z7 A
for(i = 0; i < fbox.options.length; i++) {
+ s: o; N) C$ Y& k! F, S! Earrlookup[fbox.options.text] = fbox.options.value;9 q- b* T0 e2 V. K; _2 L4 n1 H7 _
if (fbox.options.selected && fbox.options.value != "") {
: [- h* D! m7 Y6 ]4 g1 Jarrtbox[tlength] = fbox.options.text;3 n! }. t& z* o- R4 x
tlength++;6 m7 n% X& @+ a- p7 V- ]
}% u. q4 @- ?7 U' N* I& e
else {
( B7 K: x- H, C, V, W$ ?8 farrfbox[flength] = fbox.options.text;1 M' G9 u! n3 Q2 P% _
flength++;0 W) ~9 u9 z- {0 D# g
   }
; I  m$ z3 f4 d/ Q9 o" y' o- {+ h}0 g( [& K/ o, d
arrfbox.sort();2 q6 C: c5 R" A6 r, w0 L& n
arrtbox.sort();
. k; s& O; p9 Q! I  `8 t9 p% @; M4 Q) i# V  E( O2 g
fbox.length = 0;7 r+ c- o# O* O7 V
tbox.length = 0;
/ G* f! r' ~6 b- ~var c;
5 C+ X  X- h% ]# {0 ^3 K! _/ j4 Mfor(c = 0; c < arrfbox.length; c++) {
: Z1 T' `) x. g  d7 y4 Bvar no = new option();
9 W& h& u6 f# l, M" d9 Q1 Q! ^no.value = arrlookup[arrfbox[c]];  G3 H7 I1 a% @  ?% ~! W
no.text = arrfbox[c];$ t) a6 S* N& e% i
fbox[c] = no;1 @2 u1 B8 ?+ ~9 a
}
$ w1 q0 |$ g! V( H# n3 \for(c = 0; c < arrtbox.length; c++) {
, \: Y' t3 H. Z9 X. q1 m5 ?2 \( ivar no = new option();
7 g5 d0 [" P/ Y- ]+ Mno.value = arrlookup[arrtbox[c]];
9 Y1 }! v8 n; Dno.text = arrtbox[c];
* Y# i. F" V5 Otbox[c] = no;
+ r% T- w5 Y" S% n4 _# ]5 R: s  x   }
8 `/ G( q$ s5 [# ]1 i+ Q}
& y# y4 o* B- n" v</script>
3 u: `3 L# A. @& G</body>; `* m- p% u% B1 F1 F( r( E  v' d





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