标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
% l1 _" N6 {$ @6 X3 }' Z5 e4 W$ S
c pageencoding="gb2312"
( ]/ g0 ^- S3 @6 k ~4 H
%>
; s5 p2 f( q# \
<style>
& u+ T: ^7 L3 @5 P
.f9{ font-size:9pt; }
) H! x, N7 n2 z( P9 @3 a, T: G8 m9 X2 W
.bgc{ background-color:#aecaf9; color: #0033ff }
- s* L, a' r+ B7 N
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
" S: U9 \& {' H3 N
border-bottom: solid 1px #4e7dc1;
+ _/ G } ^0 Q
border-left: solid 1px #aecaf9;
3 ]1 c/ V" _$ |
border-right: solid 1px #5679bd;
8 Y* p. a$ u0 T4 a* D: O1 `
padding:1px;
" \9 G: H+ R) {
margin:0px;}
8 [1 r$ |- g3 r
</style>
: }2 a* t9 h- b2 ~ G
<script language="javascript">
' J2 P! w/ n$ t, {( i& ]
<!--
; R2 x! l6 s/ ^" v
function rv()
. i! A) w4 N) f. u
{
, \. g8 X3 H0 }+ g
var val="";
1 f, y; D" f: d( R/ `
for(i=0;i<combo_box.list2.length;i++){
: a! ^$ A% F) _9 m5 R" m
val+=","+combo_box.list2
.value;
1 X, r% Q+ I2 G) h% z4 t) L2 n
}
) o4 x# X- _% n+ | I; d! ?
if(val.charat(0)==","){
& i; t& u* A$ V5 B. S
val=val.substr(1,val.length);
* S/ S7 x& \2 l
}
9 L1 Q* @% `6 G# @3 X
opener.form1.frecname.value=val;
* s. b2 A) D& q: ^. v; t
self.close();
; Y& c6 B# H7 T. U/ ~
}
5 a0 a1 H2 Y9 @) a+ J" t- `
//-->
* l* Q6 z7 o) b" @8 F( r
</script>
1 w; C: Y# y/ z9 m! R' z4 \: W! [
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
5 k7 C0 X E, ], J- A4 P7 x
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
1 @, D2 [/ J6 H
<%
% J0 j% i) R& {# K" X. ~& J! D
cdatasource ds=new cdatasource(); //数据联结bean实例
" X# n0 q- w& d1 n$ N4 g
java.sql.connection conn=ds.getconnection();
& Y" ^ N# j0 v7 l7 C* q8 J
java.sql.statement stmt=null;
% j8 f4 E' ~ G0 k2 i, ?
java.sql.resultset rs=null;
2 Z* D9 n) Y7 S- L
cdatacheck dc=new cdatacheck();
0 K# \+ W, N9 l, y& d0 |. w
%>
) O- b+ N7 y) Z1 p$ K
<%
) X% Y# ~, e; P# P2 u" z
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";
$ A( w' i* c5 W0 A% U1 M
stmt=conn.createstatement();
/ t' [ w7 Y3 h+ A
rs=stmt.executequery(sqlu);
* E' D0 `; h+ K W$ S, a, y
%>
" a$ X% E7 D2 @4 I8 j' N7 N
<script language='javascript'>
, j/ b* \# x+ a2 @3 t' ?
arr = new array();
+ Z: |3 t9 W$ ?/ o @8 \9 p* U$ M
<% int temp=0;
% ^3 [4 g/ f1 d7 q3 b
while(rs.next())
9 E! t1 R3 D: z5 i E: w
{
3 B3 }6 V/ R& Y/ U4 A6 S. [
%>
' o; O5 P& K2 `
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
* A2 Y( r2 O' ^: c
<%
+ r! L/ \$ I0 g! z
temp = temp + 1;
9 K8 Z& r5 F( Y$ q2 p" z
}
- u2 w/ n. L& H! L0 o! T
%>
& n. a4 ~) r+ W9 ?/ Y; ^( `
temp=<%=temp%>;
: `' |9 Q+ R( \
function changelocation(id){
1 N+ [0 H7 J6 n
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
G" ^) _# V" R
var i = 0;
8 d% ^! ^1 A* ?% ]" f
document.combo_box.city.options[0]=new option('-------','');
" Q- Z$ B2 Y8 u8 E' e8 V& L
for(i=0;i<temp;i++){
5 S* }7 g3 C- N; ~! T ~9 \
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
' V% n/ i" A0 y6 c( w& x
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
7 y q+ l5 j- k/ o
}
3 I2 x2 v9 }6 U3 ~. h
}
- G3 v; l8 S3 Z) z9 P
}
9 s/ e7 a, O- e# h
</script>
* L4 y. {7 m, @0 s
. ]$ p N1 s; x# `4 Q7 Y
<form name="combo_box">
+ D9 ?$ X1 A% ]
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
" S) E+ [. J" J1 H, ?1 `% X
<tr height="24">
5 ~2 Y' m/ ?. Y: u
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
' X( B3 O# F g \4 Q( ?
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
8 B5 |: F8 s9 @- y I e$ e7 b
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
* x. c. I0 W- u+ U
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
3 t5 D- w3 h7 N, g" d1 J5 T
</tr>
: Y5 f2 J: y. \/ K& f, E
<tr>
( v3 W' w/ f. V! J) q; z1 e
<td>
' c5 t& |1 U- ~# P! }8 N* z
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
) r6 O; U: {5 |* w$ k- j# u$ L
<option value="0">请选择部门 ---></option>
3 ?. C) L2 M) ~1 j
<%
4 R3 W4 U5 c! M$ m9 c+ ^ c
string sqld="select * from tdept";
) K( z3 q; [7 A1 y
stmt=conn.createstatement();
Q( E7 L9 j& z" g* Z1 `% I" H
rs=stmt.executequery(sqld);
# o; @- W2 A2 ^, W9 i6 E
while(rs.next())
: V6 m9 e/ D- e' o
{
8 X( t$ F1 j2 I z o
%>
7 G- c0 F; x* ]# w1 S$ i
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
' e- x. f: t! y u, f
<%
; m! |' u, {$ A* I4 m+ Y; F
}
3 z$ H, @* H3 A
%>
" c4 M2 G, ]2 a
</select>
% a- Q( [# P( u0 u
</td>
9 |1 w$ [! B% Q8 l0 \5 P
<td>
% h; I! l, l+ Q3 i- H. J, `# P. h
<select multiple id=city style="width:150;height:200" class="bgc">
$ \1 O q: t8 Q" f) h6 o
</select>
' J& k: H$ i+ M/ I0 N
</td>
; t- F7 _/ |. @2 S3 U" O6 c
<td nowrap align="center" class="bgc">
9 P! C* G9 |* n0 e: L
<input type="button" value="<<" class="buttons">
- R$ o. ~* U$ D+ G+ @
<input type="button" value=">>" class="buttons">
3 L! L3 Z& `4 v; w
</td>
# q$ j/ d' r! O& l
<td>
7 l+ J' p! {+ O1 e7 h0 R# F
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
9 B" F; v! |# ~8 m5 N; C
</select>
6 T* x( x6 g3 z! Y' I: \# i
</td>
, |3 A. u" D/ W6 R' r9 F! L8 M$ {& {
</tr>
( Q% q! F, N! w8 B# \
<tr class="bgc">
& K% m6 k# h! Q; u; }# [' c! V
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
! v; T9 j5 _- ?0 O$ B. y' Y& t1 K
</tr>
( ^& ~# L1 ]& _4 l
</table>
4 H- C5 h7 Y& |- w
</form>
4 n* ]# @: N4 _9 t
<script language="javascript">
" e) E* j8 ]; `/ p: ]. n, ?
//人名移动
! l# |7 I, r m3 s8 W2 G2 c2 d
function move(fbox, tbox) {
! k. e2 m6 w8 k. |) U
var arrfbox = new array();
# R3 V. Q# z0 m, H# \
var arrtbox = new array();
. V9 Q! D0 `7 N+ D
var arrlookup = new array();
2 c! X# Y$ ~# d! N+ E! {
var i;
& L" A- R2 G. |# B% P$ j, M
for (i = 0; i < tbox.options.length; i++) {
( O) O+ N! a+ f' s* Z8 n
arrlookup[tbox.options
.text] = tbox.options
.value;
, D! C1 [, t) B, w7 g
arrtbox
= tbox.options
.text;
- f y5 M' w( B7 u
}
: S9 e) C5 O1 n& _
var flength = 0;
) m1 E+ l7 Q1 I+ r% x' I
var tlength = arrtbox.length;
0 L O2 W% I" n
for(i = 0; i < fbox.options.length; i++) {
S* q3 ?) s' z* m4 E7 p! ^5 n
arrlookup[fbox.options
.text] = fbox.options
.value;
. I8 l' X" O8 h3 g( N, T% E
if (fbox.options
.selected && fbox.options
.value != "") {
" w; A, Q$ R8 n2 O$ g* A3 `* z
arrtbox[tlength] = fbox.options
.text;
( ]$ [+ f3 f Q' g5 i. a9 m! R
tlength++;
8 O' _4 c8 J6 K4 D
}
' x( N8 s2 l$ l* k* C* B/ D
else {
1 f% T* r$ U! b; B7 b1 o G3 \
arrfbox[flength] = fbox.options
.text;
% o1 |) H8 J- s' w5 F3 n9 W
flength++;
+ ?8 t; m; M. s; n2 J' `% _
}
- S- s/ f/ N* T) j1 i* J: @0 ^- I" D
}
K4 y1 s) s# B
arrfbox.sort();
. q# t- F. ?. V7 |* b+ Q6 V9 q% }, p
arrtbox.sort();
f( a6 J x$ l5 f3 B
8 B0 L, g: O7 N0 W- k8 y' Z$ n
fbox.length = 0;
& d/ V6 y; m( z3 l" S
tbox.length = 0;
, q: g: z# l# S1 {6 ~' R
var c;
- c3 c3 W j1 A: j/ y# h
for(c = 0; c < arrfbox.length; c++) {
$ ~, I9 F& q" k) e
var no = new option();
! M& }7 E+ Y7 E, @6 a: ?
no.value = arrlookup[arrfbox[c]];
% l4 ]/ M5 }: F( @+ R
no.text = arrfbox[c];
4 Z: P7 {/ c5 V( \$ r
fbox[c] = no;
; G2 U! C# Z/ ]: X1 s
}
0 K* t! M5 J2 q, h; S# J; V1 J
for(c = 0; c < arrtbox.length; c++) {
% d$ i1 r6 ]* g& M. @/ k% \
var no = new option();
" h0 m$ d( D0 ]. x
no.value = arrlookup[arrtbox[c]];
6 O/ c. I) y) O
no.text = arrtbox[c];
6 \+ y' y7 r' H% O
tbox[c] = no;
3 P* U! C1 y. o% {
}
1 l3 Y0 X( z; x( i& p7 \
}
) Q1 n. n- R. r! o
</script>
6 L" j# Z) V! p4 ~' }: k) P* a7 {3 ^. U
</body>
7 v9 h! N( }# i0 D
欢迎光临 捌玖网络工作室 (http://89w.org/)
Powered by Discuz! 7.2
