jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"7 ?  V. D8 h+ y" g) _- e
      c pageencoding="gb2312"- D6 F8 R6 i6 n5 v
%>3 K( C- \7 M) V$ I* M0 p7 Y9 g
<style>. p% y8 N$ j, h* S
.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;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;$ s1 M7 u2 s* N
  padding:1px;
  margin:0px;}. K$ G) V0 k! Z# b: \
</style>( O9 x5 d* o% {5 F6 X) m8 E
<script language="javascript">: m3 {8 d9 [" L* I
$ f/ {6 C* L' ~; a
</script>: A' O5 n- k+ M1 i
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
5 K  j1 _. B( D4 C- o6 f<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />- M8 c- ]+ q+ o
<%, d' x3 L' P" ?
  cdatasource ds=new cdatasource();  //数据联结bean实例" U7 e/ P9 ]1 }0 W4 M, k; e$ g' s7 K3 M
  java.sql.connection conn=ds.getconnection();  H* d/ E6 }( i# \% D7 _( g
  java.sql.statement stmt=null;; \7 t! q$ y3 p/ d/ B" a
  java.sql.resultset rs=null;. w7 R' U  }$ i9 F, R
  cdatacheck dc=new cdatacheck();
! u5 I8 P, o; Q$ w1 i6 L3 O% j: T%>: Z2 ^& X5 p2 n: J# S
<%
' T+ x( M1 n$ a8 @" B3 m! o: Jstring 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";
( N! `: V9 j. A2 c3 C0 Dstmt=conn.createstatement();* F' w/ J$ x1 D8 A. H1 Y
rs=stmt.executequery(sqlu);
4 M% S2 f- n: K1 ~2 O/ a%>
, f2 x$ T" J1 |8 d<script language='javascript'>; t0 `5 y8 H1 l3 u
arr = new array();3 O+ ?7 e  P1 j, ]( D& b/ s
<%  int temp=0;" ~( Q: I: w6 }( Q9 s! y  P
while(rs.next())4 \; n/ s  d* Q! x: k+ J) P
{
, O9 X- ^# H# l# {8 L; o# ]& y6 L. ~%>
5 a+ C& t2 r9 zarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");  i/ q# R: t  W$ c4 T, y& E, Q# T
<%
. g2 V( E0 r  l- F! p# t$ Atemp = temp + 1;
- R; K4 n6 Z' y5 n2 |+ D5 F}
* X) |+ M, r! X" z5 Z%>: z2 |, b  J5 @: l3 K
temp=<%=temp%>;, w9 z& |  Y2 \' q! D
function changelocation(id){ + b7 r: e6 g$ p
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 ; j$ c; G# ], Z  q- J; W
var i = 0; 2 X; i# e  ^0 V, q3 w/ r0 Z$ |
document.combo_box.city.options[0]=new option('-------','');
+ x* c( T7 b7 F5 ]3 v' V6 Ifor(i=0;i<temp;i++){
' V' Y8 q  e4 g2 ?( s( vif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] 5 m0 n. i: @0 W, J3 W
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 7 K, w2 n' D& r; P1 c0 u2 f9 v
} " s' H: h! e2 P+ a3 |1 [" T8 J
} 9 V' S; |! X; N7 m  F. u
} / f# Q$ D4 {& f& ]
</script>/ E" H' d6 s) N) W

+ O3 o3 B# i- K2 m5 t9 X+ W2 S/ h<form name="combo_box">9 q6 g2 m; }. P' w
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
5 u4 A0 c9 ?& c7 z5 C$ y  <tr height="24">2 ^! m1 i: E6 x% l
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>& b2 @. X  C" H3 }$ i
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
! p5 W) X- {* ]$ \ <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>1 N" [% K) W$ ]
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
9 {5 u  y. R1 N  </tr>3 |3 }& @( [" e% ?- R8 e2 h
  <tr> ) m5 u  |6 n6 {% G
<td>, v" ~! d/ ]$ P5 v! \4 L! o
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">2 g2 M  P( y% i
  <option value="0">请选择部门 ---></option>
# \7 @  d; g1 e& b6 k) @- r% I<%7 x2 k2 X+ e2 }
string sqld="select * from tdept";
3 {8 W1 {; \" @' V7 astmt=conn.createstatement();
0 P$ J! N5 t$ i! m# ~6 Ors=stmt.executequery(sqld);
* |: W8 T% [5 u, {  Owhile(rs.next())/ Y# t6 I) j4 A- `- h3 p1 w- ?1 p
{
5 r$ }9 S2 H4 ^. `%>% [6 b& e! `) X! @7 O" }1 _
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
& `: ~. M, _( e  r! i<%8 ?$ g  @/ T- x& J0 M  [) B
}
6 g8 O, p; q; T1 L3 g# Z%>
' H$ P, l' x  m; e9 {# }- n, v  </select>
, g" J; P6 f' H3 r</td>
0 ]/ K* Y) G' X' r <td>
5 s( _3 \: r8 z  t3 f9 X  <select multiple id=city style="width:150;height:200" class="bgc">6 m# c) K7 z. `' P
  </select>
! Y: q/ y7 O$ e  i3 s" a</td>
2 H3 E) w6 a  Z' k+ x+ `. _ <td nowrap align="center" class="bgc">! u# r8 |3 W/ ~* F
  <input type="button"  value="<<" class="buttons">8 @$ X) |0 V3 [5 D( l
  <input type="button"  value=">>" class="buttons">& K( {" S7 I* G( h/ P% j1 ~5 _
</td>6 L/ D3 v( P% ^3 ^  {
<td>
! X' ^& V+ \, G! }- Y: s! N( W  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
' K9 F$ I) E" X% |0 f  </select>- Q3 x) l1 f" w) X% S* h: s5 a
</td>* m4 {& o2 c( D, t( P( F- k3 Y
  </tr>
# c: Z8 y$ X9 u9 A6 |: v <tr class="bgc"> ) a! \/ q3 D- E! ?! g- y6 x
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>: T1 g( n$ d. |- }0 u$ u
  </tr>, i2 ~( n! N( @- A7 R% \, b
</table>
* [( G" u; Q/ O7 O, T/ \1 ^</form>
' d' [& g& B1 w% _. A<script language="javascript">
- U& P% M, \. a8 t) g! Z8 F//人名移动
2 V! k; ~- h6 B9 z  I8 ^function move(fbox, tbox) {( ?1 e# u% J+ C; ]
var arrfbox = new array();5 |8 U' y& ]( Z3 z- Y
var arrtbox = new array();& n' u/ g9 P" F, j  A! ]
var arrlookup = new array();% b9 r2 `4 g1 l# n& H
var i;
1 T3 d9 T. C5 m) J4 {# Nfor (i = 0; i < tbox.options.length; i++) {
( W4 l, v. d$ y. X! u5 s( Rarrlookup[tbox.options.text] = tbox.options.value;5 H' D5 x' S; D/ T4 V' O7 f
arrtbox = tbox.options.text;
4 x, i+ z; @8 J5 o% q}
  f: _# b. h5 ?% t5 r9 {% s. qvar flength = 0;5 k& p) ~3 d% F
var tlength = arrtbox.length;" z) r1 T7 Q6 M
for(i = 0; i < fbox.options.length; i++) {
! y- L1 @% Y0 Z8 B% l0 Qarrlookup[fbox.options.text] = fbox.options.value;$ j2 \  x8 ?& a& H! I" P
if (fbox.options.selected && fbox.options.value != "") {
/ O) g- I. R1 ?8 q& S- m3 ^arrtbox[tlength] = fbox.options.text;
& A0 n9 o5 |" Y( @, |3 ftlength++;5 E' R, @% [8 \; q6 T  Z- v7 v1 o
}5 y$ q8 w6 _( ?. T6 j: F( f4 t
else {$ p, x5 \* h0 f( ^% ]
arrfbox[flength] = fbox.options.text;' I( i6 j: z, m, B- P, b
flength++;, M$ h# i: a5 |7 A
}; K, g2 l  D8 j( P8 Q# A5 {* c( u3 F' B5 b
}# e6 I( {+ f6 K7 q8 a
arrfbox.sort();
/ p8 h: K0 f: W  ?arrtbox.sort();
0 I+ H% B. K, |6 }" ?: O* }7 A& c. E+ C  j. Q* o" }# i  X
fbox.length = 0;0 R5 B9 g4 s  X0 e1 d- W* d# r
tbox.length = 0;$ }4 }2 m4 x5 z4 H# ~
var c;* ]4 C; _0 g4 q! N, o& [
for(c = 0; c < arrfbox.length; c++) {
) {3 x5 Y. E  q& jvar no = new option();
9 V) s8 A& E) U. S" x7 c1 Cno.value = arrlookup[arrfbox[c]];
* j; I% U/ [. b4 Bno.text = arrfbox[c];
7 m. \$ z  S" s5 ?% Lfbox[c] = no;) |( l' ^. W( z5 x+ X# [; R( K( k, O
}. E; F6 }- N% s! r( W4 H
for(c = 0; c < arrtbox.length; c++) {( a% n" D+ n$ \0 B
var no = new option();
4 w. V, L% o  H& F! a* P' M6 uno.value = arrlookup[arrtbox[c]];$ H( P/ E, b9 x0 u2 c7 g" S) o
no.text = arrtbox[c];
) M3 }3 k! E" H6 q4 C1 xtbox[c] = no;/ N2 p0 ?- {# b8 d9 W
}
3 n9 W/ c9 P5 v' l' S' t}
# f  I# W: }( v& T</script>- @7 v0 t  q# U. l
</body>* {2 C. R1 T4 w  m# E

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

返回列表

jsp+javascript打造级连菜单

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

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