jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"
%>3 q% B  z% f. l* s4 k
<style>
.f9{ font-size:9pt; }$ l: ]1 U; h6 ~9 L: A9 k" T4 w$ P' n
.bgc{ background-color:#aecaf9; color: #0033ff }" q/ Y# n. W1 f8 x9 F
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;0 K" Q: w5 ]9 d" ]
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;2 d! m) Q4 U2 j5 b. R5 P: ]8 e
  border-right: solid 1px #5679bd;
  padding:1px;! i/ y& L! F$ T  b1 M4 [9 C
  margin:0px;}3 [% E8 f! V5 r* g
</style>
<script language="javascript">
6 n& J9 H3 l: }6 g- t
</script>) @9 L* W1 m2 Y8 X9 d# l9 t& y
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  S. \  H9 L! _! |8 _; f4 ~; H
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
/ J: D) _: Z/ N3 e2 K! G5 U<%
) }; O% ~# y! d# ^6 U  cdatasource ds=new cdatasource();  //数据联结bean实例- g, m6 T" r# o' t+ t. }
  java.sql.connection conn=ds.getconnection();! T1 y+ S8 E( ^% _# u  [- @( [
  java.sql.statement stmt=null;
2 C4 {0 T" [  [9 O9 ?: y( S" O/ k  java.sql.resultset rs=null;! n$ \0 R2 k- x% m1 \: \
  cdatacheck dc=new cdatacheck();
* l, ?  S. A# S; q! W1 S; O%>" Z- ?+ }( ]2 a: c% ]
<%
; a" h5 h2 m2 Y& H% p$ H5 u  ^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 H' x+ h* \6 f# Xstmt=conn.createstatement();
% z" ~# G0 _# N! P, Hrs=stmt.executequery(sqlu);
9 X1 D; y- s) n! U) M%>' b, e: A% @5 N: q$ q6 k4 y* g1 Y
<script language='javascript'>
) P% l8 t6 {8 e+ r* j$ K. ~arr = new array();0 X5 b7 _7 T$ v8 c$ G0 a
<%  int temp=0;
  t/ f8 k& n4 u! jwhile(rs.next())
& T1 ]  Y/ d! H% W- d0 r7 `7 }+ ]{
0 d- |2 p( u7 U# a0 E. S%>
- [+ K9 M! e5 g  W) N+ _arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");' ]% @8 @0 _  p# `. e0 J* d9 H! _
<%3 s9 N5 m5 C, z
temp = temp + 1;
8 w# Z4 y% \! g9 V  Y" \}5 C. \/ t, b5 m  c5 ]+ S
%>
! }7 @; j) o* m7 etemp=<%=temp%>;, m9 P0 z- z! ?6 L5 T
function changelocation(id){ 2 D' A6 R9 y5 I2 v7 M' D
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 0 P: X1 b/ t& }2 y) m' w' V
var i = 0;
/ X7 P/ b" X) [3 L( J5 {3 Zdocument.combo_box.city.options[0]=new option('-------','');
+ [9 Q2 H4 b$ L+ O8 |2 D4 K* Jfor(i=0;i<temp;i++){
1 G  C+ h1 s. e% s8 Hif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
8 y$ d8 j8 d/ B1 s8 a/ f$ A: }document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); , F& U, j# ~, Q
} ! k% h8 |" J! v; U5 b7 K
}
' e) E# d1 B+ d2 u8 W$ g}
( p. n- Q/ |% ]) k</script>. n+ K: l( E: K' s. v, a! J8 V
( M. g1 R! _/ {2 c* I
<form name="combo_box">
* W9 G% L; p0 ]( Z<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">- K- V" W" f6 d, A. e6 P
  <tr height="24">) \) N9 X+ ]) X( |# L9 v
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
  _: x" g" W- N <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>! L! C' V, f$ N' j. B; n$ i3 x! E
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
* K! p, q- W" L% S) q0 }1 N <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
4 @9 q& v& u, n5 c  </tr>
, u, O" k  C. s  <tr>
, T& H+ o5 t; o <td>2 O3 J* W/ i/ q! w( b
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">; ~  U/ I# _. P* V( c! z! ^
  <option value="0">请选择部门 ---></option>: g6 t: w% l+ z+ H, p
<%4 [7 ^+ l2 ?/ n
string sqld="select * from tdept";
6 k/ B  U# u8 Kstmt=conn.createstatement();
% ]% G) I! g1 Y- E1 Mrs=stmt.executequery(sqld);
4 C' N5 E! ~; d1 A: e2 w. Zwhile(rs.next())
+ P4 h* X7 _: z4 L/ ~{
, Z3 f. Y: q: `( P2 e0 j%>
* N$ j# `; ]4 A) u  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>! L2 P2 d% y- n/ z; s( u& Z* w
<%
2 C" H) n- A9 u+ i2 {3 K2 E: `}
/ k- p3 z4 a& z8 x8 r%> / t* M3 T* G) ]: Y* z$ b5 E3 s
  </select>  }. o+ @: X1 u. K
</td>
# B% {3 [3 K$ L. y3 a <td>1 ^4 D  x1 x; {, g
  <select multiple id=city style="width:150;height:200" class="bgc">' r$ x  q; |2 p& V' R3 Y, B1 c
  </select>
2 k! `3 V- v7 U1 y( [. m</td>
2 }  j; _! _: B$ b& q <td nowrap align="center" class="bgc">
0 ]& @% ], O+ Z; B. ?/ H  <input type="button"  value="<<" class="buttons">) w' B! I. x0 E& b" G2 Z
  <input type="button"  value=">>" class="buttons">
- c/ P' u3 p0 |</td>5 u/ b4 u# J* S+ G* w0 p$ q9 O& R
<td>
! o# q' m" P5 W4 y$ g  t  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">8 o2 \) j- Q) p4 X
  </select>
# m; p) g: o4 i! x5 ?</td>$ E4 M: y# ?( v
  </tr>
( u3 V. _3 w2 B* k; p <tr class="bgc">
" N8 _% m2 j# e4 W( { <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
8 i3 E6 ]* \, A' V& m  S  </tr>5 l- Z8 U; J8 ?+ V( |& j
</table>
. ^0 P7 _" a5 }' f5 q/ O- s</form>
* q' G% a$ s- x5 I8 g<script language="javascript">
0 D2 @( R% ?! }% r//人名移动6 s% z( `) q6 ?, R4 @
function move(fbox, tbox) {
6 ]3 ]+ g1 {/ o' M: |( ?9 Kvar arrfbox = new array();; G9 z, d0 T9 b) ~* M
var arrtbox = new array();4 O' }% y! K/ Z7 @  D" [" Z
var arrlookup = new array();2 ^5 K/ @3 {1 \5 U
var i;
! K, L0 n, I9 W! a5 `/ V& \' sfor (i = 0; i < tbox.options.length; i++) {; i/ b# `7 ]- o2 x4 I
arrlookup[tbox.options.text] = tbox.options.value;
8 L: V/ S/ L& r. r& m, }arrtbox = tbox.options.text;
( p: V; E& j- |7 d" J8 V}  b9 h+ @; N$ x% y' r$ A
var flength = 0;. J8 t% w! `+ E0 S
var tlength = arrtbox.length;
6 V& m3 g! e  p0 A& ffor(i = 0; i < fbox.options.length; i++) {
% y+ R5 o" L- n3 J4 l9 [. n3 Rarrlookup[fbox.options.text] = fbox.options.value;1 U7 U2 h( O& E+ ?0 [
if (fbox.options.selected && fbox.options.value != "") {4 k& T' y2 Y, B" C* e
arrtbox[tlength] = fbox.options.text;4 l% Q) T" D. {
tlength++;& h6 x8 K: o8 g
}( O% H% i! C5 |" R! }- }, n% i
else {0 _2 m) [/ n7 q3 s
arrfbox[flength] = fbox.options.text;
/ L: w" ?% `9 ]) I, Z8 {flength++;* o5 k- Y( |% ^3 h9 B3 @& E
}
' n# N& P' a% G5 \7 h+ d: S}
: b& a- j/ ]' W0 varrfbox.sort();5 ]- V; \/ f; S7 t) U" Q3 R* g  |" p
arrtbox.sort();+ K# j& n0 n& r% |  `& V

) ]8 y& `4 O: ^. V$ kfbox.length = 0;+ ?/ ]- J+ a2 X# ^
tbox.length = 0;
; v4 V3 O" h2 X! x/ J$ P5 fvar c;2 _0 h+ @# e; L; O5 `' L# H; U& ^
for(c = 0; c < arrfbox.length; c++) {% N3 j8 c2 a2 P( A
var no = new option();; R0 M$ D5 U' \' `' ^# e# a0 C$ }- ~4 P
no.value = arrlookup[arrfbox[c]];
: k1 [% P0 [4 Q9 b$ P+ E: \, cno.text = arrfbox[c];4 C3 Q0 z* A7 z( O" ]% F& I& T
fbox[c] = no;+ F! l1 N7 F+ }; e3 W
}
1 d% k) V6 _6 afor(c = 0; c < arrtbox.length; c++) {$ x- {# Y0 |/ W1 Y: y+ T5 W
var no = new option();  ~) f( [/ z* T5 c3 N% o; n
no.value = arrlookup[arrtbox[c]];& ?6 w% y. H) k5 T6 P# C7 B4 l
no.text = arrtbox[c];
1 C# k* B. h6 n3 U0 d5 Xtbox[c] = no;/ u7 _$ \0 b$ y: @9 [4 T
}
2 I" W+ P. O- V# k6 h% q}
3 e& Z! z3 O9 s* b/ k& H, V  V</script>
' O$ D3 m+ t/ u- ~* u; ^</body>
. K' }7 n4 p" u% r4 ^7 }

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

返回列表

jsp+javascript打造级连菜单

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

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