jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"7 U' S9 S9 x2 u
      c pageencoding="gb2312"; N& h' \& b1 k- L6 J' N* {
%>
<style>
.f9{ font-size:9pt; }) i: o: U1 O6 c% O4 p1 k
.bgc{ background-color:#aecaf9; color: #0033ff }5 X0 E' |+ [2 O4 ]
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;$ }! J7 [" n* l; {
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;4 n* f+ i+ m7 Q5 J6 i* W
  padding:1px;
  margin:0px;}7 b& W6 j1 I3 T" `
</style>$ ?$ D, I& E6 i7 `0 P
<script language="javascript">; ^7 J' |9 v8 `3 g+ Z# f* m

& \" `5 n; i1 L' G3 I; r</script>
( v* ^( i  `; K' I9 m6 ~" E; [<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  j: h" E" _+ T- A5 m$ X- `<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />6 P6 v4 K* @& r- w& i
<%
% e# @" _/ m8 [8 M  cdatasource ds=new cdatasource();  //数据联结bean实例
# m# K; v; R3 i1 {  java.sql.connection conn=ds.getconnection();+ s2 q) V" B5 X' l/ Q" l$ a
  java.sql.statement stmt=null;
0 [+ |8 @) H  {' [  java.sql.resultset rs=null;9 |! J  y% \) S# h3 O. o; Z) ~
  cdatacheck dc=new cdatacheck();
, a+ p7 X: e, @7 i%>1 ~" @! z8 V4 |
<%
  U" t) r, r9 C  N0 k* jstring 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";
7 d+ e0 B3 Z5 e1 K, D1 Ystmt=conn.createstatement();0 F: q* m3 y+ ]6 h) s
rs=stmt.executequery(sqlu);
' q) Z: ~- `' d# J%>
$ _! [& ?% E- N5 J<script language='javascript'>4 _; L* {- W! a) o  {6 J
arr = new array();4 L3 ]/ B( ]* h. u2 \
<%  int temp=0;
% {+ y1 `7 A* b5 g1 Jwhile(rs.next())) [# v3 E8 ^) W' T
{5 c* `( q4 N9 T" Y. o  z
%>, a# H0 m+ g) g. s7 i; `( Y
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");/ c# M( _% |4 m# e# G
<%" {" m, F6 n) _/ D) n( Y- \
temp = temp + 1;
$ s) W3 B% d+ F+ j4 `6 b}
. ?7 k, j; [1 D5 z, Z%>% h2 `. Y4 V! W1 R
temp=<%=temp%>;  ~9 m' [0 r& A) E% f
function changelocation(id){ / z$ L) p5 H& T2 v" j$ h) U: ]
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
+ z- b6 h9 U3 |. [$ q3 B6 xvar i = 0;   o" \. {9 d% z4 X1 R8 n
document.combo_box.city.options[0]=new option('-------','');   A4 H, B6 C. A0 }. W# m0 H1 t$ M
for(i=0;i<temp;i++){ - W. E; R% s9 P8 p* h  |7 \/ ?  |4 A' p6 ^
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] , ?9 R( r, T: `; Y
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
' c  R; \' {4 r2 W}
) ^; D& _7 F, A} ' }; L3 x5 G' M$ D" ?- u; @' P
}
/ r, n- R- N/ {; r$ c1 [8 f</script>! P: B- Y2 r2 c) Q4 Y
9 ?% z* y, b8 B3 `
<form name="combo_box">
) ~$ N* a2 j4 g3 p6 v<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
. z5 V5 D, [' _/ E- e- w& |2 E% `  <tr height="24">
- q+ k3 c; T; X5 s- r) o <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
, O- y% L" O& v2 }% U <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>: U' b- p! }$ d! z4 `
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
( S' l2 b! K* `1 ?7 s1 w8 ^ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>9 D: u' Q% [' ?0 X' H; V( l/ E" z
  </tr>
5 y* o. \4 Y' d2 M- \' @  <tr>
5 `) M( N$ X' R, \+ r- m- q. h  o <td>
' u2 \! q. K: d  L7 e/ y+ B7 y  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
  `& W3 s- ~% b( K  <option value="0">请选择部门 ---></option>" x* r$ {  p/ s1 R' T4 b0 q3 T
<%: A1 j) i! n. A6 a; A+ d: L6 }
string sqld="select * from tdept";
" B8 M# e% u) ?stmt=conn.createstatement();
, G% t9 V& }, z% g% a& A$ Jrs=stmt.executequery(sqld);" k: C5 z: X( i% `- g
while(rs.next())4 D6 z$ p- U) _0 _) z/ N
{6 \" `, C, Q; t/ W& K0 m% l
%>" T! x) a: Q: r! \
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>; Z' x/ m- o4 f. x
<%, p6 f& ?- b% E  H1 t+ S7 L6 ^
}
. }4 Q, T% {9 I% p9 N3 _0 f%>
7 v0 V" ?9 a! j! [7 K( l( ~4 X  </select>7 ?4 G, g1 Z- @7 ?. Y; n' O
</td>
; l* `2 a  x5 C" O& g! \ <td>
% H& s7 ~7 ~# }/ j9 B1 \# u  <select multiple id=city style="width:150;height:200" class="bgc">
* p- [, R) G5 s6 Z; H  </select>
( P9 G% d; P# O; _# o  C</td>
: [3 s' j* D2 {# m% { <td nowrap align="center" class="bgc">9 F" \8 Q! ]9 n  i) K: R' L* x
  <input type="button"  value="<<" class="buttons">! M  t: M9 l$ _$ d- `
  <input type="button"  value=">>" class="buttons">; u3 {$ v7 s5 C8 m$ I5 u
</td>
: z6 S! {2 u9 Q7 }3 ^0 O <td>
1 h/ q( A* ?. x( s( y1 g3 d6 _/ {7 @  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
% Z4 v9 c$ y1 h* J- F  L  </select>
( d' Z) g- S2 n6 i( i</td>
9 J7 ~6 e; R$ V  </tr>4 ?: G+ B# G) o2 ^
<tr class="bgc"> 5 @2 X: N( K) J" I. a
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
$ M* z0 @+ u6 C. E/ ~" t3 n' D  </tr>
# i8 r; g) J7 u- F+ `</table>
; x8 r7 V% X, X+ n</form>8 g3 v5 j% C4 V% O: A
<script language="javascript">
  C$ Q, y/ b0 o* F//人名移动
' |4 ]2 g! i! V% K; ]' sfunction move(fbox, tbox) {
: k; e& k/ R' cvar arrfbox = new array();
3 [9 Y5 D! ~& Z  S( u4 Rvar arrtbox = new array();
& ^. D9 V( }/ D, L4 L0 C7 K( Zvar arrlookup = new array();, V3 E5 A0 ]$ N: I
var i;. q/ j( Y% y, y
for (i = 0; i < tbox.options.length; i++) {+ ]' t1 a( ]1 O: Q
arrlookup[tbox.options.text] = tbox.options.value;
' z4 {' r- ~5 Warrtbox = tbox.options.text;
) m* o6 ]7 A) Q" H# u9 q! I}' h, _2 ~) k8 y) N, y
var flength = 0;* C) l/ G1 V  R* }' P
var tlength = arrtbox.length;% `9 a9 K0 M7 k" f% J
for(i = 0; i < fbox.options.length; i++) {9 G2 X8 V2 J$ N1 O" f4 P" T
arrlookup[fbox.options.text] = fbox.options.value;1 K0 y* ~$ {4 g  l7 k" Z7 d& _
if (fbox.options.selected && fbox.options.value != "") {
& s% O+ d( h& v  S' x; `arrtbox[tlength] = fbox.options.text;4 p% H0 o4 o: [; B2 ^
tlength++;- F% ~  i" l. w& z
}% @& f2 {9 \! u6 A/ P8 L+ Z6 \
else {2 E( J: O) I  U1 v; M0 X! [; a7 o4 z
arrfbox[flength] = fbox.options.text;
& \6 E# o$ I2 p) \, Uflength++;
0 x# L) v, \3 y% b/ g }
; d9 w/ f+ R& H" w' V9 G}
9 N4 B! y& O& v- f( J2 G  L% e5 karrfbox.sort();* k+ m" z- H% K6 L: C4 I
arrtbox.sort();) ~3 X3 A  T" ?
! A& F/ R3 ]5 e/ ]9 q
fbox.length = 0;5 w. `% G+ ]2 a
tbox.length = 0;
- I2 I$ G: q$ P: Svar c;
, f" w/ g: M! Kfor(c = 0; c < arrfbox.length; c++) {) j0 J: t) A' _3 K
var no = new option();( s# R. J% u9 A4 s- _2 r- n$ G- h
no.value = arrlookup[arrfbox[c]];, A& z- E5 W, Q7 i! ?% [# S
no.text = arrfbox[c];
! O! i( I% `* L8 I0 m+ ?2 Z7 i& Pfbox[c] = no;/ r1 V1 ]1 {! G% e: l  E' }3 }
}+ N% W2 ^+ S' v# v6 i
for(c = 0; c < arrtbox.length; c++) {' O$ x% @5 A+ a7 V7 Z3 C  G9 F
var no = new option();
* Y  J! b2 F4 m2 w- sno.value = arrlookup[arrtbox[c]];
( y* C" z) J4 Sno.text = arrtbox[c];& f1 T& ^9 L0 |/ k
tbox[c] = no;6 q/ o/ `/ z* A0 }
}
4 Y1 x! ~* y$ J% N9 J6 G: O}
/ o4 N) U8 [& l0 N: N; L</script>
! M" E8 U4 \* c! y, Y: m</body>7 @% B% t! X, }# s3 |3 z& Q

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

返回列表

jsp+javascript打造级连菜单

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

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