jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"
%>9 J1 [; T/ e; N, Z
<style># x0 i- l. y$ P: S( `- H: H  Y
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }8 H0 y; b9 h' X* v$ j5 G
.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;( w% M3 o$ S- V( F" j# d
  padding:1px;( ?# N' a8 [- y0 Q: y
  margin:0px;}
</style>8 R0 Y2 U6 V& k6 o+ s
<script language="javascript">$ [% k+ f( Q0 e9 S
/ y7 h6 T. n& u. |. J% l* U
</script>  c6 s0 X" O2 x7 k
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
/ D5 m5 F/ _. c* g! d<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
7 }8 L/ X' u9 d. P: s<%$ S# Q3 D9 e+ \' U5 r) y6 t
  cdatasource ds=new cdatasource();  //数据联结bean实例
* {  d6 X" o% n/ g) v$ x5 b, b4 E  java.sql.connection conn=ds.getconnection();
* }6 t$ c0 {9 c6 l  java.sql.statement stmt=null;
4 f& X# R/ \  i9 l  t  java.sql.resultset rs=null;
9 \8 e: b+ [" E$ \6 d- R+ b) V  cdatacheck dc=new cdatacheck();
7 r4 |" ]7 J$ t, @  t: C* x%>5 J3 u, i* |7 H, X9 H
<%
/ k* {, V' A9 R1 e7 }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 \) ~$ x0 y8 P7 l3 e! K
stmt=conn.createstatement();
  o" e% R( |! R2 ^& G; _rs=stmt.executequery(sqlu);
7 q/ z" T0 ?. R/ C1 ^%>' I2 j8 c' j. m
<script language='javascript'>: k5 @- Z! L% i- k
arr = new array();
( L3 M* n, n6 U$ v<%  int temp=0;2 u, D$ D2 K- X& R8 L0 p
while(rs.next())
' J  g6 i3 |6 \+ {; [( ^{* ^* I" B3 K' y  E+ E  D& s
%>
6 s( _% @8 ~( o4 R& W' x% V/ Jarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");7 }# \0 R  j& X( I9 g3 t. K* j
<%- h& x% S# M! {5 O& z+ j) i* G, I
temp = temp + 1;7 B& l9 B# U' O) q0 W( M
}0 [5 `' o4 d& _2 b
%>4 K0 A( l. H. u' V/ _" j
temp=<%=temp%>;" g5 V- w  [* ]: l! M. ~1 W9 [5 C
function changelocation(id){ / n0 ]6 U& W9 n2 G
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 6 c0 f" L8 U' b0 f
var i = 0; 5 n* A( ]2 a" n& ]; x" a& }! o
document.combo_box.city.options[0]=new option('-------','');
0 f( u& d1 ~) h! X9 X  ~for(i=0;i<temp;i++){
! [/ @" l. }! t) K0 v. `if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
2 D4 V, d: e5 a. m1 Udocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); * i  r% G# H" m# P5 L
} : K' q2 {8 D3 C7 u  O# Z
}
' v7 C3 c  S' n. c}
. R# Q4 i  N5 S9 o4 [# o4 c; R</script>9 {; C) }' O/ I* V' k& M

) t6 J; V3 m+ O5 z2 y* R  R% L# [<form name="combo_box">  a' d7 l( H: ~5 I2 e4 l
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">0 ]! ~" _7 Q( ~5 U
  <tr height="24">
  I# f# E  d9 O$ F1 j' q, K' _ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 b. t: R% B. ?0 `; k& ~. i <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: @# F3 g( z9 G! X1 ^; L/ Y
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>4 O$ G3 h6 t3 }; [7 n  A
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
/ K% ]- t4 q- N0 b. O7 |# x' X/ ^% T  </tr>
+ i& o, r. R$ g8 E  <tr>
7 P3 v  `* ?0 z9 n <td>+ X* {  W; x  Y. l/ y6 I
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
9 s- U) Z% \& t' E  <option value="0">请选择部门 ---></option>
0 G; t7 G8 T7 ]; ~' B& `6 S<%
6 G: j5 j0 @. E. U) t1 p string sqld="select * from tdept";# e; K" q% O1 O
stmt=conn.createstatement();6 `; [* w- @: p' D5 T9 w
rs=stmt.executequery(sqld);" x5 S! R  {+ M
while(rs.next())
/ r: N/ K" [; n* Z- R  H{
- i% l# d/ I$ m  x$ X$ U$ d1 U# [%>
% {/ j0 D( i' g! ]# S( ]  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>8 u8 h# `" b% J2 @* B" d
<%
' d9 N+ b: W$ X5 J! x0 b% \! i. O}
, b5 l4 {7 E! W%>
/ o$ j. I, P7 }1 B# x  </select>
. k$ ~& L1 {! _9 x</td>. I5 x4 X, U2 c8 \9 A9 f
<td>
$ z: z$ u4 z2 l; O5 `0 s  <select multiple id=city style="width:150;height:200" class="bgc">
) D3 R6 ]! C7 C2 ~" }* t- n  </select>
+ c: ?) S3 p  i& T% H3 K) Q8 q</td>
/ E6 r! L- a" A& D <td nowrap align="center" class="bgc">. k6 }% J# v! |& I* H' N
  <input type="button"  value="<<" class="buttons">& i5 d* C8 x5 q: k* L
  <input type="button"  value=">>" class="buttons">
% ]; h0 e3 B* W</td>
% |3 a7 y' L3 A: Q5 ^! z <td>
: i, a0 Y9 G4 b( P  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
& B9 q4 w& A$ C) j" [. D% V  </select>& b1 F- r- S9 I% c5 @6 c
</td>: O% `9 t# W0 `! h% l, D" O
  </tr>
+ x) [9 N1 m8 ?* Q5 _0 v <tr class="bgc"> ' P$ I6 `6 b3 G) H$ K# e  b& L
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>0 ^  w) H8 X1 p9 g# [+ O4 ]& }; g
  </tr>2 F4 ^  v* Y9 E, Y: C9 C
</table>
' V0 S* M: `4 u3 g$ j</form>
: v% @8 y& V8 @. M8 N) A' `<script language="javascript">
, {7 F3 K6 ?, o8 M; j' T" v+ _//人名移动5 N$ [  q! G; J& }* @* A
function move(fbox, tbox) {) \: O1 a' Z" |% N& D
var arrfbox = new array();* Z2 ^$ o* k+ @% h" A
var arrtbox = new array();
" U, w; ]+ y: R) _2 ]! Dvar arrlookup = new array();
, V5 O, [" s/ y- n% ovar i;
; o5 I* Y$ L  s, H% n" h8 F  gfor (i = 0; i < tbox.options.length; i++) {
* m5 Q, J; H" O2 k6 n6 Z3 warrlookup[tbox.options.text] = tbox.options.value;
, `8 P; W6 i% t- V' jarrtbox = tbox.options.text;
, q+ ~, ]& i; [& e}
5 ^+ v' d* l2 Y' D  C+ }% mvar flength = 0;- l! M# @( ?: p2 R" R' N& V
var tlength = arrtbox.length;! k. h9 F: G4 b3 L$ k) f- M4 b
for(i = 0; i < fbox.options.length; i++) {( j& N* f) x) w+ V% {5 M
arrlookup[fbox.options.text] = fbox.options.value;8 k- }: b) p. K8 {! r
if (fbox.options.selected && fbox.options.value != "") {' m/ Z+ G+ N, w
arrtbox[tlength] = fbox.options.text;7 G! j: @' n" p" v) S0 E
tlength++;
9 L4 d3 y8 r4 V# |: O9 l+ x2 [}8 z* i# Z0 U% S
else {( B$ e& Y7 `4 v# g! q  a* [6 ]
arrfbox[flength] = fbox.options.text;: t" x3 U7 H; W9 F
flength++;
; {* d4 ^& M, @2 g( t( l+ h( C& N, i: o }
  S( m( I0 O. l4 J8 b  ^" }}
% n) W, ^; y- B! E( Oarrfbox.sort();6 P4 l  K" V, u* o
arrtbox.sort();
8 I) g- ]% F# ]
# R! ^: q" B8 ]% Q  l0 `0 ffbox.length = 0;. K2 Z0 F8 k) W
tbox.length = 0;8 n- q0 m0 I9 ^( y2 D" J. E
var c;& f$ w3 g- I  E( s8 b
for(c = 0; c < arrfbox.length; c++) {( h! @' M" T4 `# I# s4 J
var no = new option();+ q2 R) m7 G1 ?5 V4 o
no.value = arrlookup[arrfbox[c]];
5 Y+ [6 ~8 Q9 ?! h1 [no.text = arrfbox[c];
! B" B0 t  o+ {2 b6 Z9 r! D2 F( `fbox[c] = no;. V. u7 B' B, Y/ \% Q9 A
}
5 t3 N% l  m4 Y9 ]# Yfor(c = 0; c < arrtbox.length; c++) {
  A7 o7 J  S$ Z, Hvar no = new option();7 v2 I: @3 g3 |6 e( V. b
no.value = arrlookup[arrtbox[c]];
- ]" Q" f$ I! x8 `' Z1 ^; uno.text = arrtbox[c];
6 W( Q% c* r, T- J5 Z* d7 Ltbox[c] = no;" a: ]% [3 u4 i+ w" H+ u; P
}( T& f" [9 M! q
}$ z7 ~2 [7 G1 B9 a3 T
</script>4 z# q, U1 M. b* u
</body>$ _+ a8 `* u9 ?

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

返回列表

jsp+javascript打造级连菜单

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

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