jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"* L0 K- C6 y' [( p+ z/ C; }4 `3 ?
      c pageencoding="gb2312"
%>
<style>
.f9{ font-size:9pt; }! g5 s3 w4 `; S$ F) _
.bgc{ background-color:#aecaf9; color: #0033ff }3 E! d3 e  t7 Y
.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;% Q9 L+ w9 |6 }1 T4 c  {4 E
  border-right: solid 1px #5679bd;1 B% L( g) j/ f( ?9 @
  padding:1px;
  margin:0px;}8 n  |# x( N: ]0 O/ Y4 G" i
</style>  w6 _8 d7 ^" J* `
<script language="javascript">
5 w  u7 Z& k+ F  R/ g
</script>
+ f$ ?5 I, O8 E2 r2 l. h+ M: w<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
( S0 s( n6 o. S! ?3 N8 D- F8 U<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
( O7 T( M2 U7 W<%
+ Z  C7 b6 w/ S/ k, z% `  cdatasource ds=new cdatasource();  //数据联结bean实例% z6 x7 K( x7 V2 R8 i
  java.sql.connection conn=ds.getconnection();% K8 ?2 x1 X/ h  f8 H
  java.sql.statement stmt=null;
: v% Z% j+ `: E  S: Y- Z# Y  java.sql.resultset rs=null;
0 ]7 u! E* g; d8 I  cdatacheck dc=new cdatacheck();
7 A" z; S! f. F' L%>
5 J+ W( ~) \# _: y; I1 t<%% h% I& W  d, d2 i9 V1 @
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";. u! p" R9 z- Z$ m% O
stmt=conn.createstatement();$ t+ d6 S, T0 m3 |/ }1 u
rs=stmt.executequery(sqlu);
# h+ {! g! a1 q3 C4 r- U' }+ m6 d%>
) n( _$ a: A4 m) |<script language='javascript'>
+ f" Q  G# i5 ]& n3 iarr = new array();
( u. O; B# J; g<%  int temp=0;
; U: E+ ]1 C$ Owhile(rs.next())
, U8 \" W9 v2 e' p) r% h7 D{
/ ~$ Q3 ]- K/ I/ x* d$ k6 F* U( J%>$ t9 n+ O5 q% {& _5 J5 J; X
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
; U) |) i6 r) M1 N. g1 N<%/ k& s  m2 b2 E+ `
temp = temp + 1;% W; X' S) F5 G! H! L7 r  Y
}
/ x4 u& Y) L6 b( I%>) r* D- V" n7 n5 C3 y( a
temp=<%=temp%>;7 q; Y, h$ p$ P, w2 ~1 q) E
function changelocation(id){
+ N2 N' F# b1 \document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
$ u  Q7 F4 y: t8 M/ {4 A$ X" c! B1 Fvar i = 0; & J0 r$ c0 z: F2 [
document.combo_box.city.options[0]=new option('-------',''); ! ?! G/ `6 e' Z7 D7 V  M
for(i=0;i<temp;i++){
- a$ T; R$ G; C9 d" ~if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ' G% }7 x4 a/ ~4 I! z* v; E! U
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
1 u/ Q- e& n9 L# n4 q- W}
+ `$ {. y1 r; p} 1 V" }  P7 Q, Y3 r8 d8 f2 Z
} 1 Z' u) }' a, q) n
</script>& S6 a: c# o; T* ^

. ]( x& t7 {4 J) z. @<form name="combo_box">
0 n  p0 ]; r; T' y6 L4 _<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
$ i  H+ A7 T% ~  <tr height="24">. D. T. i: y/ L* P" p
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>+ ]" h" {, z! z
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>& y0 f9 Q2 h' J4 q
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>; r* ~& F6 L* ~7 u! d* F
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
* V% U' O/ b: c4 W5 b& a% L2 f  </tr>
5 L( m; E* H9 Y# Q5 T5 ]+ k6 m; b" h  <tr>
: C. C) O+ i/ K) | <td>
# T' i9 w% J3 c* Z, c  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
8 u7 h1 c, |& B' d/ N& e! z2 i  <option value="0">请选择部门 ---></option>
: t0 v+ K9 ?, P4 t' S' K<%
, O* N, I: V" Z6 W" \1 X& ] string sqld="select * from tdept";
& b- R. n+ i; k: T: ?/ `stmt=conn.createstatement();
: h% t2 z0 W, L4 c6 d2 h, i: hrs=stmt.executequery(sqld);8 ^, x0 o6 Y" v0 E" z
while(rs.next())
- C8 b; u2 m- \! w{
! a1 \! ]6 s# d: ?# {1 M8 N%>
0 n7 X$ o! M( S% u9 f0 W  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
& C" a; X; K" M  g* C<%
  F8 n9 I( A, {4 B. ?9 E}
' N1 O8 n9 h) K, J6 s. G%> / ]) q( a9 R" }4 k
  </select>6 d. V# K3 I9 m) z* M
</td>1 l( D, j7 F; y0 E, m0 T
<td>
# ?/ d( v8 ?# M& N! V" T3 L5 W  <select multiple id=city style="width:150;height:200" class="bgc">* x7 [4 Z8 t4 N2 |
  </select>4 l5 E* r+ A/ H9 `
</td>! i" H0 i* D' K
<td nowrap align="center" class="bgc">
% a: T' Q* b, y  <input type="button"  value="<<" class="buttons">
3 e" W6 e- R$ g" x2 |, r* W* i  <input type="button"  value=">>" class="buttons">" @2 @( W1 |  w9 l: a) n, Q
</td>
, |! ]: J* P/ _) o9 L <td>
4 `! o  @9 r' i5 F8 [& s  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">& F& h1 R* s9 ~8 o+ Z- k* f9 ?
  </select>% V4 H: V8 a$ I/ M& @4 Z& }
</td>
6 [& x( K* `- d) v1 \4 w2 A5 t1 I  </tr>
4 ~0 b; P8 H5 }7 [1 j2 f$ f <tr class="bgc"> : ]0 f* h. {- u/ V) d
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
$ f- A; L( f' c" f2 K3 O$ v( \  </tr>9 K8 _  ^) E0 ?: w+ X" w
</table>
& |/ |) V5 L7 X  _8 O</form>9 A  w7 S( T7 f! I
<script language="javascript">
& q' F. X% [$ h$ c- k9 |. k; }! a//人名移动! `4 H7 |! w* Y
function move(fbox, tbox) {
( ~/ c- I  w, P  xvar arrfbox = new array();
8 C/ L2 D( v/ l) `: z8 c: zvar arrtbox = new array();4 n7 G1 o' R  v5 k
var arrlookup = new array();
) H; v: ~: C, r" ~* I& svar i;
4 v3 }2 `  ~& t2 R* F2 |- Xfor (i = 0; i < tbox.options.length; i++) {2 d6 O$ v$ e$ ^5 e
arrlookup[tbox.options.text] = tbox.options.value;
$ a) D3 i: b' E% I6 qarrtbox = tbox.options.text;& \) `( n9 s0 j0 @% ]" q" C
}/ U  i% w4 H2 U1 }7 Y) S  G
var flength = 0;7 G4 [: P/ }3 C
var tlength = arrtbox.length;
; H1 |- s+ E2 p9 }: I. Ufor(i = 0; i < fbox.options.length; i++) {
( V% M* A( q) e! b5 carrlookup[fbox.options.text] = fbox.options.value;3 c# S$ p* M  p8 K" t3 A
if (fbox.options.selected && fbox.options.value != "") {3 b0 G0 @6 b# c( H0 p; m
arrtbox[tlength] = fbox.options.text;% N! z1 Q) a' G: Z
tlength++;
: r$ |8 \, }* J. H1 U1 U# m}; W! ^4 R& K: Z8 {5 j5 Y
else {
/ p' c% |+ e" X* z8 c) U$ larrfbox[flength] = fbox.options.text;' `6 S- n/ @$ E5 k7 B+ n
flength++;
' ~% {' B3 r% W/ w1 {- n/ Y }
! |# z9 b: u8 _' \& b( C! L! ~}9 t/ w/ m0 @( g* K. q  ^
arrfbox.sort();
: G" s: z1 W4 |$ M5 Yarrtbox.sort();" Y! g4 E* s# p+ q- ~

* M) N  ]/ T+ \4 Ffbox.length = 0;
& T3 o2 v: Z) L3 ytbox.length = 0;
4 z: N) d2 W! H/ n" y( Tvar c;
& K: P8 E% {$ r3 Kfor(c = 0; c < arrfbox.length; c++) {6 j7 y- w; @2 S  M* [: e
var no = new option();/ \( D; Y2 ~6 d7 {$ R- G
no.value = arrlookup[arrfbox[c]];
9 ^! Q) J& K7 P& @no.text = arrfbox[c];! x. z4 z  U( k' w& M: G* |# f
fbox[c] = no;
" |; c% ~# T- s0 Y% o: N, `9 y}
; T* V3 h+ ~$ O  E$ o  Yfor(c = 0; c < arrtbox.length; c++) {% o4 Y2 r- a* ^3 c5 P3 e
var no = new option();' x+ Q, v  x& d" v
no.value = arrlookup[arrtbox[c]];
. m+ E! A: ~$ Ino.text = arrtbox[c];
$ H8 @1 w8 X5 utbox[c] = no;. _9 d1 G* `( c; K3 B  |/ m) |
}, c9 j' D. q5 l, q4 E
}) o+ D: O7 Z/ H3 n" i! u7 j' `& q
</script>
. Z, X0 |! W% c5 q</body>
, J8 \: Q. F7 [3 l/ j

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

返回列表

jsp+javascript打造级连菜单

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

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