标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
1 N' S# W9 |; W% X; H9 M
c pageencoding="gb2312"
3 h8 @$ b% n5 |6 r, p" _
%>
`4 C& m5 W$ g$ \! N7 Q6 f& G7 @
<style>
6 L/ V; l3 ] Q5 Y H8 }+ f
.f9{ font-size:9pt; }
2 c8 ]) D9 q: j8 g) A, `
.bgc{ background-color:#aecaf9; color: #0033ff }
& ? [ A) b. V: A( p1 {6 p
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
- O* T! Y4 c4 [- x& y3 l
border-bottom: solid 1px #4e7dc1;
0 K$ U5 y3 ~0 ~5 B) A% u' E! v
border-left: solid 1px #aecaf9;
- \! G. O% @ U2 ?: Y% R' d0 N
border-right: solid 1px #5679bd;
, b3 V8 D# o$ Q% }+ _+ i
padding:1px;
- g0 r5 e# u8 a( ~, n+ @
margin:0px;}
1 B9 R5 [. o$ u, G+ d
</style>
1 f9 Q- K7 H3 o! S/ I: ~- R; g
<script language="javascript">
c k% p% b0 o% f% T# Q
<!--
* V# ^- b- n- p4 D
function rv()
8 _. P. H% W( x* v, G
{
: Z! q/ t& z* _0 W- v9 R* e5 u( t) B
var val="";
5 \. c1 b1 m% s# E" U2 n2 w( X+ F1 o) ^
for(i=0;i<combo_box.list2.length;i++){
$ A6 R& n+ x0 j6 y; X) w
val+=","+combo_box.list2
.value;
$ R0 H, ?; ~% G; X. O
}
8 i, R" t4 L# v% j) r9 ]6 c
if(val.charat(0)==","){
% d( m' A+ U Z& }! m" o
val=val.substr(1,val.length);
+ B M9 K: O1 r7 V( ?
}
' p/ d! c& Z$ w5 |) v
opener.form1.frecname.value=val;
! g7 y4 L8 {2 H! u9 W! g
self.close();
x0 v$ i7 @- X+ [. L9 K* B
}
$ Q- S7 F; R4 l. W h) N y
//-->
6 i' N% o5 _4 z( O! M2 B$ J* w( e3 o
</script>
7 ^% R* t6 ?- L, L: ^
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
* H. T! A. w4 [6 d! M* \
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
) i9 a4 G% A S9 ]4 J/ R: F
<%
2 H# k- `& a; o' E7 s) S1 J
cdatasource ds=new cdatasource(); //数据联结bean实例
4 B0 p( i* g+ i q
java.sql.connection conn=ds.getconnection();
( t4 ~1 @6 i6 o
java.sql.statement stmt=null;
8 C5 j$ L4 r) b3 w/ \% i! E0 t9 F
java.sql.resultset rs=null;
5 w# j: S6 ^" f
cdatacheck dc=new cdatacheck();
5 U$ ~3 V$ N# Q' ]) M6 D+ s2 A
%>
* m( M0 g; f8 N$ m
<%
+ U0 h: ~. p$ h0 p- l" ~+ j
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";
) e2 T5 A4 W$ I* U, {' L. Q
stmt=conn.createstatement();
* x$ x5 c' D) {, M M
rs=stmt.executequery(sqlu);
1 X7 A7 Q2 i$ \( D: v, N
%>
! I! [0 I: w4 Y4 B
<script language='javascript'>
* {$ X0 o$ E0 c
arr = new array();
5 h4 o! A1 d' |$ F; K( G5 H2 u
<% int temp=0;
/ P" y& k/ e+ W& G0 u1 K
while(rs.next())
, U: Y+ j( I) o7 O! W( d [3 d6 w" S
{
# g# A; z) M" f% D8 x5 }
%>
# t* ?8 w3 E* K C& u" @- [
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
, Z2 Q+ V7 X+ j9 n% q
<%
; u1 R9 k& |3 f
temp = temp + 1;
$ f8 n4 R# K" Z: x/ c1 J, `
}
9 f6 v9 l2 c4 V5 f( p# R
%>
, w% O# B' H4 F" q4 x& D, Z6 J
temp=<%=temp%>;
/ C9 Z- h' s- z! n: f
function changelocation(id){
3 y! |. f3 A% a& K3 O
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
+ R4 U) p7 H) }: p) l, h* ?
var i = 0;
3 x$ P1 G7 `6 n4 i
document.combo_box.city.options[0]=new option('-------','');
. m# B& Z. P% l3 P1 a
for(i=0;i<temp;i++){
) I6 d# N' x3 ~0 [% N
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
' y7 \( k$ ^' ^; O ]- q, _
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
0 e1 r9 m/ ]2 O- h5 j% _
}
1 u; o$ b' D9 |& z$ b& F
}
! e+ Y8 Q7 a+ Q4 Y# ]/ M1 m& }
}
) T; y9 ~! J j- }
</script>
% V+ p7 M5 ?+ J: v/ W+ r
- @' U- R1 U; }5 x5 w7 t5 a
<form name="combo_box">
. D7 [5 Y' ]0 s% I4 ?6 _' ?& H
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
: n; f+ z( M3 N- j: _0 t1 i4 F* R; G
<tr height="24">
) x6 @* q$ \) ]3 C9 G
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
$ ?! s7 z/ ]" }& y. F, s4 l4 y3 R
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
+ w' { H- l: ]
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
$ ~$ [' D- k5 V+ o
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; w/ U9 ?4 ^9 d" ~; R. W$ T
</tr>
8 H0 K; R2 j( {$ _$ C3 \! C: R E
<tr>
* F+ U2 C$ B' J8 `, N
<td>
: ?7 B% H9 \" r$ O% n
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
. [2 f# n8 G- J1 I4 c* n0 u- a0 [' q
<option value="0">请选择部门 ---></option>
7 X: i5 [( W( b: j$ B, J
<%
3 U8 N4 w- I0 R# r
string sqld="select * from tdept";
$ B; G4 g7 `$ _& L2 S, G
stmt=conn.createstatement();
, M- p! D! | ~9 V
rs=stmt.executequery(sqld);
' T& ^3 t2 I( T' b
while(rs.next())
; h3 O# L/ u# }
{
- A5 w! q% b7 X5 n) Z& R
%>
5 J8 S2 L" m# w2 r4 Q2 m
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
( u$ C5 D t5 R& G8 c
<%
+ l+ ~3 L1 `6 [$ t& T) C
}
7 r0 E2 x( S/ L6 i6 W
%>
$ h {9 ]0 w$ w$ c4 \) @4 Q" L
</select>
& e% p$ w, _- d, h0 Z
</td>
/ S: f4 k: r* r5 }! j5 k
<td>
3 R# i h8 D/ n: ?* p+ z
<select multiple id=city style="width:150;height:200" class="bgc">
: }# ?( M4 J- c
</select>
1 ]2 O3 T2 P. Z+ u
</td>
$ V5 S! Z/ ]- ]2 F# }
<td nowrap align="center" class="bgc">
3 {" U v% l8 Q' Y4 [0 L- \1 A
<input type="button" value="<<" class="buttons">
9 Z+ s# v9 ~2 A+ d7 a$ ~- v
<input type="button" value=">>" class="buttons">
* l+ X; l0 p8 y4 l
</td>
; d, ^% u$ w o5 ~
<td>
! h/ e" `/ B" X, D" Q1 Q0 l
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
2 V7 n: R8 I; Y
</select>
i6 t. P/ r4 {! B/ k/ R& p
</td>
- M5 l. z o; @& j
</tr>
/ Q5 \* _3 H) h) h1 s3 J, m# v9 m
<tr class="bgc">
, F5 O9 V6 m; g$ G$ ^
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
+ i+ R7 h( n7 B# m
</tr>
9 ]! N; w+ g( [$ A; C
</table>
0 s- O, ~, M. L% K" {1 ]
</form>
/ w1 s4 [" N b6 t8 w
<script language="javascript">
% V( B3 }- i1 e$ b- X5 ?! E+ _
//人名移动
$ Y6 q2 z# M) g' r! h
function move(fbox, tbox) {
6 ^1 {: T* `, [- J
var arrfbox = new array();
, q g! s2 c$ h% x' P) |: Y
var arrtbox = new array();
, |: R4 s- g5 x. i% X
var arrlookup = new array();
. ?, t# t/ h( C" R
var i;
4 n" {- J2 U0 {+ Z9 X
for (i = 0; i < tbox.options.length; i++) {
6 `1 v q0 Q. q& W
arrlookup[tbox.options
.text] = tbox.options
.value;
5 J# |6 o) Q( X6 e8 W- @$ v9 S9 e
arrtbox
= tbox.options
.text;
" G2 T$ R8 E6 K
}
3 U" X8 ~1 R G# n
var flength = 0;
) d+ X- M- F3 o2 H# m3 j' l
var tlength = arrtbox.length;
! H& J& i3 G9 ~
for(i = 0; i < fbox.options.length; i++) {
3 A X z, G4 _ Q& E: c
arrlookup[fbox.options
.text] = fbox.options
.value;
$ c0 m4 R1 r0 n' `3 G$ `: N3 J5 b
if (fbox.options
.selected && fbox.options
.value != "") {
0 x* Z- ~! l# w% W
arrtbox[tlength] = fbox.options
.text;
& P& v/ ~" A% A: F+ i
tlength++;
7 Y q6 {% a6 c" F( H. P3 q% p% W
}
% a; P2 ]7 E3 H5 Q+ _
else {
# m5 v, m# V- V/ ~3 O8 O& m
arrfbox[flength] = fbox.options
.text;
% I" |5 C6 _1 w1 ^. X5 ^8 y) E$ k# [
flength++;
/ H* m0 z: Z( P" G/ C$ Y/ k
}
( ?, H6 `1 N* [5 Z- ^/ j/ U U
}
2 O; r! q# b1 K, M& a- \& V$ O
arrfbox.sort();
/ H' z" o7 d3 z4 W) e0 H
arrtbox.sort();
1 j, e+ D o. R
4 [, p/ a; }1 B; x/ G0 N9 s
fbox.length = 0;
! X: @) i. l0 `; _
tbox.length = 0;
5 ?9 M2 H) r; Q6 R! p
var c;
+ B5 V0 J* |8 D! u' N
for(c = 0; c < arrfbox.length; c++) {
2 n. L" J% R8 O) l
var no = new option();
$ k! x* S5 A4 ~* B. u. p B: `
no.value = arrlookup[arrfbox[c]];
1 j, d$ J0 f: {4 \9 f }
no.text = arrfbox[c];
+ a/ B6 d% c. {4 l. k
fbox[c] = no;
1 R# C- G3 f- d% \1 J/ a1 T5 \) b
}
. e& b. Z- v0 C8 M
for(c = 0; c < arrtbox.length; c++) {
. C& d9 _. o* v E
var no = new option();
5 Y3 X, d7 d$ {4 E
no.value = arrlookup[arrtbox[c]];
4 R' d( v% c4 B! T3 b9 u# L
no.text = arrtbox[c];
$ Z1 r5 E* S1 f+ w4 N6 F8 G( f" B) J
tbox[c] = no;
6 `6 e! `' D& o4 R* ^
}
7 T! W! n i3 n' n! d
}
* Z- ?* [! ~; G' H0 `
</script>
- R& }0 O8 v8 U) c1 D
</body>
- Y8 I) P1 e% E& X1 l# p6 g
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
