jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"; ^  Y1 z9 R) }3 m
      c pageencoding="gb2312"
%>
<style>
.f9{ font-size:9pt; }3 p4 p+ x3 V; D% M. F' E3 C
.bgc{ background-color:#aecaf9; color: #0033ff }9 x# P: w% W/ u/ [& N. U
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  border-bottom: solid 1px #4e7dc1;& M7 k* A+ a4 l6 d" G7 u5 Y5 \3 N
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;; i( r- ?5 J8 b( U2 h9 K% r) V. y# L
  padding:1px;
  margin:0px;}
</style>; P- J' g: U/ u7 i% N" c
<script language="javascript">

. g# v7 _7 q$ |4 [& K2 u8 X</script>! h8 ~4 _) @' y9 ^+ h" [
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
4 d) J  }3 m6 j<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />1 [7 v! {6 T  G
<%) ~9 l3 d+ h% r
  cdatasource ds=new cdatasource();  //数据联结bean实例+ h4 B' S% D* b6 q7 z  S
  java.sql.connection conn=ds.getconnection();
$ a- ?: r6 s4 a1 Y# N7 L7 |  java.sql.statement stmt=null;9 O5 A  k) c% f5 A
  java.sql.resultset rs=null;+ `0 Y/ `- K, Q: y. P
  cdatacheck dc=new cdatacheck();/ a1 I, }, A/ V8 g+ r6 \
%>7 @: {( r( r2 i/ f: g5 v
<%6 ^1 j2 O* ~1 \
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 g7 U! y4 l1 X/ }; M. a* \. q# G% O
stmt=conn.createstatement();7 K+ }9 x/ j2 B4 H$ X/ w1 }
rs=stmt.executequery(sqlu);# o! u/ M6 }. N( p3 M8 T$ r
%>
9 N& C9 P2 W% R; K8 d0 v<script language='javascript'>; c# z/ T- |3 A* K7 g. b- x" Z4 U
arr = new array();# B7 c. @9 L% ]# @% D" z! A) e- m
<%  int temp=0;
2 a8 Z" X) K2 c2 z7 {% Z9 hwhile(rs.next())
2 A( y) g* R4 c1 Z0 n. q% n, X{: g- o2 x) U$ ]: K& ?0 |$ @
%>
7 a9 g; J1 Z1 Y8 barr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");# C# @# r7 ]% U& n6 P
<%
8 A6 A' Z' I  g7 T! wtemp = temp + 1;
4 D" C: Q1 E0 g8 u- i' W0 v}% _* c0 f3 K! w+ ^9 ~' x* Z
%>; V# ?" W7 A- M% K
temp=<%=temp%>;" _+ h1 Q, e! w) x
function changelocation(id){ + B  I: X3 j+ s1 i9 H5 }6 D
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 9 Z& o1 U% [9 _1 J
var i = 0; 6 {" t5 H- k' }( }$ A
document.combo_box.city.options[0]=new option('-------',''); * w) c$ E# V; R9 `
for(i=0;i<temp;i++){
! N. f4 v1 h' l. dif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
9 }" K, l( u' zdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 7 ?2 ^6 W/ n, _$ E
}
- }0 b" B1 H: a" Y5 }} 7 f5 |, |$ I) W% ^
} ) m; K$ ?8 a: G' M
</script>. i- R3 Z/ L' n. W9 C/ \
# ?0 N* p+ z, P1 x4 L
<form name="combo_box">& g$ l: u- T# f9 ^8 j( B: M+ H
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">! N) t) C2 U. t- f: t( l
  <tr height="24">
! Q8 G8 W# z# a3 @ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
: r, j+ J9 H+ O  m <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
" ?! u9 x. P1 _: e& J0 [1 a; b  W) m <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>4 o8 ~$ \  `+ E+ I4 \7 K1 g
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; l4 e6 m3 S5 W, F  </tr>6 V7 {" l# I- r1 H' {$ g
  <tr>
  F7 C) |# I) u1 W! @3 l: U <td>  J# b; _/ D) N/ X: L  d- ], w, L
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
! i% O2 o; @3 R8 H/ X: ]  <option value="0">请选择部门 ---></option>7 l+ S' g* A+ A: z! _' o3 o
<%
# D0 B9 d8 j1 H# ]1 h, R string sqld="select * from tdept";
# M4 l$ }" r/ x; X; f" mstmt=conn.createstatement();! c, `& o  D; k. t  a$ k; ?9 a0 C$ I
rs=stmt.executequery(sqld);
6 n; C1 k' ?& Y9 e1 R& @" Qwhile(rs.next())# L4 a( K9 N+ w! K. k
{8 U/ O5 z# P; W7 @/ D$ _# u2 f+ `
%>9 C5 m- I. T: A* k: Y( E# f- e8 n
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>/ T6 b& Z! h7 B) V! ]) y
<%
- A- m( a; I4 Q: i# w( ^7 @6 v}! B! z8 P5 R& f/ u: e" b
%> 4 P, I5 k' n8 L; R
  </select>
2 H% c9 p0 d! D9 t# q9 i</td>$ r, W+ Z% u4 m/ n2 P6 r( H
<td>
$ d) M# P: n* z8 ?7 o  <select multiple id=city style="width:150;height:200" class="bgc">
# D* |' l. N; N  `  </select>4 A$ \/ o; F5 I; O( Z# D
</td>( @7 g1 a+ k& u* K! J( A
<td nowrap align="center" class="bgc">2 I! T* U. o1 u
  <input type="button"  value="<<" class="buttons">& k& [7 s7 ]4 X$ z3 V. u+ A
  <input type="button"  value=">>" class="buttons">& M( u6 ~' w* u9 i
</td>
# J0 G9 L: t2 F5 S8 {. A <td>
: s2 x. ?& c8 G& w. K9 x! c6 X  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">  k, g5 P- k3 V) [1 i; W5 y
  </select>
) t4 ~% ?+ W  ?. S7 m</td>& c; S/ Z) a) }3 e( g% @/ ]# }
  </tr>$ T8 i# i5 m3 z8 D* z2 U
<tr class="bgc">
% T/ D$ e/ b& D8 O% ]' B <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>& ^7 F1 `) ]$ S0 q
  </tr>
" y) `& K9 P( \0 _8 Y3 H</table>- D4 H4 M3 c: r' U6 N
</form>
$ o( ]6 o+ p# N& Y1 I. h<script language="javascript">
$ \8 R& L* R) Z$ g2 H: _- P//人名移动
' k+ r* k3 D6 H8 f- G. i- Ofunction move(fbox, tbox) {1 @( i7 X6 ?! U/ ?# ^( P! _
var arrfbox = new array();7 _7 ~/ ~& g0 F- q
var arrtbox = new array();
) ]6 M, z0 n, `+ X- C, J( i+ Q! L& Tvar arrlookup = new array();
/ N" w' J% l* N! B" i- t: nvar i;! q/ G8 M5 M3 k
for (i = 0; i < tbox.options.length; i++) {5 r: [$ _% u. [4 G% H% C
arrlookup[tbox.options.text] = tbox.options.value;
3 A; e- }/ k6 r6 L2 warrtbox = tbox.options.text;* f- S+ W' Z  {8 M' i) O
}
" o& [; x; u" a( d5 v5 V- Lvar flength = 0;2 `4 G7 @5 ^1 x9 x" l
var tlength = arrtbox.length;
0 T# \8 y0 B) \4 j  f  D1 Xfor(i = 0; i < fbox.options.length; i++) {3 p, [: R: I6 c5 r  f+ F- p
arrlookup[fbox.options.text] = fbox.options.value;
+ Y) a/ }' m7 [$ a  R1 {' Aif (fbox.options.selected && fbox.options.value != "") {) p- @+ h" K* P& N1 D! f
arrtbox[tlength] = fbox.options.text;
9 A0 B( v& e2 O7 S% l9 k! Ytlength++;
% T( |# |, f1 l1 K5 `7 |3 I}  h3 X7 S2 w) h; `& {( d0 z! V
else {
; h) @1 v9 B9 ~  p+ Y( |- g+ _8 darrfbox[flength] = fbox.options.text;
3 A8 n) Y" P, x' G9 D* [4 x$ Eflength++;$ z) r" S; t; l$ ?/ ~
}
) _  a& i# Y1 i. Y: C}( d8 m7 F5 k6 t% ~  u$ m5 ~
arrfbox.sort();
* x3 _+ w3 X, [$ v: o& Narrtbox.sort();0 i8 Z; a; q# m# w( D3 K& Z
2 l1 g4 `, l  c$ {7 r
fbox.length = 0;
5 p- s: Y' q" I7 jtbox.length = 0;
0 ?: i2 F; @7 O: Ivar c;
+ X; h2 t6 Z5 i% Ufor(c = 0; c < arrfbox.length; c++) {
3 x) r- S, |/ S/ y/ p" O: Rvar no = new option();& u6 n) Y! b: b3 p/ R
no.value = arrlookup[arrfbox[c]];2 {( R7 @0 N# K# M7 X( y  s: W4 j
no.text = arrfbox[c];- I1 `. Y+ d9 c+ ~
fbox[c] = no;, ], Y! ]% g& i9 g
}
& f8 z6 Z" K6 @; yfor(c = 0; c < arrtbox.length; c++) {  r/ W9 K# V. n0 F& ]2 ?
var no = new option();7 ?$ Z- m) b" b8 P6 x% j
no.value = arrlookup[arrtbox[c]];
9 |5 f' Q0 E5 T  `no.text = arrtbox[c];
3 m: z5 [$ I2 k. ztbox[c] = no;$ ^  K- u) Q' @
}
5 z6 B* Z0 S9 |6 i, u1 S}9 ^$ g2 x2 E% @+ ?4 K3 \
</script>
+ E4 Y; Y/ `, m, R4 Q& L0 J</body>& g; t! F3 ^- l! X: z9 k5 z$ I

捌玖网络 89w.org----致力于站长学习交流

返回列表

jsp+javascript打造级连菜单

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]