jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"! C# M2 l0 {/ e
%>
<style>
.f9{ font-size:9pt; }0 k" j6 O3 B9 s: p$ o7 s
.bgc{ background-color:#aecaf9; color: #0033ff }0 T8 l; d7 D0 O2 D' q- i6 {( d
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;" I: d3 V& o; h
  border-bottom: solid 1px #4e7dc1;" Q( Y0 Q9 I. E* l% {. w* l
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;5 L& R+ {% ^; Y; |
  margin:0px;}7 ^6 \% _' M. m
</style>4 @2 o" g* ~$ m
<script language="javascript">$ _9 ~* ~; Q* Z  v4 d, x

& U7 L* t8 u5 a</script>: v) l2 r( t, l+ d) S* J
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">/ O, ?6 t- _5 W$ w3 w6 d& Z+ Y; v1 v1 Z
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
7 \' W/ z9 x5 p( I- ]+ M<%
- p0 X$ F3 h' I0 Q  cdatasource ds=new cdatasource();  //数据联结bean实例
( A* h5 R) j/ u3 E. g# t" @" L  java.sql.connection conn=ds.getconnection();
8 M% O. I$ j; j( i7 D3 n: [  java.sql.statement stmt=null;" \: k+ o( Q3 Y! B8 _% a
  java.sql.resultset rs=null;
+ v$ E, ^$ l( M1 [4 K$ a  cdatacheck dc=new cdatacheck();
" V# b# |3 {" r6 S0 i; W7 N%># H" q4 w8 [2 l, g1 [4 O3 N* p
<%
9 S" W7 f2 r3 u& N% [; lstring 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";
: \8 Z; E  V8 astmt=conn.createstatement();; F- [" ~3 I$ Y8 Q4 g1 ^& m" j
rs=stmt.executequery(sqlu);1 B2 |! v3 Q/ e1 {
%>! V4 s# A: x  V' g& k% ~: B
<script language='javascript'>
( T# H- f9 A( S# O: j( Oarr = new array();1 w1 r6 q/ \) ]& x
<%  int temp=0;! P- }: Q4 D1 v$ P2 U
while(rs.next())
! ]- c7 c" |. V6 V{
- b0 D/ u" w# ~/ s%>
( c5 h! f( o) a9 w: ]arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");/ J6 Z- o. ^7 n7 j4 P# X
<%
% Y( m7 N- y+ }  c) ltemp = temp + 1;
: h  P" t9 K( m5 i}) P0 i/ K5 N4 |! k8 Q1 N
%>
. x7 ]0 V  Q! g: ]temp=<%=temp%>;" t0 b+ y* P- u0 d; [
function changelocation(id){ ! ?" W) ~' X  l) ~1 P/ }# G, _5 `# M
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
4 e& C. x! z$ F4 }* S9 x3 q" jvar i = 0; 9 a) f, v% \! w+ M0 ]
document.combo_box.city.options[0]=new option('-------',''); 0 G1 j/ a- c# k# r
for(i=0;i<temp;i++){ ; r6 W6 g( D" g; H* u* z" M& O
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
, N2 C( g3 ~  j# w9 a2 V9 b% Bdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
$ Y$ B) L% `/ B1 q) D* Z8 a% K} # y' ^" ~; e* w: y
}   ^/ i0 ~  \- |1 M- U3 F! H' s
}
& f" f1 L/ b5 b$ K</script>
% c$ f0 J" J% [1 ~* _  t
' H# k: y9 `4 f<form name="combo_box">9 q& Y, _  _0 J
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">; |& `  o0 Q5 n) ]
  <tr height="24">/ a6 N: I, O0 x9 r0 M* _+ S
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>$ C6 K- m4 B- V) x1 c! }# `# s
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: e/ E! z9 @- _/ D4 Z- V
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>5 s0 R$ a  A+ o5 O" D
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>" U% t& I! c) W8 J
  </tr>
, ?4 f! E/ x4 _$ D" A" z! N# G) D  <tr>
" R& }# b. e' q) `/ T9 C  I <td>( N% N0 S, j5 b9 ?
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">) f- e$ X. f/ c4 w% X
  <option value="0">请选择部门 ---></option>" y+ Y) [+ U0 l3 S) S  W
<%1 L- H/ D/ \+ ~  Q# _' t
string sqld="select * from tdept";6 Y8 k" O4 p* c5 J% Y
stmt=conn.createstatement();
; G5 |- \5 {" J$ l2 H; h" N$ zrs=stmt.executequery(sqld);
/ p4 i- a% K. j* wwhile(rs.next()): G" H' q: B& H! ~/ b
{9 C" x* k6 g1 F6 D- ~1 ^
%>$ ^! a7 r$ }9 @2 |2 d6 c* q
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>" s/ O; i! u) h- e
<%
( y" w  T7 c) r! P}
, n, y/ {% T* M* H/ o# O1 u+ x# n%>
6 w% H: J# X. \" X% Q1 a" S3 Q  </select>2 d( }$ {8 c$ I
</td>8 D; L6 @) P- ^: p1 A- V+ H
<td>
& O, v+ B6 M. Q# `5 g4 r- t) p9 s; r  <select multiple id=city style="width:150;height:200" class="bgc">4 S# ]2 L. \7 r, T3 q
  </select>% a* B# d" [; ]/ f; x  D
</td>1 {  D. Y/ Y1 q
<td nowrap align="center" class="bgc">
( E0 n: _* R- g! G- a% y- N  <input type="button"  value="<<" class="buttons">
% A1 I1 `) @) y/ }' @  <input type="button"  value=">>" class="buttons">
/ s+ Y6 K& _5 G% L7 U9 }</td>; G) H: j1 H7 O9 a- `1 [3 i
<td>  m1 W( e1 I2 f; V
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">3 T( X. O2 @0 c; |  B
  </select>
% Z! k' `) t# ?( ~" U$ Y/ J( V</td>
! z& t" a8 H1 t1 z/ M' p  </tr>
$ d: H% ^  A) ]3 l5 [+ F. d' L <tr class="bgc">
7 a; }% b4 d% G) r; V' { <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>, S% B7 ]) u5 R1 v5 s5 r
  </tr>
: s: U& e/ A, u- @3 m1 ]</table>
; R: V$ g: w4 X; K; P</form>
1 ^& Z7 x9 w' l<script language="javascript">
5 o  g5 S+ P$ \! N//人名移动
0 p& e! U) E* N9 J5 A5 B* ufunction move(fbox, tbox) {
/ B( w- x- k8 _1 {var arrfbox = new array();; l$ O+ S) B7 E% w( v
var arrtbox = new array();
9 x( h+ m+ {6 D- |+ n5 w' Vvar arrlookup = new array();4 w( t  @8 ^. p6 u) }: @/ k. H  j
var i;
# Q* P& \8 {+ [: [for (i = 0; i < tbox.options.length; i++) {
8 i7 @7 F- t7 Q) h6 ?# Harrlookup[tbox.options.text] = tbox.options.value;# d; |# M1 ?3 l8 t
arrtbox = tbox.options.text;/ E+ a7 R" K- l9 n2 ?2 q6 I
}: t- w6 R) G: r: m1 l
var flength = 0;
; q& Z4 W- N7 ?" e; Z+ ~var tlength = arrtbox.length;
8 @4 w$ D4 A/ ^+ N  }- K: @for(i = 0; i < fbox.options.length; i++) {
+ k- A9 }# q! q9 Marrlookup[fbox.options.text] = fbox.options.value;$ l5 g: H3 V: S+ D8 Q- L
if (fbox.options.selected && fbox.options.value != "") {
2 O& `  e6 E* Aarrtbox[tlength] = fbox.options.text;8 V. G( Z& w  x
tlength++;' R3 J! A) T  q7 @
}
# g9 @; f) `! u+ _8 j4 delse {
4 X1 c+ m, |6 o( q7 e0 barrfbox[flength] = fbox.options.text;, l8 p5 d6 \, s3 M6 H3 u
flength++;
& w$ Y$ N2 ?8 r5 r# n! K4 K }
8 S; m" i. j( c  o5 o}6 A) A$ X3 I- n) G2 H) N9 m) e
arrfbox.sort();* {4 ^3 P  k/ ]% B
arrtbox.sort();. t: ^  `3 X% o( y* A" u; x# B* z4 n
5 H. @( Q. I: a
fbox.length = 0;, R" r% O9 s3 H& {" A( ~
tbox.length = 0;
* O2 }, x$ W+ l/ Avar c;
% m/ X1 E- d$ J# b9 L2 w/ i4 p9 A) h) Vfor(c = 0; c < arrfbox.length; c++) {; |6 M+ f; r1 b" F: V
var no = new option();1 L0 o6 y1 U+ N# B& N( x& M& [3 y
no.value = arrlookup[arrfbox[c]];+ K$ ]$ H/ ~3 s8 A' j7 y
no.text = arrfbox[c];" ?- l( r+ R" T% R- a; g
fbox[c] = no;  h% K# F2 w. C) H/ n0 K- C
}
. t; j8 c: t! H+ l( A4 Z5 v4 ~for(c = 0; c < arrtbox.length; c++) {: R$ @5 \% Z( q; C# l. V, D1 ?! J0 x
var no = new option();
6 p, f1 |% J& g  Q0 V! }no.value = arrlookup[arrtbox[c]];
# _1 A8 |3 e4 h3 m' l6 v9 `" ono.text = arrtbox[c];
1 E( b3 R7 a( Z9 A0 y4 Ytbox[c] = no;
: U+ i- N( g0 i7 v }- b  K3 b8 b* ]
}: f' v) ?! T0 T
</script>
$ P$ N1 Y9 _  Q( ^$ N! i, D</body>
( K: n; H4 j$ k3 M

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

返回列表

jsp+javascript打造级连菜单

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

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