jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"2 J' l, Z2 ~/ _& ^
%>: N1 C0 B/ ~7 {2 O
<style>
.f9{ font-size:9pt; }
.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;. t( f. t! P& C+ P( L
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;. m+ ^) j3 L$ r) i0 ~0 l. g6 L0 X
  padding:1px;* k# @" H; r, t4 L+ T3 O7 g
  margin:0px;}
</style>
<script language="javascript">) g! N! L6 ?2 |6 h5 f( [

& f0 Z% s- o1 T: N; ]# S& A</script>8 h4 F* o, y# f/ W8 T5 J5 F9 k
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">3 f0 ]1 U0 H. C+ B- s1 ]2 d
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />; i& e4 {% X6 v% f. g/ L8 X
<%; u: N# S, ^, _2 ]
  cdatasource ds=new cdatasource();  //数据联结bean实例
) e1 r* G0 N! T1 C  java.sql.connection conn=ds.getconnection();4 c9 u; ]$ u* M' i# s
  java.sql.statement stmt=null;/ l8 _  E% B/ T/ V
  java.sql.resultset rs=null;8 W# c* i8 O/ k( Q. x
  cdatacheck dc=new cdatacheck();$ h/ ?& P+ w; U8 ^) f: G6 [
%>
- v. p; F' ^" U<%
6 V* D, l& s  h0 T  tstring 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";
4 Z' A- u/ m1 I- ?' u8 p0 J) Xstmt=conn.createstatement();: m$ `! \+ B* \4 _# t3 Y5 `5 C
rs=stmt.executequery(sqlu);8 _9 y  i4 Z+ R6 b6 G* y  l
%>$ o! L; `5 L  T7 p3 s
<script language='javascript'>% F3 c( L3 X3 d& B, B: ~8 w
arr = new array();0 m$ l7 l- c' g+ Q4 k: S
<%  int temp=0;
3 N& A; z  u5 P. {! `; f6 Mwhile(rs.next())1 p' f+ U& X# h6 k' U
{
) T9 \: Y& ^  q# \%>% b' Y1 m# \- n, M" J. q
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
( `! b/ n( H4 g' m3 {<%8 F6 c+ L' C# T
temp = temp + 1;
% g0 ~) ~- I2 c}  A2 ^  y: ~9 Q$ ~4 [& x  Y1 N
%>
0 S2 _# D9 E" t% R+ Ptemp=<%=temp%>;% `3 \+ `  q' f1 `9 q2 [
function changelocation(id){
$ G0 B# n: A: h" g0 l4 Odocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 : Y$ x# o+ c$ a1 q
var i = 0; ! h. A+ p6 X0 v, R8 ?7 M
document.combo_box.city.options[0]=new option('-------','');
/ S4 [* g% y0 J8 D$ B5 nfor(i=0;i<temp;i++){ , G8 ^0 }0 G: H, j3 O% z
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
; c1 V7 x* ]! R, qdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
4 N, k0 V) W& t7 m- `& v# K}
9 p0 w. k* F3 ~# B5 j1 n} $ ]# p" V7 N: ]$ o. o
}   O: }  Q: k- Y! [
</script>
# q6 n9 K( l5 A, t* m, C' o5 {% y& F0 S/ y0 {, U# m2 b7 q
<form name="combo_box">1 r; \) @, t. ?' K5 K5 Q
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">1 I% n* P; b' q" z5 K1 [: r
  <tr height="24">) K" W1 z/ t& n: G1 m- F
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
% g$ ^9 c: _7 B0 b3 o0 X; L <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>& A; ]: V- B  P
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>, j7 @4 y2 l5 T+ b3 h
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>8 ?6 J) |6 s; @3 G$ v2 t' Z1 ]8 f$ O
  </tr>! @- B, h5 l' |& C% h6 y7 o. f- s
  <tr>
+ ~- v2 C% T4 `5 s <td>) t5 h& S/ e4 s
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">* _0 m# J" N( b8 c' N' x
  <option value="0">请选择部门 ---></option>' `1 B# h& H; Z
<%! ]7 U) X- w% q  ^( o2 m/ o" B
string sqld="select * from tdept";
* P. i  r9 m/ ~6 y0 T( ?9 ostmt=conn.createstatement();
6 X, @( i* z0 K* O8 A$ Jrs=stmt.executequery(sqld);
5 e* _/ f# W$ j; ~7 uwhile(rs.next())
: s  l% e  l- F{/ L2 O3 \6 Z2 c" _+ \1 v$ v+ c
%>2 T$ m& v* F2 B7 J2 ]
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
* l% ?: R$ |  \, J1 o. m) p<%
}7 m. e; O- `3 C# x6 B
%> 0 N/ c- N1 K7 w9 F! I
  </select>! O. B; ?. `' v/ j+ s
</td>
; [$ q7 l6 S0 v" r- Z <td>! H6 V# e) E. Y% R, }
  <select multiple id=city style="width:150;height:200" class="bgc">! H& N8 C$ E3 ?
  </select>: S1 B  X1 O2 J. u; c
</td>
  V7 Z( I/ \9 Y! q* i" M <td nowrap align="center" class="bgc">4 N" e3 {( S! Y
  <input type="button"  value="<<" class="buttons">
5 y4 ~8 S5 N' ?" X0 i7 P. H  <input type="button"  value=">>" class="buttons">! Z4 \" x$ d. K* {8 L
</td>7 a4 _& a4 |& T) r: J
<td>% B$ [- U" R* |# y3 k4 B
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
2 `( L6 A: U0 C7 y3 h1 P  </select>9 Y* q2 d' c8 e; ]: h0 n
</td>+ @& [* Q% X# _% _. j  J5 i6 f( [
  </tr>/ S3 b- S: @( r/ l" D
<tr class="bgc"> 0 j3 q1 Z% v: R: W4 E/ G) r- s2 C
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
0 w# x( T) d- A& |* ?  </tr>
+ P: `1 E0 x  L5 w, f$ G+ ]& Z4 d</table>7 ?0 J8 x7 Q9 D& H' l5 I
</form>
9 ]9 C0 y8 A/ [5 _<script language="javascript">
  X2 x* q: D) T2 l//人名移动2 U7 h- U# e$ ^+ j
function move(fbox, tbox) {
  h- k% B4 j3 ~5 Q. N/ ?, [var arrfbox = new array();0 g" q: L4 M1 B& W8 @- Z
var arrtbox = new array();
) I+ T5 [. S% Cvar arrlookup = new array();
7 N. Q! Z* n# M. b) M1 L  Hvar i;
( @6 W8 k6 M1 j4 ?0 y  Q) bfor (i = 0; i < tbox.options.length; i++) {( p' h5 s+ u; H
arrlookup[tbox.options.text] = tbox.options.value;
$ j; ], s7 N, ^$ garrtbox = tbox.options.text;9 W! `3 u4 t* \8 N9 b
}: O' K* E4 M; X& y5 F# c
var flength = 0;% E9 s9 L- ]  m; y: P# g
var tlength = arrtbox.length;
7 U8 ]& G3 n$ @8 C8 Sfor(i = 0; i < fbox.options.length; i++) {
$ O) k, i7 O5 r6 L% j5 W4 ~' zarrlookup[fbox.options.text] = fbox.options.value;! F* ?$ f, U3 j
if (fbox.options.selected && fbox.options.value != "") {: b$ U/ \; Q3 i) u; R) f
arrtbox[tlength] = fbox.options.text;5 ]" S  M' j- [0 ~
tlength++;
2 c6 j+ n+ O, J2 T  X, @" T}7 [) L; F9 ?, y2 N3 S# h$ c2 w1 C  y& q
else {' n7 C. V: J' U5 F5 ^, j
arrfbox[flength] = fbox.options.text;+ Z1 v$ g8 i0 \' m
flength++;' P' j& W" x7 T: d  _1 k* m* ?" [8 S
}! }1 q8 `: e) k% N- ]
}
/ `) c* ^6 F3 f/ `& Y6 aarrfbox.sort();2 W2 D  J: ]. u& S+ q, |9 V. e
arrtbox.sort();
  d% A6 I9 r. M7 w& ]7 s1 t5 u5 E9 w& s7 `# U' d8 U* E, Y  V
fbox.length = 0;& a3 Z2 t$ E' J& ]
tbox.length = 0;* s( t8 ^" D. @% J! Z' E0 q. n
var c;
2 g  q! E; N' y1 z; pfor(c = 0; c < arrfbox.length; c++) {
  m* \  L! b7 D$ k% ]% [) f( yvar no = new option();
: B+ X3 N1 v3 J1 [1 I5 m* _/ Fno.value = arrlookup[arrfbox[c]];) a1 u+ \  @7 i2 P  w5 q+ j: d
no.text = arrfbox[c];- l7 j  Y- S# ], \+ \: D. Z: O4 Z
fbox[c] = no;
5 X6 P4 k3 T; @9 y, c0 V8 K: D}
! X' B6 A. ?4 @; @for(c = 0; c < arrtbox.length; c++) {
4 l- g/ b# R. E8 kvar no = new option();) n, w8 ^" }' j' ^: Q8 Q* l% q$ r
no.value = arrlookup[arrtbox[c]];  A& u( x9 ^' y8 @4 G8 _" [  `
no.text = arrtbox[c];
* ^! i" G& G* N8 r/ G5 }" |tbox[c] = no;
5 H2 U5 G  d" Z }& \& }# r3 V& d; w! n. Q
}7 D( Q" y) A) |! F; K; J. o
</script>
3 s* h) S( K, \/ }2 p</body>
/ y9 @% u0 {- g% F+ X

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

返回列表

jsp+javascript打造级连菜单

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

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