标题:
jsp+javascript打造级连菜单
[打印本页]
作者:
admin
时间:
2007-12-5 17:43
标题:
jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
" m0 J6 y) H4 Z9 M7 L, e7 l
c pageencoding="gb2312"
3 f ~( P2 h0 L; I- u
%>
6 r. C2 V: N2 o/ [# S
<style>
5 ^& v5 i! E9 x. B1 n+ @
.f9{ font-size:9pt; }
; ?8 I: y) e; j" q7 C; \
.bgc{ background-color:#aecaf9; color: #0033ff }
! i& @5 H Z/ v9 [, b: \1 d' p; t. v
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
+ C0 o/ S0 O9 M `
border-bottom: solid 1px #4e7dc1;
, A, F. c0 \4 P* B5 X( q/ |
border-left: solid 1px #aecaf9;
8 f9 E* ~& L9 z9 ]" G
border-right: solid 1px #5679bd;
/ W' v9 m- |# e5 V c6 i4 M) A& k
padding:1px;
3 L( ~& i5 J. u `' J
margin:0px;}
/ b/ `* H6 y# [+ Z% @% k1 N
</style>
+ p9 J+ w/ Y9 {0 e a& Z& c! V
<script language="javascript">
: f7 L" z3 j" F
<!--
. h' r1 ^% r% B% L9 }! ^" r
function rv()
! B) L" P0 y( u: f0 b' Q4 S1 Z
{
3 ]) a9 g: @% L! T: ]
var val="";
8 |3 @0 G% d/ o7 e/ Q9 I. F/ V1 \
for(i=0;i<combo_box.list2.length;i++){
/ v g- B7 B4 k# F* q+ U7 J; r6 L& R
val+=","+combo_box.list2
.value;
( ?6 T! Z: t( U, {5 s
}
2 l/ t# |% n' _3 \* M
if(val.charat(0)==","){
# ^: s% N# J' C/ y6 z
val=val.substr(1,val.length);
{6 M9 S% W3 t9 O, T6 |: r
}
6 |* f. h$ H: Q8 P, W
opener.form1.frecname.value=val;
! J ~+ r5 C; ~
self.close();
. Y" U$ l+ b1 C, W
}
0 G% j- v# M7 S- l+ r
//-->
4 R4 p- E' K. u5 j/ ~
</script>
3 h [# U; E+ ?3 V2 ~3 M
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 z( Z+ V4 [% ~9 ^
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
, r# j' ~# b! n( ]8 U; Q$ w0 i
<%
# l4 |: x& e- H
cdatasource ds=new cdatasource(); //数据联结bean实例
5 G& y; K( o6 |! J
java.sql.connection conn=ds.getconnection();
# U, ~; a' d t m9 D% s r' _4 a' U
java.sql.statement stmt=null;
( m8 ~# r+ \4 U
java.sql.resultset rs=null;
/ i% h- Z t& {
cdatacheck dc=new cdatacheck();
6 T8 O; W7 |5 c z
%>
2 L- ?5 N& v' ~" T
<%
0 ]( W! p( ~* u7 e5 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";
, K- Y, `8 Z# n+ z& o* X
stmt=conn.createstatement();
% G5 V g9 C- U; H+ {
rs=stmt.executequery(sqlu);
5 Y G+ |' _/ H; {9 n T! u1 d
%>
6 F- G2 s: a3 E# g# M
<script language='javascript'>
/ \: T% V2 u. U/ {
arr = new array();
- K1 d o3 y+ ?$ b9 ~7 w; B
<% int temp=0;
+ P; j9 s$ d0 D$ K* U
while(rs.next())
0 [! d% D& h9 e9 P: t1 r
{
0 @0 S2 X3 e# o* i0 b+ }( m. G
%>
( Q6 \9 r9 B- s1 n* G& c( c9 d J
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
' V- D5 f3 Q4 L8 S
<%
1 |/ ^ w' h; Z2 D, c! j& J$ Z3 H
temp = temp + 1;
- v, T, `" m4 n7 a- ~) Z1 ~
}
, @7 A; Q6 _+ I! } e
%>
4 R$ q- ^3 Y w p. U5 V
temp=<%=temp%>;
9 u; h9 j7 i" K, ?
function changelocation(id){
7 x O" E: q r. n: F) h5 ~% i Q
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
1 c' ^& I0 @8 [& }. T
var i = 0;
1 D- P( p. j# d5 d+ Q' A
document.combo_box.city.options[0]=new option('-------','');
! o* s9 i# I+ o5 h5 i! K7 C7 r
for(i=0;i<temp;i++){
% T5 @% B q' @7 T. g5 j
if(arr
[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
$ |* l5 @; H4 @, f6 J2 W
document.combo_box.city.options[document.combo_box.city.length] = new option(arr
[0], arr
[0]);
; T. o2 Y! s3 Y5 ?4 J; S
}
8 F8 g* |8 e& I: R1 _; k
}
% l& z/ z3 e2 ]5 K
}
; i$ z8 a$ y) d5 _- x
</script>
: B6 C# \8 C. _$ y" p% X! C B* K; K
* ?# _/ |# e2 X% E* Z' g1 ?
<form name="combo_box">
) G6 X! d& \* s2 Q1 Z7 @
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
' X* H% i& r( Z8 r
<tr height="24">
% u/ c+ w# H/ J! M% x2 w% S! Z" |' H+ F
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
; d5 L% ~0 O( j7 B" ?9 a- W3 t
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
: Z. g/ f9 y* r/ L4 ~- A6 [4 M
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
; e+ Q3 v8 J# b' g2 i* P8 O
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
' y* H$ \' _! n0 i- Q
</tr>
# j d0 v0 R4 D
<tr>
* T7 X; {& F+ d( W1 k
<td>
7 D$ G7 X+ z& M
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
; [( Y" `0 T* I+ u) w
<option value="0">请选择部门 ---></option>
9 T7 ]# f* S, A! T% | S
<%
7 L9 R/ M& V3 g* l- z' Q9 e
string sqld="select * from tdept";
7 r! Y2 s* _1 z; R
stmt=conn.createstatement();
5 {4 z3 _5 b' ?5 |" s9 t9 k
rs=stmt.executequery(sqld);
4 W1 S% ]( ~* s# s% I: l0 ?
while(rs.next())
" A! l6 G6 p0 d: v. d: P
{
0 |! E8 ?; C9 w& t, }# B
%>
2 f' j) _3 F! p" d5 L' E; b# g
<option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
" v2 h/ P( A/ o3 F' @5 B
<%
/ n( f2 h, D9 O& V/ G5 Q. } \
}
p3 Y6 Z5 h1 _: ~
%>
+ Z: u k0 h! M" V. ]
</select>
8 c: f2 U# l- D( Q/ P, z
</td>
4 |/ t/ n3 u. p7 J3 o7 [' d
<td>
6 Y" r& G! O; K2 N9 s6 i
<select multiple id=city style="width:150;height:200" class="bgc">
+ S" i# j' x# U6 ]2 r$ B
</select>
9 ~$ U$ \& b# M6 h
</td>
7 v; n0 F. L3 ]( c5 `7 x
<td nowrap align="center" class="bgc">
3 w; G# b: u7 m* z, G5 W; e+ w
<input type="button" value="<<" class="buttons">
9 r5 Z" r+ _+ d; q
<input type="button" value=">>" class="buttons">
% L( E; @& N' y. r
</td>
+ x v6 e' r( \4 u" {: V
<td>
7 H7 D* D/ j" p/ ^; I
<select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
: D4 m" s1 ^% Q9 y7 q
</select>
$ I/ D7 p4 g5 k0 u8 E" s
</td>
4 m% q. s6 b' m4 U0 h
</tr>
# X" N3 H4 P7 m& g& Z% t) y X- U
<tr class="bgc">
1 N1 `+ o* Z5 ^0 E
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
6 x( b' d4 N: `2 W7 }% ]
</tr>
% P0 g0 K d/ L' {1 F
</table>
7 f/ E4 h3 K* @
</form>
+ c, a7 N0 u" z# O" R$ a) L
<script language="javascript">
' k7 n, p5 F- k
//人名移动
/ b5 F- [% o: p1 X7 }
function move(fbox, tbox) {
# O q4 m! D8 m) g
var arrfbox = new array();
& l! _4 H7 z/ ^6 h9 o7 C1 M+ j
var arrtbox = new array();
" p3 I9 ^% P& l
var arrlookup = new array();
/ l5 H' X7 |! o/ K
var i;
; j) `0 E8 w+ u6 W o8 L
for (i = 0; i < tbox.options.length; i++) {
* L$ D& E5 A, A7 m
arrlookup[tbox.options
.text] = tbox.options
.value;
2 R3 j8 v& t; j! e4 F8 P/ W% \: U
arrtbox
= tbox.options
.text;
: F- E5 m% _- |
}
! {8 [$ a- L5 u* j) v1 B& t+ O: @
var flength = 0;
( e) `1 h/ r2 k. N0 l: c7 P; B
var tlength = arrtbox.length;
7 ?. z0 f. S" L% L' h' W
for(i = 0; i < fbox.options.length; i++) {
* ]; P9 U' A1 z4 F
arrlookup[fbox.options
.text] = fbox.options
.value;
6 \; Q5 O% e, r2 G: E
if (fbox.options
.selected && fbox.options
.value != "") {
% L7 R( Q& ~7 L& L
arrtbox[tlength] = fbox.options
.text;
+ `* Y! {6 v& X: ~- Z9 d
tlength++;
' A+ Q- I* I' j1 e9 E; U
}
% m, a( {* U# C2 @- s+ C. L
else {
* _* ^* ~! R: M7 S z
arrfbox[flength] = fbox.options
.text;
( w2 Q T- o2 d9 S
flength++;
+ R4 \, |& F1 b$ f
}
9 M q) W; N" P' a& p
}
" e9 N/ A- y9 Y! M' c
arrfbox.sort();
& n" r0 ]9 s. v7 Q3 s5 p. K1 y
arrtbox.sort();
: x1 ^! N2 a; v# X+ \4 {
+ G0 `4 P k1 v. `, `0 V& t
fbox.length = 0;
* Z( S* n p5 Z8 x; u1 ~
tbox.length = 0;
1 m$ L0 a k4 z$ t! _
var c;
+ q9 p9 G% G0 \! v
for(c = 0; c < arrfbox.length; c++) {
K( n- [ Y' A5 Z* a8 z( k7 Q" s
var no = new option();
5 W. C( T1 I" O4 d
no.value = arrlookup[arrfbox[c]];
. o, K) } z. R' N3 a: A
no.text = arrfbox[c];
5 \: f# ~5 f8 B8 ?- c( W
fbox[c] = no;
$ V5 ?2 A6 s# T4 I k6 }1 R3 _
}
% f0 @. E& i* {& d& }
for(c = 0; c < arrtbox.length; c++) {
% e3 d7 u9 d" m0 `4 j! ]* A1 b" i/ V
var no = new option();
) p" k; e2 g2 w/ W/ G4 f
no.value = arrlookup[arrtbox[c]];
}/ v- W4 X: z9 G3 i7 }
no.text = arrtbox[c];
( x- A: c' V4 i8 X9 M1 Z8 X9 y v
tbox[c] = no;
# d m# J0 l3 \" O8 S8 W
}
& `% h% L" G3 p" ^- f- @
}
( y3 U# P$ M: e! y
</script>
$ y7 S5 E: v- O8 V
</body>
& W7 ~( E" G, V
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
