jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"  y( @; z+ _( o1 G
      c pageencoding="gb2312"
%>
<style>. ^' d. [' ?# Y/ M0 o  _* j1 Y9 B8 D5 m
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }7 |$ p0 M4 |& R& r6 W! G" A5 e
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;, h& H7 K/ S1 H  d* Y; f. [
  border-bottom: solid 1px #4e7dc1;2 ]! F5 x( T6 }7 s, a
  border-left: solid 1px #aecaf9;" v4 f2 m2 W" b. x! b  y% o7 w  k
  border-right: solid 1px #5679bd;
  padding:1px;7 R: V) K1 D9 a* w2 u) L
  margin:0px;}
</style>
<script language="javascript">3 g! I, A, I6 d
9 T  e2 }& z% v( F1 T+ X# n; `- b
</script>
* a9 m% G. y1 O: L$ ~<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">5 C" ]. \% `4 t: m4 j5 t# [4 M
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
! G. s- |* w* x  l8 X<%
% x' u- W- o( j2 s* |) p' s+ W  cdatasource ds=new cdatasource();  //数据联结bean实例
1 m# D0 p7 u  z: Q6 l3 g0 b  java.sql.connection conn=ds.getconnection();* ]0 h# t% K4 O+ C' D% @0 d$ W$ A
  java.sql.statement stmt=null;- }3 F! \# A- I$ O$ S
  java.sql.resultset rs=null;
( e& _8 ?5 X  b1 D/ T  cdatacheck dc=new cdatacheck();
- e: K3 S. k+ o$ B( F" E%>2 p  [3 ~  n* K/ J4 p# ]
<%5 v+ U( o+ h  t, [3 c
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";- W. j9 B3 }: o
stmt=conn.createstatement();8 g3 `- b1 c( V/ H+ N3 X2 b
rs=stmt.executequery(sqlu);9 w  W; t& _) t- j! v0 m) ?
%>
' |( P0 V+ \# t$ V/ p<script language='javascript'>$ y+ o' v7 }' n5 n, F
arr = new array();
4 x! K" d) x* l/ x<%  int temp=0;
; c$ ~: w. t+ {  A% ]. |while(rs.next())
# h2 m7 K6 K0 F" d7 S4 E+ K. k{& I( T$ A2 i5 s" x7 C& {
%>3 Y5 M7 Y7 C) K, W1 S' i2 Q  z
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
2 D+ {2 |7 ^, }  ?<%% Y% V4 K6 U% W
temp = temp + 1;+ l( Q" V2 S# x+ m8 d3 S+ J
}3 f# O, P1 [0 ^& n; I
%>
* e+ `/ }$ o& ]$ M3 Ftemp=<%=temp%>;: |" b( g3 i8 t# _$ [
function changelocation(id){
! r7 ~" B0 \0 y1 Jdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
. u- l; C4 a" t3 G' `+ ^- Evar i = 0; ' G8 j" |: t8 m
document.combo_box.city.options[0]=new option('-------','');
& q( i. }' k: _5 B  f" B- ^for(i=0;i<temp;i++){
1 O; ~+ @) [. U2 z! C( [: zif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
9 x3 @2 ?( g0 G, m# ~, Fdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
# f8 K$ x& z1 h  X8 s1 w+ _1 {} 8 k" E' t7 a/ k
}
* W3 ?" k7 q4 B2 S& t3 |: ^" M}
# `! N$ v" q3 @! ?; k; j</script>
/ t- ^  G5 G2 D9 o6 o3 }" V( p9 s9 U* H$ U, D, I2 O
<form name="combo_box">
% _3 U$ f  K3 V9 k6 N- A<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">8 q$ A3 v( Y  t8 L* F" h! C, O
  <tr height="24">
7 @0 H' F% r3 v/ y <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
2 T4 Y. N. x# |, k <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
9 F6 O/ A* X6 A( E8 ^% E- j <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>7 w9 ^  [- ~  i. J
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
5 a* p6 e0 _# `' m4 ?. T8 d2 O  </tr>$ v" O# N  h0 _  a5 k3 h
  <tr> 5 s5 j( y$ T. z3 y5 l6 p
<td>- e+ R/ W$ Q5 a) G/ U
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
* @% h, x. b8 e  <option value="0">请选择部门 ---></option>
$ V  b, M" U2 u; U* J' ?<%
+ A# q5 W. {' P" f3 o4 l! z+ m string sqld="select * from tdept";
+ Y9 q) d1 {+ o* @% xstmt=conn.createstatement();
8 [; B( r4 E% G* y+ r3 ?rs=stmt.executequery(sqld);! B! O9 k1 ?: R+ {
while(rs.next())  l2 I& t3 d+ Y* B
{
- R7 @2 s; o( w+ k5 I2 V%>
% {9 h4 J7 O( j6 O  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
0 n$ M8 q( `4 C/ o1 p% V& I<%
- e* O" ~% f" k8 _+ |- s}8 F4 t! C* [5 u/ M. C
%> & ?3 k* r* f4 W2 t7 n( l! M
  </select>
' F) y  ~5 g. J& F0 ]. {7 H$ x</td>
. g0 f$ E0 l2 }9 J8 _. n <td>
1 _: g3 y' E0 B( ^2 Z3 z% r  <select multiple id=city style="width:150;height:200" class="bgc">; a$ L9 Q: i4 b8 W' f% \
  </select>2 o# \+ P% z5 r( V
</td>: t& a5 n$ \+ Z1 i& z1 N3 ?6 D$ T# X
<td nowrap align="center" class="bgc">
, J' N3 `9 q' q, X! |+ c9 M# @7 y  <input type="button"  value="<<" class="buttons">8 K4 ]/ i, `4 c& A; q) u
  <input type="button"  value=">>" class="buttons">- G$ S8 R( ^/ k. _
</td>
; ^8 i; i9 u+ D: `* f <td>
9 j/ Y3 K: ^9 v0 S5 x9 w  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
+ M8 X" b2 }3 z) a  </select>. z3 g( o$ g, K: ~) {0 i% p
</td>6 g5 _; v9 O. `5 j) S# w5 T
  </tr>
7 y) C% ?& ?# d2 W7 C- o <tr class="bgc">
$ p: @. ~3 ?. E" h <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
, f: d) |5 }0 S# y  </tr>
/ n, ~. t2 R/ I" r. F5 _</table>4 o7 C* z% j7 p. V, T# x
</form>
3 E+ P8 E  R1 ?2 h% @6 ?<script language="javascript">/ Y. r* j0 S, H) h
//人名移动% R+ ]% m- _; x* k9 b  f& H. x
function move(fbox, tbox) {
' x0 i' D9 @# r4 ]/ b/ G1 Wvar arrfbox = new array();/ W: }' v- o/ Y& P: d
var arrtbox = new array();% y: k: e0 r7 d; j) L
var arrlookup = new array();$ o- A% r3 I+ ~$ i0 a
var i;3 W% b0 v$ [2 P1 d/ d/ r# p* u
for (i = 0; i < tbox.options.length; i++) {
) o" w/ V9 Z$ k: O( D1 ~arrlookup[tbox.options.text] = tbox.options.value;
3 i+ ?$ S" r5 _7 O0 y5 ?% s8 |arrtbox = tbox.options.text;# i, L  I4 t3 s0 m( u
}
7 \7 B: r+ l0 n" |7 Rvar flength = 0;8 R5 y# ]8 v) d- v$ l$ p
var tlength = arrtbox.length;
4 c; u1 l9 o4 L, t" U. jfor(i = 0; i < fbox.options.length; i++) {+ H2 l( M; Y3 J- d' V2 q" D: S
arrlookup[fbox.options.text] = fbox.options.value;  d* [. o% L! v! f$ t0 W* S7 W+ d
if (fbox.options.selected && fbox.options.value != "") {" R1 k  n9 O" j* w+ y6 p
arrtbox[tlength] = fbox.options.text;9 x" O! U, o0 G/ }0 t
tlength++;
2 M0 Z3 Q8 A( m/ d: }}9 t. Z7 K1 `& E' X( R4 H7 \
else {. R( `$ Z3 t7 k% {+ {1 i) V  m
arrfbox[flength] = fbox.options.text;. G' P% A  ?: B) i
flength++;8 [7 F# B+ O0 B0 m/ f+ |% Z
}% U+ e) W" _+ z, S! t# L
}
9 p2 B. @& A; o& I# z, |arrfbox.sort();1 z9 m0 v! r. {- w
arrtbox.sort();
+ l+ U) f0 A/ S% R: a- M5 R
. Z  c/ \3 M' K4 K( E) tfbox.length = 0;3 K+ `) k  n) [! }5 p. L
tbox.length = 0;
2 o, P1 m4 M  c, F+ v* f' E8 ]var c;
) \  J! [: U0 C. o. I, A  }for(c = 0; c < arrfbox.length; c++) {# X5 D* K. v: V4 ]2 G% Z
var no = new option();
7 ~$ d" x9 H8 i; m9 T; Vno.value = arrlookup[arrfbox[c]];) B5 s! Z5 G" X8 d) x3 D% H$ |, y6 z
no.text = arrfbox[c];
7 J0 Q! Y, D: ?8 w: T9 x- B: cfbox[c] = no;
; v4 d" N! X, B% I; j" O2 z}
$ I( }$ g& u/ k' L7 efor(c = 0; c < arrtbox.length; c++) {
8 `8 |- i5 L6 t: u6 @/ X7 l9 xvar no = new option();
) B( ~5 g) d1 W% v1 @8 ^+ Yno.value = arrlookup[arrtbox[c]];! S6 x9 a2 ?! v
no.text = arrtbox[c];/ j$ T# Z+ E3 V6 _3 \2 W8 |
tbox[c] = no;. a' e: K% L0 N4 s0 i* n- C4 d( O
}
8 ]4 e+ W: _7 ]$ ~! f( [6 n}* R6 E: u1 |) Y% I) E, A4 U
</script>$ P) O4 d! V2 V6 [+ P- }; w7 t
</body># ^$ O; {5 T8 A2 e; h

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

返回列表

jsp+javascript打造级连菜单

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

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