标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
D/ o, P2 R* d' ~0 }
c pageencoding="gb2312"
4 U7 I7 Z# B; S5 G1 |- }% X6 n
%>
' E% P( [3 w# J6 {) i1 i) g- _
<style>
* W2 G0 z" n4 M
.f9{ font-size:9pt; }
~+ B$ i3 V* @
.bgc{ background-color:#aecaf9; color: #0033ff }
* B& z1 n. A+ f
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
0 q2 J2 W, y! G' s" ?
border-bottom: solid 1px #4e7dc1;
) J! _" r) k' h, y7 A2 z; `
border-left: solid 1px #aecaf9;
3 J7 K2 ^3 [& q6 r
border-right: solid 1px #5679bd;
& I( q" \: b: w i$ n% n* ]) e
padding:1px;
! |7 e; C% s' D4 z+ z
margin:0px;}
/ B$ O F1 h- A& }4 w
</style>
n6 X$ G( H$ o' C1 i3 \
<script language="javascript">
2 d% r- ]+ r7 p! l1 R
<!--
" Z3 E/ e9 ]3 a; k
function rv()
9 f+ D* ^( H3 S e0 b
{
# x0 a% U, _- g' H5 E
var val="";
) {/ R! }" }) J3 v2 s2 q7 R
for(i=0;i<combo_box.list2.length;i++){
+ P6 A0 h! R, t7 r$ c
val+=","+combo_box.list2
.value;
, |1 w, d2 G5 N E* T8 _0 J
}
7 P/ m, N+ V. F/ [' h0 m; J3 X
if(val.charat(0)==","){
3 r2 m% Z. B" I& M
val=val.substr(1,val.length);
9 \+ }. `4 \5 J1 Z) C
}
) D- Q" c) F% s/ \- j; h' @' G
opener.form1.frecname.value=val;
" W% D( q4 N G
self.close();
* z' w" { p9 b |
}
# S" M# _) C, Z
//-->
0 ?4 Y S; C2 e6 N# N' L. U' u- e
</script>
& Q8 e6 f4 k3 v
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
% _# {* Q3 `/ e! N+ q
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
5 ]! q3 P9 ]" R( l: @2 ?
<%
* E5 _/ I2 E. [' j4 T
cdatasource ds=new cdatasource(); //数据联结bean实例
- @3 c* E! u: `+ i( f
java.sql.connection conn=ds.getconnection();
: X7 K9 B9 `* e4 v2 R' v
java.sql.statement stmt=null;
0 z9 q T1 @( D. l1 d5 k
java.sql.resultset rs=null;
/ C" w0 o: S/ ~, b& J. S# ?
cdatacheck dc=new cdatacheck();
* x; z4 k: V- v3 x4 `( K4 z$ p Y+ x6 o
%>
- [6 M' B. {7 V+ ]5 m* A7 g8 t
<%
# ^2 a* @- K9 K) m: y
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";
; }& f" {; s' o; B! [3 b, X% w5 _$ E3 J
stmt=conn.createstatement();
: d* B, l; [% D( C. g2 G6 C
rs=stmt.executequery(sqlu);
8 o; o9 V- M: c3 ?# B0 c: a; i- u
%>
$ X+ O4 M" A( b
<script language='javascript'>
6 N- Z6 q( D. p
arr = new array();
5 }" O2 q, Y* h. k: ^* V
<% int temp=0;
( a# K% u/ M3 `, ^; _
while(rs.next())
2 {. Z/ T e* |
{
6 t% c* G: c" U+ z" J. n% s
%>
" X- J9 i, ~( |" ?. t$ i* O
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
- f! d S- q" M1 V8 C
<%
* M% j$ g3 x: T* U
temp = temp + 1;
2 Z; \+ s( ?5 a* h; c
}
; Z6 ^, K$ D7 s/ f4 O: j
%>
- d) r4 }; `' c2 y8 }5 P2 ^; N
temp=<%=temp%>;
7 |; G+ V! d/ c5 B5 c+ g
function changelocation(id){
2 e2 B( t( t9 q0 W- k; L
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
. B4 X2 ?1 O. p" Q
var i = 0;
; h; \( H/ O F9 U& Q/ k! L
document.combo_box.city.options[0]=new option('-------','');
9 q% `6 j9 z! f+ Z3 A, E& i
for(i=0;i<temp;i++){
% \% m/ b7 H0 Q& S" Z
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
' j& E; u- c7 D1 b# {: ~ Z
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
6 j& R5 x; S9 L7 [+ V1 s# R
}
0 G8 h8 j; F" a; Y3 A& a* r9 A
}
6 y1 v+ [8 O* W
}
% t& e( n; u( Y) Z7 ^- K! h
</script>
4 i. M( T+ a% O b$ D- C) L4 r
1 z4 e8 C# |- o Z- j* P8 b
<form name="combo_box">
# i; z/ x+ Y( @! t7 a
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
- t( O) G- B# X: y
<tr height="24">
; L. u7 @3 V; T* a# ?
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
& j- a- g3 y8 t1 b9 G0 x& f
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
$ }0 @4 x" l& X& f
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
) Z0 E# f. k& p8 ]% X4 W
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; q1 p' E, E' Q. Q* Q+ G
</tr>
5 \+ a" M! ]8 s: v6 f2 [
<tr>
5 N' d4 P; j3 w1 b5 K% S6 @
<td>
8 G' Z: Y& o4 r% w$ k& H1 H+ w
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
) v- J* b: y# O) l4 k4 [
<option value="0">请选择部门 ---></option>
6 v* x+ `+ G% z$ ~0 J" O- S
<%
) H o3 l j) \
string sqld="select * from tdept";
) e* u3 G& W! N0 A) ]0 ^- I
stmt=conn.createstatement();
6 o0 d" M$ q1 e: H
rs=stmt.executequery(sqld);
0 g2 l0 [' ?6 u
while(rs.next())
# a. g8 ~ D b
{
. F2 Y v, h8 r+ o6 [
%>
4 M) N% T/ E4 h) j! `8 b* F
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
2 W( v5 N; d' l- k: b% J
<%
% l% y, E' H* X" X* J2 N) b0 X
}
. Q/ l! F2 K7 \0 n: L0 N
%>
* Q" x, J" u7 | d7 m+ R# s3 q
</select>
" }/ W( H; I5 U; L. t
</td>
( B& _! i$ k4 D$ k- r( T! }
<td>
# d" Z8 k3 I+ M9 M+ \
<select multiple id=city style="width:150;height:200" class="bgc">
# n0 D5 k9 W1 B& Y2 }
</select>
0 u2 t) l( \1 G3 C3 r( P
</td>
9 F7 `1 M7 p) H3 |& b5 _
<td nowrap align="center" class="bgc">
! O% r! R! f: \) p5 C- B
<input type="button" value="<<" class="buttons">
: [# K- L' m, S6 @* q3 |/ K! x5 Z4 H
<input type="button" value=">>" class="buttons">
, u0 m8 k/ B5 ^( n% i8 N7 w/ }+ B
</td>
" t( r0 _/ G9 }$ O
<td>
6 p$ ~* P2 |) h# ~5 N) G+ ]! m
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
4 |0 O8 c, D$ X) N' F6 }4 v
</select>
u9 Z; b; o8 O# l8 ^% N; {
</td>
4 n, ]( I W' H
</tr>
2 s- S5 m; _, k1 H
<tr class="bgc">
O: {! x0 @1 M; {
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
& w! s1 A, {: E0 t! D
</tr>
: G+ \2 A. s( f
</table>
9 A& J- a4 I1 V. p5 q0 O
</form>
* [$ y" z6 u; `
<script language="javascript">
" l3 G$ I- W; G* I2 m/ t5 P: w
//人名移动
: X! s( w7 }4 m# y( N% C' u; N
function move(fbox, tbox) {
" `2 B$ g2 S* K( p
var arrfbox = new array();
; b$ M/ y( Q- |+ n( n6 E$ B1 \/ Y$ i
var arrtbox = new array();
4 S/ Y H7 v' S, h8 c
var arrlookup = new array();
( `+ F5 W- k! O8 m( R
var i;
7 u D0 c' b& x) A2 w; ^$ e
for (i = 0; i < tbox.options.length; i++) {
9 x8 d5 j' ^2 @) P) y0 R
arrlookup[tbox.options
.text] = tbox.options
.value;
2 k: y% H) k8 D( R
arrtbox
= tbox.options
.text;
6 v& c0 n& y+ x4 C2 e1 ]: _( v
}
. q; h$ \# }8 p2 @4 @) j+ \
var flength = 0;
5 M n) @; u, |9 c) a' l5 |/ W
var tlength = arrtbox.length;
- u, L& g) J0 W8 h
for(i = 0; i < fbox.options.length; i++) {
; M, V7 L8 [; u$ ]! | e
arrlookup[fbox.options
.text] = fbox.options
.value;
) I9 q% T& S/ K; B& b/ @
if (fbox.options
.selected && fbox.options
.value != "") {
. ]+ m- V! p1 e
arrtbox[tlength] = fbox.options
.text;
, v; T+ X: _1 {. {& c% p4 m
tlength++;
+ N; A- t$ n6 \' g* B2 I6 I/ W
}
. Z) E; z; k# ^1 f* ^
else {
6 r: x3 u' G1 S: C
arrfbox[flength] = fbox.options
.text;
9 V8 ^: V; X' T0 [& _! V
flength++;
k; | ^" q( ?6 v; b" @& i
}
' g7 L, e; G0 f
}
! K5 U% Y$ R" Q6 u( ^( F5 w
arrfbox.sort();
, k X8 g% j( B. z, o& a
arrtbox.sort();
5 Y1 \! o4 a1 _
* R& k3 n/ e+ Z% L3 M6 B
fbox.length = 0;
" z$ K- L; S% r
tbox.length = 0;
2 \$ u4 t8 `7 w
var c;
- D8 N& D' v/ q) ` a& \
for(c = 0; c < arrfbox.length; c++) {
L; z# P& ~8 x7 g" O6 {
var no = new option();
% A4 L. R0 G/ ?
no.value = arrlookup[arrfbox[c]];
9 _* b6 U& F' p4 G2 z( B0 h
no.text = arrfbox[c];
9 V0 P" a6 c# ^8 {
fbox[c] = no;
* _8 d! I. [3 |% _2 U
}
, G% C9 m* [6 b# c1 a2 U% c- L
for(c = 0; c < arrtbox.length; c++) {
2 G! k g: Q' O" R% o2 {
var no = new option();
/ E/ A; ~% X. R! S2 k! ^
no.value = arrlookup[arrtbox[c]];
- r0 b* M+ s! I0 b6 w! P
no.text = arrtbox[c];
2 J9 F! o }* j9 l
tbox[c] = no;
; W& b) `2 v' t/ g1 w% G/ N
}
+ k/ g3 w5 K' b% F
}
- g$ ?0 L5 {- j2 e2 Y6 c, X
</script>
+ n, u/ |* f/ d! K# s# @
</body>
6 s9 f; i: j: M* c$ w2 R7 i
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
