jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"! n4 E: l- k5 h8 Y8 j9 I7 D8 e# d6 J
      c pageencoding="gb2312"! q' N4 T9 I% X% d6 b
%>7 R, x# t/ F1 }3 @* i
<style>
.f9{ font-size:9pt; }6 \; t6 [$ O8 V+ y# o
.bgc{ background-color:#aecaf9; color: #0033ff }$ S% ~1 W' C9 @2 `+ U
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;6 k, ?9 E) k3 V0 Y5 F: O9 v6 d
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;" X2 J2 X/ D# v# f5 O/ \
  padding:1px;+ a5 V7 \3 X3 E. N/ p
  margin:0px;}
</style>
<script language="javascript">2 z  w5 O5 ^1 f% C, e8 o

- K9 k' T" d  X6 o</script>9 v& Y+ b4 U/ `
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
- \3 P7 F( b6 W5 ~" w<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
8 C% K/ c7 C- f' D. R4 {- `<%
+ G: R# W! |9 O: X3 g  cdatasource ds=new cdatasource();  //数据联结bean实例
: j6 \* G! L  v' e) B) g, G' A* }) H  java.sql.connection conn=ds.getconnection();; e/ g# m, }. ?1 l7 C) ?; ^$ k
  java.sql.statement stmt=null;6 V7 b$ \# P6 a8 x0 {1 x* y
  java.sql.resultset rs=null;& |1 v8 K4 G4 J3 g
  cdatacheck dc=new cdatacheck();4 G0 q! h) X" `9 W# Y$ Q3 q% C
%>8 A, v# H" n- x* U
<%
" z1 K& r7 c9 K8 e9 I5 ~" M. Ustring 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";
0 u8 R# Q' V9 A# A8 Zstmt=conn.createstatement();
6 `! j" r+ O6 [! J# frs=stmt.executequery(sqlu);: q0 l+ q1 [: N1 P0 L% L; N5 Y
%>; M0 J9 R  Z6 q6 B( J1 c6 Q
<script language='javascript'>  F$ V2 w7 A. ?9 |1 ^2 |* E
arr = new array();
* J) [5 J% c0 F<%  int temp=0;
% j6 |0 n# o7 ^2 o4 ?% S( _/ `- Bwhile(rs.next())7 l+ H( ^& A6 u- j/ T2 @1 @
{8 d$ l& `) c, W( l3 ]: D0 {
%>
1 C8 _" P7 [# L, V9 c5 parr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
7 U3 @$ c% F  _5 {, ]<%/ k% F* C  i" R1 D
temp = temp + 1;4 x$ l: e! I0 h* A+ {$ d
}
" a' k4 n6 `* a7 r%>. J7 C( L8 [6 v) R
temp=<%=temp%>;& u$ i& l6 l( I, T
function changelocation(id){
" [+ K) D- e. _8 }document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 4 |0 Z/ g- |) J* q3 E8 Q
var i = 0;
5 A! ]' ]7 I3 m( y1 I$ {document.combo_box.city.options[0]=new option('-------','');
; f: k4 ]8 B; P! C+ [+ rfor(i=0;i<temp;i++){ * [2 J2 X- [  l; _' U3 n& U
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] / Q# `1 B7 o) K" u0 F5 G& q) ?" {, H
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 5 ~0 k+ n# d1 ]4 k# i. E- W
} ! |- F3 a* B- C$ a
}
& K0 B6 H" F  {2 [. U+ h} 9 A% S6 @4 R; j8 f5 V$ ^
</script>
& V% `+ a2 z$ A* I0 |  W; k
# K6 G4 A& w( N. {7 x' B<form name="combo_box">* ^" ^+ f  F0 H0 G
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">: q- ?5 V7 _- N% A! h! V+ \3 Y: B/ {
  <tr height="24">
& I  j4 {0 n2 ^. I- _) n <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
! r* {  d  a- T$ R* Q% m( ~ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
# w$ O  S9 G4 y! ^. U <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
: G$ o8 C! @  r% E <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>' g- y8 Z+ z' G" g$ s
  </tr>1 L4 I  I- h. F( g# ~' Q
  <tr> $ n. c$ m$ v7 R3 a5 ?+ {, |: i
<td>
1 A+ r% v8 n' T) Z/ C2 z: \, o3 [2 @  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
; q5 L- s, y( }) Z  <option value="0">请选择部门 ---></option>
" o/ g5 x" b" ?8 g<%3 ]: I2 F- |2 P% ^$ ^' S
string sqld="select * from tdept";# f1 O9 a: S8 H7 J* b  f
stmt=conn.createstatement();0 ]$ q" s. j% s: R2 R8 B
rs=stmt.executequery(sqld);
1 g: ]2 Y0 f( }2 Dwhile(rs.next())
% o6 ?+ d9 O, R2 H8 v0 E# v7 a+ P{
3 x; `" O! D- T2 u' I9 i, T( i%>( f: j& D$ n7 Z2 k  L
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
3 @: I! n; p' o1 e<%$ F* h& m4 ]& y$ v3 I9 g& o
}
. k8 `! o6 F1 t4 T0 k( X%>
( W3 [6 n0 u" B6 ~# I  </select>( v  q  {' Q! K, Z
</td>. c* r% S1 g& J' U
<td>- d- p+ t# V; d* I% I% U+ p
  <select multiple id=city style="width:150;height:200" class="bgc">
$ y/ @% Q: Z6 `) s0 J2 K  </select>
7 b* J; e3 `  j2 D3 ~( l</td>
" g$ d  b  {0 e  V+ n  i9 w3 a <td nowrap align="center" class="bgc">9 \' T, Y% \* Q7 A) ]# E
  <input type="button"  value="<<" class="buttons">' D+ W  f& A/ v9 u$ o" ^$ q
  <input type="button"  value=">>" class="buttons">, Y; y" F1 q+ j6 ?# S4 q2 t
</td>
$ q+ E: w5 Q; c/ ?" \ <td>" f4 H1 l" o+ _9 Q6 \2 D* ]* |
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
) `6 Z9 }$ ^  x# q/ E  </select>% w5 V  l  K/ J, [" U. b( x
</td>
8 b! W- n% L5 V+ o  </tr>
) i- T; }7 k9 _% @+ z <tr class="bgc">
+ q) l& s5 }% d$ K9 a$ }! J <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
* I# }! w& X/ C1 k  </tr>
+ h) P, p' V& b' F' Q0 W9 C</table>
: k0 J4 i# x  g4 R  I</form>
, g- N9 [; ]. \8 R* Z% F. H% d<script language="javascript">& e7 v- A) ]6 K) H. _1 _2 z- {- a
//人名移动. T: _, l# V1 U: V5 ]# l
function move(fbox, tbox) {- ?, q) @% q- r$ D2 ^9 R" O2 V
var arrfbox = new array();
1 T( E5 ?: M7 r2 `1 T$ ]* x) N% qvar arrtbox = new array();
: M+ j$ u; w5 K8 f; E- Uvar arrlookup = new array();1 ]2 k" z% _4 g+ }
var i;6 |7 |7 W2 L; q
for (i = 0; i < tbox.options.length; i++) {' ?! R' }, x. E8 _5 y$ V
arrlookup[tbox.options.text] = tbox.options.value;0 s8 i' Y* B, w! c5 A3 p/ g
arrtbox = tbox.options.text;
0 O+ e1 w  L# L}+ W/ A7 w9 P9 o) s3 k3 Z9 c6 B
var flength = 0;
4 T5 J; r4 A" x+ i' A, Svar tlength = arrtbox.length;
1 o+ ]( e# x/ ~+ l' f0 U7 efor(i = 0; i < fbox.options.length; i++) {& i& N* C6 ^! H1 p
arrlookup[fbox.options.text] = fbox.options.value;
) d1 x& M2 ]: X3 }7 ^" D# Rif (fbox.options.selected && fbox.options.value != "") {
5 i' L. J: m6 Darrtbox[tlength] = fbox.options.text;, @3 a; |, W) h4 N
tlength++;# k. H- f; O: c# ]( l
}
' Y  V9 J2 M4 }/ @9 `else {6 W2 H+ s; t- }
arrfbox[flength] = fbox.options.text;7 x+ X3 G/ E1 h" ]  {0 Q
flength++;+ x/ @% h5 W. f8 E9 p" ]
}
0 Y2 \/ q7 Z$ f0 I3 z/ ^- m; Q}
/ l) n4 [, ]  y' q; f5 Yarrfbox.sort();7 A  t# i1 Z# x3 I1 i, W
arrtbox.sort();1 X. }/ O6 J3 L" m

& r8 @' ?# M4 J! Kfbox.length = 0;
; A4 {. H" q8 a& dtbox.length = 0;4 \8 s5 c. }" T) v
var c;. [3 P. K: x# b$ V5 K
for(c = 0; c < arrfbox.length; c++) {; R" }" u7 X& T% p+ I1 L
var no = new option();
# L, c8 ?, @2 F/ f7 f# q" R8 nno.value = arrlookup[arrfbox[c]];
2 t9 Y8 f3 R2 |& y3 O* ?2 ~no.text = arrfbox[c];
/ z3 i! u  Q) O3 ^, ]fbox[c] = no;- S3 _3 f0 _2 g' J0 a
}0 \0 l+ K/ K% s9 J2 ~: v: Y. E, X
for(c = 0; c < arrtbox.length; c++) {
7 W; w3 T5 _7 [# |0 _- k6 @var no = new option();
, O! s$ A2 i0 |& c3 X& wno.value = arrlookup[arrtbox[c]];! L. C6 i1 s7 U4 f7 w  m
no.text = arrtbox[c];
* R9 [3 _$ T$ Dtbox[c] = no;
/ g. l  U6 `4 I/ E }2 l. Q9 n, @  h1 D) N3 v
}7 ~4 b" t: Y* V) e5 c8 `
</script>$ `! {6 l2 S; H
</body>/ [" i; ?) I( P8 B2 r

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

返回列表

jsp+javascript打造级连菜单

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

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