jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"" x0 d9 ^/ X0 U
      c pageencoding="gb2312") m9 m% O' j& S, z/ c/ l
%>4 v2 w" h2 A! d7 i* V7 Z8 K# H
<style>* A) {+ M  Z' J/ c; k' W" z
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }& U+ ~% ~1 `2 s* R: B
.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;: Q0 C8 m4 |# b8 `7 M- c
  padding:1px;3 ^  c  j6 n+ g3 I8 b5 V2 W5 o
  margin:0px;}
</style>
<script language="javascript">5 ~$ [  Y$ O3 v5 [  d$ z$ a: L& ]

3 \7 q0 D7 V3 }- V</script>
  ]- g5 o- z' S% ?8 T<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
5 r8 B9 @. n& ~1 Q<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. C! V+ e4 X( |; ^% F<%
6 H. W" Q% X  G! R6 N& J  cdatasource ds=new cdatasource();  //数据联结bean实例
1 t5 p' L0 O! ^7 [  java.sql.connection conn=ds.getconnection();: C" l! L0 B& C9 ?3 v
  java.sql.statement stmt=null;
+ u! a2 F, \) f- f' _% _3 N  java.sql.resultset rs=null;& z% g1 M+ t: y/ c3 |
  cdatacheck dc=new cdatacheck();
" I0 `/ H; ]' B* n%>' e2 N$ ?6 b+ p" L1 |6 S
<%4 b1 K$ S2 x0 h. |
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";
0 h- H2 a4 |9 C5 p9 Cstmt=conn.createstatement();
; ]5 M; b, l, D9 `- R% n+ }rs=stmt.executequery(sqlu);
1 X* w( p& o1 V- J! m, P" w( S%>
+ A* A: b! [7 g! k+ s5 Y<script language='javascript'>
/ [& b' @; f3 c9 N1 Parr = new array();, U* [7 ]) o+ {1 C3 w/ H
<%  int temp=0;, {  E* ~# ^# p' W
while(rs.next())
6 |& D$ m. B; `( r0 b{
2 K) W. d) A. c+ K%>
7 p7 n# ]. R% z0 X& tarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
; h8 o  k" l2 V2 O  k<%+ [1 i" t3 S  j9 Q' G- W4 q
temp = temp + 1;
( o' F9 R: F& l; c: D}( B; e8 `, C, t; t
%>- U. p1 P) B9 x' r( J! [: B
temp=<%=temp%>;' ~7 Z2 a( F* s6 G. o0 ?% a9 s
function changelocation(id){ 1 @2 \8 A% ?' N) T% g/ |
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 + \! b" h: U  T: E0 X
var i = 0; + e/ a; X& v+ C# S
document.combo_box.city.options[0]=new option('-------','');
% [6 |9 ^5 C0 ~" X  Z" I  \4 h7 Tfor(i=0;i<temp;i++){
, O4 o7 ^; x2 n$ z5 Z) a- |if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
5 m* B% a, w: idocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
- x$ P: X1 ~6 \' H  g7 m  [$ W}
! L& t% y, t  ~! y9 J% D" M}
% u& [% k" O1 b. h/ _0 W8 _} 3 I3 G! \1 Y, w0 ]
</script>
% U7 P. s4 G" S3 C' L7 S7 {9 r; h4 a+ m
<form name="combo_box">
# v, F- D: ?- r2 I+ a5 {9 `<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
- g6 O% n5 D. F# U. k9 k! Z  <tr height="24">7 C: b" F" [6 n6 z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>8 {) H# B, @2 S: _
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>; K9 t$ x. t: ~, Y4 U
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
  X6 @: C8 Y/ `/ o& c4 } <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
8 j, ^; P7 Y3 R* q6 V" O) B  </tr>+ ?$ o) \- @/ ~% k
  <tr>
3 \. F  t2 ?, W <td>
# }7 o. A5 m8 |. ^  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">% X& F; F) ~+ p1 s! N3 e& d, T
  <option value="0">请选择部门 ---></option>
4 ?* ^3 G" r: f$ K<%7 ^( G1 [! b- Z
string sqld="select * from tdept";5 ?+ G- s7 g1 x5 W2 G! p
stmt=conn.createstatement();" E" u4 l- O0 r6 g6 R& I
rs=stmt.executequery(sqld);
7 z# \- F+ {+ C; p. uwhile(rs.next())* A  c2 E2 {5 u6 ^, \$ d  V9 Y" U
{4 T! I) C% o( D9 a
%>4 Q& ~3 N3 L, y: ]" L; ~& O% o
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
6 S, y% F* D: ]0 m& i6 ?$ d<%& D5 d7 P" v2 _/ N$ J
}
6 B. g6 C2 e% J+ X2 w, M% Y%> 5 P, N+ W' b% s! s
  </select># p) D: x% V0 ^9 N4 o
</td>! w# ]+ K. _5 Q- C4 `# z0 r" _  Z
<td>- ]+ F0 m, C* E7 a. q$ z' ~+ G
  <select multiple id=city style="width:150;height:200" class="bgc">
' _/ g$ d% |8 D3 m2 i# ]0 S  </select>
: r/ d" b  K, k" Y8 E</td>
, u5 P% {3 ?6 {' r <td nowrap align="center" class="bgc">
" Z6 @0 h* V* K9 K/ o0 J& t  <input type="button"  value="<<" class="buttons">
' F- S* J* c& F3 o7 n5 G4 n  <input type="button"  value=">>" class="buttons">- S0 x" c$ _5 l( ]+ B
</td>3 X$ R& b. m, p/ V. H# \
<td>9 x0 o6 t. O$ _  T0 n3 N1 T
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">$ l  z3 Q6 ~9 l0 D, F8 B, Q
  </select>) \$ I6 l( G, N7 n
</td>
: ?7 H0 O' P( v/ U! ^9 }  </tr>: Y; N6 z5 {* I) Q
<tr class="bgc"> * F* R7 q% d9 M; c. L
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>1 I( `* h' V) v: Z4 E' ~8 Y) m
  </tr>
9 v) q! W9 m) M. f0 b) S</table>
. b7 ~! ]4 b  q1 |( j) C& y</form>
5 ]* c- o8 Y8 H7 Y6 B+ y% `<script language="javascript">
% i7 h; S7 ?+ y8 u0 \//人名移动* e  y7 k6 M  ~+ N" R9 A$ h
function move(fbox, tbox) {
' e7 ^. z# ?5 k. B0 j6 w$ R3 lvar arrfbox = new array();
3 e/ Q  w* J' h& F: S: Pvar arrtbox = new array();: i8 y6 \3 F( |/ Z" Y0 Z
var arrlookup = new array();
# O2 V( [- e! Y$ x. hvar i;
! Z, Q6 \( B% w, r0 e' \3 Pfor (i = 0; i < tbox.options.length; i++) {( o' L. D7 ?# Y+ G
arrlookup[tbox.options.text] = tbox.options.value;; ]8 j7 j, b/ Z
arrtbox = tbox.options.text;6 S! b; Y) ~4 c4 W
}
) l. L6 e# _- nvar flength = 0;6 v* X6 j6 s3 n( T0 k
var tlength = arrtbox.length;' X/ W/ t1 Y% _( Y- ]5 I$ P3 b
for(i = 0; i < fbox.options.length; i++) {
! m% H- N0 d4 u1 varrlookup[fbox.options.text] = fbox.options.value;( ]% o8 l/ c. m$ i0 }- k* K
if (fbox.options.selected && fbox.options.value != "") {
! h' n9 I+ E& h" X0 H1 x( Q( ~arrtbox[tlength] = fbox.options.text;% ^+ l4 `2 Q$ ^6 n
tlength++;$ }8 r  T* Z: k- s# c
}
. t( k4 \( {# `* h0 Ielse {
" a/ B% p' e* g0 K: e  n+ Zarrfbox[flength] = fbox.options.text;! c; S" v! k; `6 }3 f
flength++;( z4 Y& [4 U, x5 g+ O: L
}
/ r5 O0 w" _+ n) L" U}
7 M# T. D6 b+ c8 Y* f9 aarrfbox.sort();, t0 n/ O# B- F
arrtbox.sort();* U/ N2 L+ Y0 [. L. c. A6 W
# S) y( [% `1 a4 s4 D0 c. o- T
fbox.length = 0;
0 P( @- c; S) {1 xtbox.length = 0;" Z' K3 S$ M# d: @$ P- Y4 Z6 X3 x# ^% \, p
var c;
6 P1 }4 z5 a2 Z8 z' X& Z/ K: Kfor(c = 0; c < arrfbox.length; c++) {
* ^% q% T& o. _var no = new option();
2 r8 p1 P4 \4 G: u+ ?no.value = arrlookup[arrfbox[c]];3 E6 g0 p) x; @
no.text = arrfbox[c];
- f3 @9 F" M( s0 Y7 mfbox[c] = no;
5 g: J) }( A( w* M( S}/ _+ L# Y( T& S+ E2 d* ^
for(c = 0; c < arrtbox.length; c++) {
: m( k/ G' [8 G* t0 t: b; H: Wvar no = new option();
0 o) c- s7 \( L- sno.value = arrlookup[arrtbox[c]];/ p: _% ?$ Z8 S( H
no.text = arrtbox[c];' E- d' w" F! N5 a; E  A' L
tbox[c] = no;1 q1 O! A. g. y) u3 Q
}6 s$ p7 ~/ I, E0 D* l
}" c+ Q, x/ o: M- w, ]: X* X6 ?
</script>' v( w$ U. a. y" a4 x6 d
</body>+ ]$ {8 T2 r6 e

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

返回列表

jsp+javascript打造级连菜单

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

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