jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"- B5 x' q6 H# V! R4 R# I6 L
      c pageencoding="gb2312"5 W6 e7 Q# `9 ]& t* i3 U4 ~
%>4 g- F& _3 p4 z( K  K! q) W
<style>
.f9{ font-size:9pt; }' n- q0 V' t8 N, A8 b2 O  ]
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;" i4 N0 u# f, L$ |1 I
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;% {# C  ]( r2 L; y! {) K& L+ h8 Q) f
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}" P, q& O. K( C/ K  T
</style>
<script language="javascript">

" d9 m) `9 f9 D</script>
) {! T) W. V9 h7 d. R- K<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
* C/ S, M- ^- V: x2 V<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />. f5 x4 }4 |3 `- y
<%% e, q7 D8 E6 s( [$ R) L+ c
  cdatasource ds=new cdatasource();  //数据联结bean实例
5 W8 M6 U$ d8 A4 n: v' V  java.sql.connection conn=ds.getconnection();
& j  G  i0 x. |9 U3 q/ \# {  java.sql.statement stmt=null;9 V4 O7 P" M  S. [# L' K- s4 G4 R( a# g
  java.sql.resultset rs=null;+ $ ]# Z# y/ ?7 g/ p; A' S
  cdatacheck dc=new cdatacheck();! k* r+ G9 \3 $ z
%>
  V2 _2 W6 L( i4 E( F<%
6 f5 C* A' `: }0 @( X5 |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";- r) t6 f! u* ^' k
stmt=conn.createstatement();
8 [) s3 [  ~# e2 _( i. [0 g% Krs=stmt.executequery(sqlu);
: L" H# e, n( A" w$ R6 l# |1 F%>
' x) G7 U9 N/ `- x) E% R2 h<script language='javascript'>
1 y% z- ~3 m# m: K; O! [5 p3 Xarr = new array();/ C2 W  L. F* R
<%  int temp=0;
1 u, L3 H- Y/ }5 X- `2 ^while(rs.next())
* p; E6 s3 w" s: h{4 v' x' X( T" `5 T& [
%>
, g7 [! Y7 G. uarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
+ Z5 u8 y9 ~; ?& v3 [5 O# X) I<%
temp = temp + 1;% _; }  `" R9 `+ G; ], M6 X/ l
}$ Q" f) C" ]7 B9 ~9 {9 w) e
%>
) [/ U! H3 u4 I7 k, \temp=<%=temp%>;& E4 R& u1 d+ |3 k, O6 u
function changelocation(id){ 1 n5 ~) F# y/ x9 A2 J
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 . \; N& h% ~6 i, K7 }9 _
var i = 0; % ~1 r2 P& N  Z7 L- f3 j4 S
document.combo_box.city.options[0]=new option('-------','');
3 p# M# z* G4 p& d1 m- hfor(i=0;i<temp;i++){
& i2 j8 ^0 |% t1 [8 X' v0 bif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
; \+ C; ^. ]2 A9 H0 m3 bdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
2 Q8 B; q, d) M5 J}
& }. L- ~8 Y5 G( _} * _6 p. K/ r, \% a7 }) H3 c6 o
}
! A: M3 x5 _# M0 j) l$ Y</script>. g7 b5 z7 u6 F9 o6 a
, M! ~. n( p9 l# _+ g' S
<form name="combo_box">" Q+ ]/ F) a6 j& Z6 b
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">8 V& y) Z# y5 S7 g9 k
  <tr height="24">  l% u- k& i8 z* b
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>, U9 \7 G4 T7 f6 x: S" e3 Y) k$ K
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: U. B  C1 j4 \
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>2 s1 M0 m+ n6 Q" q+ {
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>8 @6 @, C: n+ S: F- t
  </tr>+ i  y. t) v9 R4 f8 a" P
  <tr>
, C9 b9 [2 q8 E! s! t6 p <td>/ t5 C# d3 d% ]3 ^& o
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
! e! d* A* q. H$ _7 X  <option value="0">请选择部门 ---></option>
1 j7 y. y7 l  h  a* n2 H' K<%
- a# d  I* A' K0 l3 q! l$ ^- x string sqld="select * from tdept";
: v& a* s1 \. ?, Pstmt=conn.createstatement();7 E- e. F% ]- F# k, J
rs=stmt.executequery(sqld);; c$ A, s# ?; s
while(rs.next())
8 M- C- l  Z! J( K& t5 s. W{0 P5 L; ]3 \* K5 G! V  N0 q5 I
%>) i; m) H" k0 a. s, K
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
" a2 B% y9 k2 d0 \7 H$ l$ K) j4 q<%
9 n* @2 L5 x: _' @2 E}
: @$ g! h, B/ w9 |%>
7 D9 z. v1 y% l( q/ n  </select>
+ ?  M# ~3 q7 N/ }2 I7 Q</td>- h- p0 T) u8 [
<td>
* g: z2 R4 ^. E, `' T0 o  <select multiple id=city style="width:150;height:200" class="bgc">
  }0 p, M- F9 k$ s$ |7 f+ P  </select>
4 r5 C6 T1 G9 Y6 |</td>; c9 y. K8 M; J+ l5 ^' e' R
<td nowrap align="center" class="bgc">+ F( s0 |) @) Q" E
  <input type="button"  value="<<" class="buttons">
0 o- u1 Y. W8 i% U  <input type="button"  value=">>" class="buttons">2 B  w) c* X& \6 v$ J
</td>5 q7 u# i4 g& w. ~1 R
<td>
, G* j5 T! ?! l/ w2 s- C" O  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">: ]% x1 a* A, G+ z& k" E& b
  </select>
, F# B$ T# a4 l5 ~" ]) f1 j$ [& ]</td>) _! Q! r4 m" F/ K4 w/ B
  </tr>
0 x( {6 ]! X, V& _; W) f <tr class="bgc">
% _- C5 H1 j; r <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
9 O5 T7 G/ D3 e* x0 [) [  </tr>; n1 f* n, z0 n2 R6 l, p
</table>
" P. f+ M- l& ?0 t6 b/ p% e2 T</form>
( b" ^3 ]1 r6 K4 V1 ^; X  p<script language="javascript">
1 k# V* l3 W) [7 d4 N$ t//人名移动& n2 L8 j( m: l& V5 Q( H& q
function move(fbox, tbox) {- l9 c6 o# G: `) x: ^/ N' W
var arrfbox = new array();
  m+ D8 F8 \+ h6 F0 K0 ^var arrtbox = new array();6 g! R6 d# _, v
var arrlookup = new array();
% G) Q. T7 W* [( r' ~  g8 ^var i;
* ]" v; _' \- X0 A. _for (i = 0; i < tbox.options.length; i++) {
5 y/ d, N5 M8 g  farrlookup[tbox.options.text] = tbox.options.value;1 `5 n' M; g! m2 @, g
arrtbox = tbox.options.text;
: }9 K( c6 ?; P1 D, Q) T9 R$ D, |}
; M6 e3 F: N$ {7 T$ t3 j$ xvar flength = 0;6 \! ~6 ~( J8 {) Z$ v
var tlength = arrtbox.length;! h4 c/ {" @! Q9 W2 w+ J
for(i = 0; i < fbox.options.length; i++) {4 J( T* J$ b7 _  N
arrlookup[fbox.options.text] = fbox.options.value;( U1 ?; {# `8 p) b  n
if (fbox.options.selected && fbox.options.value != "") {
" Q/ r, _  Y" |7 J- E, F, c+ Sarrtbox[tlength] = fbox.options.text;( W, e" J1 n& D  c% F) T8 o! x* K0 V
tlength++;2 i( }' M* v( V! ]
}9 E1 r9 T0 o0 \& y/ s- C# v
else {6 P) ^3 O7 L( P, C. o! B3 U) R& e" A
arrfbox[flength] = fbox.options.text;
# s- b: B' \# R8 ~, ]flength++;
& ?- G8 S( p; Z) } }
: R' _8 e  L  B2 d6 e}
4 e2 I+ G& F# i/ T1 T4 _$ oarrfbox.sort();
4 o( w# Q' n7 p$ f+ x5 D3 M. o3 j/ Earrtbox.sort();
% ^/ y5 J# n6 W1 j6 a
' j( a+ r  x6 G$ h9 G5 Zfbox.length = 0;. g& u7 ]! `9 Y' K, W
tbox.length = 0;
, t9 _" v$ |6 n# e6 a" Qvar c;
2 f, P  y: Q! f6 t% s4 t* mfor(c = 0; c < arrfbox.length; c++) {+ {5 \" }5 ]# l
var no = new option();1 \9 X$ g& S6 r$ K
no.value = arrlookup[arrfbox[c]];2 c+ J0 c9 b) H" ^& m
no.text = arrfbox[c];# ^2 J- [' a+ k+ j- b5 V8 Y
fbox[c] = no;7 e0 B! j9 V& |3 h, p! A9 q8 |
}8 b1 }& b% w% r/ L9 U
for(c = 0; c < arrtbox.length; c++) {
3 c+ c: E8 X% i) Evar no = new option();
7 _  N: j. g: o+ n; Pno.value = arrlookup[arrtbox[c]];
9 z$ a# l* X3 \& kno.text = arrtbox[c];
4 X! Q  F# Y! p. t( {tbox[c] = no;
+ N2 l$ }& ^$ ^0 `2 q% k% R) H }# g5 e1 Y- _% ]& d& R& m( c! a/ |
}
0 J, M7 N- o5 H' N0 i</script>
) N  O' m, f8 O7 |</body>
/ p0 c' O5 Q6 }2 x) e7 ~7 }3 V

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

返回列表

jsp+javascript打造级连菜单

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

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