jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312". x; P& }/ t( }& n  k  O
%>  I" R; z9 H) Z
<style>, [2 {7 b- p8 h) Q8 `9 u" w
.f9{ font-size:9pt; }' d7 C0 z4 s) C9 M
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;0 d! W% K9 `% a; M2 [
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;! c7 p) t/ r& U+ Q
  border-right: solid 1px #5679bd;
  padding:1px;+ X4 O9 r. A: P2 J8 H: |" q0 F
  margin:0px;}1 j' ]. F: y# L2 N/ J. f
</style>1 f: K8 U# f; i- T( v; r
<script language="javascript">, O, S- c# h( {: Y
# T5 i; R$ I3 w& E) _' }3 A- D+ A
</script>
3 n: O/ ~2 \) u+ E, e: O<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">" u6 `0 D/ \3 R9 _+ `* f! s$ o
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
0 s, c- y. @- h1 D5 _: ]<%
3 T! S( {, n5 P' y: N+ ^/ A! D  cdatasource ds=new cdatasource();  //数据联结bean实例' G6 u0 Q. z) O; H9 B# {
  java.sql.connection conn=ds.getconnection();
0 y4 t) K0 f) |  java.sql.statement stmt=null;" E! E8 m7 I' _8 U( v, \# T4 ]& |+ r4 g
  java.sql.resultset rs=null;
6 U4 g1 ]( K, n4 f6 {  cdatacheck dc=new cdatacheck();7 v; }1 f* v1 v) E* b
%>
& S# {2 i, k# I1 V0 z<%. J7 I$ o$ `# L0 L$ o
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 Y5 A. x) P6 X6 hstmt=conn.createstatement();
; c2 U* Q. v! h5 I/ [. n& grs=stmt.executequery(sqlu);
8 n, H& E* J! \* l%>
7 f4 a, B# k( h$ f" K% R: ~% t<script language='javascript'>
5 {# r7 M  X' `' }( v+ L" Darr = new array();
; u  }0 `. N0 `( k5 D" `) [! {<%  int temp=0;3 G# S* S5 P2 V2 z4 \- W
while(rs.next())
) R1 f3 ~( Z. L, I5 ]8 Z7 b7 g{
' m5 b" v+ c. q& V5 }0 r: o%>
4 n' q; x9 ~) W8 V) darr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* O/ U1 b- ^7 B. b9 K<%1 F) e4 u& Z. L9 y& Z% B; \* Q
temp = temp + 1;3 b7 e. E1 {; ?. i8 g
}5 X6 z  d% e2 s3 I) K2 D" O
%>) b1 X( ?" A9 @( L7 y
temp=<%=temp%>;! I9 b/ k1 @7 S/ C: a, Z
function changelocation(id){ 2 \4 i5 C* |9 f: K/ G+ L
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
) S. j% ]6 p$ _! D8 }var i = 0;
! e; c# R& D. N7 R) Rdocument.combo_box.city.options[0]=new option('-------',''); 7 ]+ s' h7 R% p/ I$ |" `- q
for(i=0;i<temp;i++){
4 f. G) q8 w+ L; A/ i/ P& V. p, \if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
1 B" [0 `# v3 v) ~# z, gdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 7 S+ }9 R9 }2 b& T
} : W& M/ z. l; R+ g/ ]0 {
}
+ l# I, f7 ?7 \} 9 K! q3 q2 T0 a  C6 G* k$ ]
</script>
% B3 g0 Q7 |% f  o6 ~' y. a+ t% u8 n8 M0 M" l
<form name="combo_box">
" ]# }9 f4 n1 C1 m2 U/ s; C<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
( s! G/ N. S$ A* G# @$ @* I  <tr height="24">
0 Y( W4 C( D0 V0 f) Y <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
, j, y4 \  S- W <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>* d2 T1 [1 j, h( I
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>9 H) A# q5 @  v2 y4 R1 ?
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>7 ]: f& Y, f4 b; L
  </tr>) O6 _  y# m: \5 y7 ^# p/ D
  <tr> & d% t! g& D+ M6 z2 j
<td>
+ m0 {$ [* W1 I0 E3 Y$ y  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
0 ]. \9 [! ^) j6 ?3 z, h1 q8 m  <option value="0">请选择部门 ---></option>
. q) R0 F0 x# [<%: g3 T3 j: j9 C3 v0 j- r
string sqld="select * from tdept";- `/ c$ j8 q% P% A" k. _3 G/ M" T
stmt=conn.createstatement();
1 Z2 L8 A. d* S* crs=stmt.executequery(sqld);9 j( s& i8 s( U# O' P/ ^6 e8 b5 s
while(rs.next())- o! W# i2 E* ]4 o% G, S
{
' v/ e- c0 P+ w" ]0 v%># N, H4 w1 O9 j7 B% R* o! Z( ]
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
" D2 Q9 M6 m2 c+ E' v3 e4 ]<%0 T- ^9 m/ j8 H  a
}2 ^  i) x) E) M- m* y. ]
%>
: }3 v0 M! l6 f. _7 j6 l  </select>
* S' S' z# o2 D& d; P</td>
* A1 T# B% R) s' i$ H, M <td>3 x$ F2 L- T. f. n. ?2 B
  <select multiple id=city style="width:150;height:200" class="bgc">, E3 }  c  a8 @$ T2 F: D' x
  </select>" L$ g% a' [+ b
</td>( p& Q4 h* H( x( Q
<td nowrap align="center" class="bgc">
5 ?$ C6 m! r* W- @! [: ~( W7 f4 g  <input type="button"  value="<<" class="buttons">
, h4 B: |( j+ ~# F* K: ~  <input type="button"  value=">>" class="buttons">
9 ^& U. G6 P9 x7 b1 I3 Q7 k</td>
2 s* t( n+ ^. Q; O <td>
: H  r3 q% \9 a) Y) T5 W3 c9 E' p  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
4 `# |  m$ F& X0 P7 S( i  </select>  P1 f% E& E; ?5 ?3 ]
</td>
8 W: `# r2 P3 u0 b1 z  </tr>% G6 p6 a3 i+ j" o
<tr class="bgc">
/ {: s0 N; G# u$ w <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
" k! W) ~3 R; f" Q$ r: k  </tr>
# `$ M! d( i' [, q' O6 ]; l) l" q</table>" f0 x  S7 J& e
</form>
4 T/ F: _8 n; p3 {! l. E7 e* H<script language="javascript"># ~- X/ l  j0 j$ D1 m/ K, ^& ?
//人名移动) i/ H3 w4 g! z5 K7 Q( G- F8 K/ Y  ?
function move(fbox, tbox) {) a9 Q3 A5 ~/ [" X) I0 B
var arrfbox = new array();, I& r& _- L" O, O
var arrtbox = new array();
% h) C0 u; \5 ~' h. g3 pvar arrlookup = new array();$ ]# {1 ~9 N. h: i# A
var i;1 F1 W; Q  n) S. I; C( Q
for (i = 0; i < tbox.options.length; i++) {
& U2 r) M0 ~9 [( xarrlookup[tbox.options.text] = tbox.options.value;8 f& U+ ?$ a7 t; {9 h
arrtbox = tbox.options.text;
* E! O; m# l7 c' o( y5 |2 k* j}
) L( z2 O# S9 h: b6 m; O8 G) evar flength = 0;8 W( p. M! Y8 E4 E; j
var tlength = arrtbox.length;- m# U! U2 M0 ^7 w
for(i = 0; i < fbox.options.length; i++) {; D& ?& Q3 X5 G* b" _- ]! P( [, j: z1 [
arrlookup[fbox.options.text] = fbox.options.value;% Q0 N4 w$ `0 f3 C
if (fbox.options.selected && fbox.options.value != "") {, H+ ]8 p7 P2 q2 _$ F& }! T1 j$ p
arrtbox[tlength] = fbox.options.text;" g  Y. J6 F2 i. i/ k: |# |2 k
tlength++;
: ]- |& ^2 a2 g& K; O}0 q2 L9 B% \# E6 O
else {
/ p) L  i8 K2 m$ |+ q. Tarrfbox[flength] = fbox.options.text;' W3 D  S* ^1 x8 o( c3 x. O
flength++;; ]7 Y: z; L: q7 P9 z$ g
}
' ~& {, d* k& g6 d9 K}4 c, \+ V6 [. Z& {. e
arrfbox.sort();
; L- I1 d5 Z, P2 ]0 @) |/ narrtbox.sort();9 W  S( }  |0 L* {8 m$ h; A4 J  B
4 I/ o1 {& U1 p& B0 `
fbox.length = 0;
) \( j) ?$ n4 ?5 X+ itbox.length = 0;/ a6 x3 c/ j0 X" \# L' O  X5 e
var c;
1 @& a$ h/ z0 o( A# W* qfor(c = 0; c < arrfbox.length; c++) {
* n8 y: C: T% `  {) G; ^! svar no = new option();6 k% O1 \% Y) ], d+ `9 b2 D: |8 \$ ?  r
no.value = arrlookup[arrfbox[c]];
# s: G6 r# _5 v& V6 `* C; Q9 ^+ nno.text = arrfbox[c];
7 X2 l. g4 {5 p1 l- Nfbox[c] = no;
$ [6 ?0 t* l3 a6 @, `}
0 M3 K9 ], n# Q! E" tfor(c = 0; c < arrtbox.length; c++) {
6 A9 S% f% q- B. n8 Ivar no = new option();. D* p/ G2 n2 q1 `2 P
no.value = arrlookup[arrtbox[c]];
9 {  D1 G1 `& @5 A+ Z6 Xno.text = arrtbox[c];
6 M) Q+ u1 [+ Q. _' N  Q/ ^tbox[c] = no;
3 E1 v$ C. s; P }
3 y8 [: M" }3 a' R}+ [% b8 v# w$ W
</script>* `5 t& I* Q: D" |0 g( P
</body>4 E/ r9 b8 g5 G9 U; R9 Y5 h+ n

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

返回列表

jsp+javascript打造级连菜单

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

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