jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"* r8 W- U, |% U3 F
      c pageencoding="gb2312"
%>6 Y' q2 H* q+ N
<style>5 J8 P. O- q. @3 ^# F/ v% A
.f9{ font-size:9pt; }) L* r( a$ M2 A7 h& N
.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;
  border-bottom: solid 1px #4e7dc1;. q  X% j! \) s
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;! B  d# G2 d4 [- H. {7 P  e; M5 I
  padding:1px;9 q1 Y9 l$ N$ N. F- `
  margin:0px;}
</style>3 z3 o8 L- O4 ~4 k& {% m
<script language="javascript">* a! r+ \; o5 V9 f( J, P# F" Z0 h4 Z

9 s: a+ r% g! S, D% `+ t, d/ n1 Q</script>
" Z: n: U5 J5 `! f2 r* s. A; q<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  g- [, e* @+ W/ w6 T0 F- O5 p7 W
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />6 `) s7 P# p8 ^
<%
. v( s( X8 m  s! d% j  cdatasource ds=new cdatasource();  //数据联结bean实例( P: t# ?2 g9 r5 I6 V# K) f
  java.sql.connection conn=ds.getconnection();
" ^, j. X, `# n/ ^- b  java.sql.statement stmt=null;
! M4 n% b7 ]# r2 Q8 T( G: F  java.sql.resultset rs=null;: C) b( e! G4 }' c
  cdatacheck dc=new cdatacheck();
& V& h, K6 D; t+ u# _%>! u9 }" q- c; Q  A
<%# g9 U4 o' q6 `* A  P
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";
2 `$ F1 k4 u$ [; S1 K" @# F$ ^stmt=conn.createstatement();* B; N7 u2 ~8 Z4 O5 v: w4 _
rs=stmt.executequery(sqlu);% y* q5 A4 [+ |$ [) ~7 c
%>4 E% |% ^2 o# n) \! K0 X
<script language='javascript'>8 b- {9 V. R9 z$ ~# i
arr = new array();
4 i! J) b. ]' E<%  int temp=0;5 \2 O! x% q) v
while(rs.next())3 a4 o' G3 k( g0 e( U7 X
{  x/ Y1 B+ S; c3 f1 ~1 a
%>
5 Q: a. |6 ^$ |! l' }arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
) I, r# v* ]' |4 i<%
+ a" u! |: W6 T- g- ktemp = temp + 1;
& \2 q5 x, }1 _' x. |" g( d}& ?0 B, B  i$ l$ x( D6 i% `- y
%>
& Q* Y$ z. K) G: ]) \- S' xtemp=<%=temp%>;1 H4 g' V+ c# Z6 P2 ], E+ G) l) _. c
function changelocation(id){
$ }+ H; S2 d+ V1 x9 b$ Z5 R3 `4 q4 ]document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 1 F8 e/ p' j0 B. i2 }  [
var i = 0; , H* [% D) n3 O1 o. h
document.combo_box.city.options[0]=new option('-------',''); 5 Z+ f, k0 B2 P- u) E+ x
for(i=0;i<temp;i++){ " q4 L- {( _9 p( q. u: d& v
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
5 ]/ J5 X3 P% a- h8 b* @document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
# l6 `" M+ N& h6 B. {& y) o! d}
0 O6 S+ D9 A5 R( }# J}
) g! R/ C/ f8 _+ W# f} ' f& N* r* Q5 n0 \
</script>
4 S9 c$ g1 m# l. @3 w- X3 B3 o; k/ @, ]2 I. I* }
<form name="combo_box">
. F' Y% h% x; Y3 g" n1 |<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
0 \* ?" @* S/ S' A9 t  <tr height="24">4 r0 l( f. J4 I. f% v8 C
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
. K2 X9 J7 V; r& ?3 {) p <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
0 D0 v( L2 V, A/ c9 h <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
$ W$ ^, I/ E: h, q$ n; ^. k <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; ?) X$ G% J7 e& h. u6 f1 l  </tr>
3 [$ T$ a- V0 f# `1 W  <tr>
9 i& p: @8 f$ e <td>
* g3 Z4 X7 o2 i8 w) Q" C4 L: D! K  n  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">! m7 {- O" a  l. ]" m1 `
  <option value="0">请选择部门 ---></option>, P) V) K9 L" |4 d
<%
, j+ ~: T" Z+ R string sqld="select * from tdept";3 P: @9 _' d1 v3 G8 q* ^9 X
stmt=conn.createstatement();; h& x* l, H7 K$ h$ k
rs=stmt.executequery(sqld);2 p9 G3 J& I7 A6 m0 h
while(rs.next())6 ~# y! D2 j( V; }0 b
{
: r- ^3 h# M. c4 w%>
% B3 i, z/ `: k* F: L; o! h  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
2 J; I/ Q( \8 E, J& |<%
( L+ x8 F0 j- Q( g& H: Y}
; r3 `3 T( M+ p: j- o8 h%>
+ y- L8 P7 j* v2 T6 Q4 c% y$ ]  </select>
( ?. S" [2 x# q% `</td>
" n* @( m0 ]1 U+ r8 Q: A" @; o" q' | <td>
# D' e5 j3 J! \5 y2 H2 }  <select multiple id=city style="width:150;height:200" class="bgc">  \& ~) V. J/ O, L: o" h
  </select>
7 k9 d8 P8 T9 a$ O</td>
( y  G5 A" Z# u' T4 m2 [ <td nowrap align="center" class="bgc">0 a; N: Q9 H7 i+ v, o
  <input type="button"  value="<<" class="buttons">
1 c9 c! r/ V4 g1 N, }7 a# w  <input type="button"  value=">>" class="buttons">  q; |0 W- b5 d
</td>
7 Q5 u9 b/ {; X# @4 C <td>. y* g- \0 f8 h3 [
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">& K6 v1 [3 A6 R
  </select>  @) }" f  H# k6 `, Y; v7 `0 O, d
</td>9 t" X$ E8 u, ?: \: D; y, u+ d
  </tr>
' [- c" s: W2 p+ B/ o <tr class="bgc"> ) _1 U4 d% l5 v" H, B  U6 ~
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
) S; b) B4 Q8 U: A/ s' A  </tr>
4 M3 q5 x5 v# ]7 B0 [) b4 @</table>
, U$ ^, w! U, r3 z5 T</form>
0 W& w- {* S! H5 I: q<script language="javascript">
1 `9 _& d) l5 N( t  f" Z//人名移动) B2 w0 J- t1 Z1 `' N3 O
function move(fbox, tbox) {
) G5 d7 c$ n3 R3 Y1 H! avar arrfbox = new array();
0 U6 O$ u6 J! h0 Mvar arrtbox = new array();
' F1 W8 I" C5 w& z- Mvar arrlookup = new array();
" F7 y" Q- [- ]# c  nvar i;
3 ]! ^6 H# ^9 \. a. O; dfor (i = 0; i < tbox.options.length; i++) {. b1 |) A$ l2 w+ K9 {7 g; o7 J4 Y) a
arrlookup[tbox.options.text] = tbox.options.value;
; `1 V+ N1 H: Q% A2 L* S, narrtbox = tbox.options.text;4 T, W: `8 ]8 q2 o
}
* d5 J( N+ ?! }! }6 _; Evar flength = 0;
& q6 n. O, ^7 j/ T5 c; b. Mvar tlength = arrtbox.length;
7 p8 r! J9 @* ?9 }9 _$ s+ zfor(i = 0; i < fbox.options.length; i++) {3 t  w; G0 |1 I# l) d. ?% J
arrlookup[fbox.options.text] = fbox.options.value;- e* y5 j' n6 T. W4 o: J% d
if (fbox.options.selected && fbox.options.value != "") {
. K+ m1 n1 L5 T' ~arrtbox[tlength] = fbox.options.text;
# ]* M7 C$ J5 ltlength++;
; Y1 Z  e; F  U& N( d1 B}# e3 J! Q0 F) @" \. `" \9 C0 h8 Z2 _
else {
! d/ c" c0 C7 ^$ }; H  Z1 \arrfbox[flength] = fbox.options.text;: M# }, n4 J$ y$ F
flength++;
" _3 ]3 K' H. G6 T2 x4 N }
; Z2 Z: {4 m+ ~; g}
- R/ p1 n' @8 Z  o  ^arrfbox.sort();0 p  g, d% ]6 J
arrtbox.sort();
8 o) |; N" @7 W. S! n9 M! I+ S( n! ~0 \- H  `
fbox.length = 0;
1 {. \3 Y3 u* K' x1 G; y1 }tbox.length = 0;
4 B/ S& p1 D, y1 O3 x8 l5 Evar c;8 V( _; H" x( x7 @1 ~
for(c = 0; c < arrfbox.length; c++) {& z1 P' r+ _6 Y% p" C7 s) ^
var no = new option();) n( S: A: A0 E0 k9 ^  J
no.value = arrlookup[arrfbox[c]];& i/ ]) I% a6 T, i, h
no.text = arrfbox[c];- ]+ ~, }3 F- v5 u- j* I0 z
fbox[c] = no;
( v" B: Y1 K, e8 H1 X}
: A6 @  S. H) ~8 C: c2 }8 s% `4 W; Tfor(c = 0; c < arrtbox.length; c++) {/ U# [6 N- R9 e/ j5 q" S; r/ L9 V
var no = new option();
5 i% v6 u) r6 l: Z3 _no.value = arrlookup[arrtbox[c]];* R) C, t+ R4 Q3 ]: j. j
no.text = arrtbox[c];  A' p) V' `8 n
tbox[c] = no;
5 j8 a/ J! l" f4 R }4 I- V8 A. M* f
}5 h# i3 X+ v, G0 w1 c
</script>
' k% M( e/ L! I. A6 l</body>. k) U4 @+ I# Q1 R

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

返回列表

jsp+javascript打造级连菜单

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

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