jsp+javascript打造级连菜单
<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
9 P% n8 G. G% O6 \/ A4 o. m c pageencoding="gb2312"
r e1 D9 z) k( k/ b6 }: L- I9 k%>) B/ \& T+ X$ a2 A2 C' ~: }( p
<style>
4 j# M7 F; J4 L+ \. {.f9{ font-size:9pt; }, J, M9 T: `5 Q, { H+ k
.bgc{ background-color:#aecaf9; color: #0033ff }
( y, Y5 B- ~4 b.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
( \( X% W- J2 x border-bottom: solid 1px #4e7dc1;0 q& \- z b3 W$ v, d3 p5 A
border-left: solid 1px #aecaf9;! c5 n" n, G' Y+ B% u
border-right: solid 1px #5679bd;, S2 n: M' b- X+ R x# r/ F2 u8 X, {
padding:1px;0 L. i( t7 u$ c/ Y L
margin:0px;}" F% S4 F6 B( j+ @
</style>7 @8 H8 @& ?" `& n2 s% p9 W; N
<script language="javascript">
y, r. G, }$ ]. B! _<!--1 o4 s. T- y( N' j- v% K
function rv()
7 l" m0 H# e% r! r' T9 v' e{, x5 V8 M6 A. ^4 w8 f4 f+ ^0 _
var val="";' k" n; ], D# k. V% V& o1 n
for(i=0;i<combo_box.list2.length;i++){
) a% W ]* P' h1 F, w1 a' D val+=","+combo_box.list2.value;3 U& G3 c$ D7 O i2 F* {
}' ~4 |" x6 ^# y8 R9 ^
if(val.charat(0)==","){
; K) y% _) M0 }8 g- i val=val.substr(1,val.length);
( T! u3 U/ g6 O/ Z' y- p' S }% s2 V* \1 A, y. p& N" b9 T
opener.form1.frecname.value=val;
; O, U; D- X! m; z- ~0 g self.close();0 F2 `8 P7 R. n( y- x0 h% F8 w; |3 ?+ w
}
) v6 A9 N; R& j" I* h//-->7 @0 U. p0 A! S
</script>; @+ z4 u: ^0 c; f, P
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">! T3 {( c& N9 |/ w% g
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />3 }% v6 M/ n3 d
<%
: |2 G) v0 ?5 t& q2 F cdatasource ds=new cdatasource(); //数据联结bean实例. |- ?) h5 P$ T: r# J, v. T
java.sql.connection conn=ds.getconnection();7 e1 f; z; w& @
java.sql.statement stmt=null;
% J6 V3 G6 ?3 W7 k java.sql.resultset rs=null;
- _9 t4 l" Z: w8 O" g cdatacheck dc=new cdatacheck();5 B8 J, c0 F0 n: m9 r% [2 ?
%>9 O/ ^) h) }; T2 \& A
<%1 u+ N* _0 ]. f8 J5 d
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";
2 z- G- i' g6 u0 X, `1 wstmt=conn.createstatement();1 L- V# f4 \6 @* X1 w6 [5 ~
rs=stmt.executequery(sqlu);
) ?' A* y& H7 C6 i& \1 l%>
1 l$ Q% O) m( [5 x5 v6 V<script language='javascript'>
% Q. Y# s+ U6 }$ i5 U; j$ Xarr = new array();' s- h" x l, G/ a' y2 c
<% int temp=0;
7 ]3 g' R- S6 ?7 s9 ^, Xwhile(rs.next())
8 i7 k; P7 y/ i' y8 P, r7 x, H) C{
- A8 s1 ~) y3 w4 \3 I8 k' b6 C%>" X( B% }5 S; f6 a
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");1 ]- q1 d7 n. v" f
<%
0 i, E0 a4 F* T |" T/ i8 O" X# Ytemp = temp + 1;
Z K3 h: w" [}
/ Q9 T3 f4 f, q0 j: e/ f, i%>" [# M: U r* b( C! Q1 ?; |
temp=<%=temp%>;5 N+ l! A" O' \0 l4 A
function changelocation(id){
; H* W: X4 j' b- ?+ _2 Rdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 , ~- w$ Y& s) e9 _0 U( Y
var i = 0; 6 a. S& K: F! @) ]+ Q! J
document.combo_box.city.options[0]=new option('-------','');
7 Q1 \, n) o% ]4 e" ?) I& r; Efor(i=0;i<temp;i++){
9 H G8 A; k0 G! [if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] / c" I" d! ]0 |6 L
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); % E* m" L; c- _4 m
}
0 L2 D' }1 z5 e! P+ J0 l}
! f6 f9 x7 a5 _6 @6 l}
/ Z1 P R# x/ {3 h, R</script>
+ D2 r4 A9 k' k+ O8 ^ ~' [: j3 w$ z& X+ w" E' U3 k
<form name="combo_box">- ]! _$ C. o" C6 q1 i
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
2 y% P j$ A/ D <tr height="24">
( \" C6 D3 j* n: P6 k <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>- e9 f! I0 ]9 q" T% ^ j* H
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>/ h7 B# O# q8 z
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
6 l0 U( _/ |$ H' e9 p% D: |6 ^4 s <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>8 {; O( S* Z( _: j6 A9 G. f! X
</tr>4 y/ s% {- u/ X* R; F% {7 U
<tr> - @ N) i$ ], R# T6 q. s
<td>1 J3 O# j6 `( k# z# ^
<select multiple id=prov name="prov" style="width:150;height:200" class="bgc">: [- ~( H N* M, Q7 C' m
<option value="0">请选择部门 ---></option>
# w( U0 U% `( e' k0 E<%7 D. ?% I' ~3 w
string sqld="select * from tdept";" U5 y; g( w, C4 a* d {5 v
stmt=conn.createstatement();
9 Q! n" F' u4 g" |1 K7 p9 {2 q |rs=stmt.executequery(sqld);6 [" q- |! [5 v/ G6 R$ A
while(rs.next())" _% ?6 C4 n! {, N% Y
{, I2 e' W) g' J# i
%>
0 c1 p% g9 p3 H- z! s! | <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
* d; ~' q+ H* J% t& \% N<%. O) ^ O4 f( S+ @3 n! u
}0 f! T- F4 ^3 L9 z" e7 m
%> % z* c V4 i& G7 \+ t. S
</select>
; M1 F) M" s9 o0 Z, t6 i W8 T</td>
7 ^0 ?+ }9 ]. S) {/ K, t <td>: |; K& }0 w2 z+ K" \
<select multiple id=city style="width:150;height:200" class="bgc">
$ D$ U, a) ]. ]6 l. e </select>
9 E1 x; E6 C' Q9 @4 O' r+ X</td>" _, f2 f' F6 }9 C9 m1 v
<td nowrap align="center" class="bgc">
5 j- C J5 D. D( z' h: \5 j: E! P <input type="button" value="<<" class="buttons">) E8 r! E( F. t
<input type="button" value=">>" class="buttons">5 T8 G1 @" @6 E$ o7 B% f6 q
</td>1 F z( Z' }. z4 M. k
<td>
5 M5 r$ d8 Q$ w$ r5 ] <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">0 `0 P9 c+ z. a U j6 p5 }
</select>3 p- f9 L) F2 i& F/ V
</td>
1 A+ E7 a4 F: Z, d& b3 Y </tr>
6 d/ |: L9 |7 c; O7 G$ l& }2 t <tr class="bgc">
8 T8 f1 h+ c5 p! v+ j <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
! v* L- |( u6 C, @ </tr>& X. ^3 @6 p5 a$ Q+ F) N2 u
</table> g3 x" Y- B% m
</form>9 k2 U& Q8 S I4 L5 Y% ]: s) U
<script language="javascript">7 X2 v% y3 I- m/ V N, i8 r6 k
//人名移动7 i# r# C+ U6 c- p9 _
function move(fbox, tbox) {2 t* R8 q' t, e5 `, ~
var arrfbox = new array();" r9 o3 m7 U- u$ h+ Y/ d
var arrtbox = new array();% D! u5 T" `8 R- Z3 W
var arrlookup = new array();
/ k" D" n: P' _# K y! {, `2 ?/ |: ~var i;0 m0 ]1 c1 z$ s# o, |2 i' T
for (i = 0; i < tbox.options.length; i++) {
* V9 M0 l$ D, u) w4 x" Oarrlookup[tbox.options.text] = tbox.options.value;: m/ O, c/ B: S/ Q. @6 S
arrtbox = tbox.options.text;
: Z, z, m9 q' @( D& S+ @7 O}! L2 r; T5 L" ^$ c
var flength = 0;
& A) g* v d1 d8 s" z6 qvar tlength = arrtbox.length;
$ K% W# ?! @& @% i, A7 Z( bfor(i = 0; i < fbox.options.length; i++) { h" M0 ]4 v( g1 @# M0 [4 B5 H/ G
arrlookup[fbox.options.text] = fbox.options.value;2 p" s: m' x* \. m j4 O" P- v
if (fbox.options.selected && fbox.options.value != "") {, x6 `! e1 t, l
arrtbox[tlength] = fbox.options.text;
4 ]* B; o2 V5 E6 B p1 V: f" S2 V Htlength++;
. X9 b0 B% x0 A( Y- s: b5 r2 `! }; e}' t4 R6 @1 T0 Q
else {, D& O% K! a/ a2 U- j) n2 r
arrfbox[flength] = fbox.options.text;
' q6 x9 K8 E/ Qflength++;% o9 R/ ]" s5 w: _& }7 c( [# _- p
}
, d U! P$ w4 H8 j5 ]0 b- x ^}7 S1 `: a$ T) H3 k2 S6 C# j6 N
arrfbox.sort();
5 O. d8 h* A5 t$ Y0 M0 carrtbox.sort();
% |8 u# J! K0 ~, L
& @! H& P t5 P1 z/ hfbox.length = 0;, g0 F) n3 m0 @) O5 X
tbox.length = 0;
% S4 z" V% X6 M: Dvar c;' [4 V! Q {( G& e. W( _5 V) }5 P
for(c = 0; c < arrfbox.length; c++) {4 u: k o |* s' n
var no = new option();
* G" m/ {; U& b5 v" a& P( Ono.value = arrlookup[arrfbox[c]];# s% _- T' B; U' ?6 ?5 k
no.text = arrfbox[c];
$ k6 ]; c; V2 y, j' C ffbox[c] = no;
u5 o6 R9 P/ \- i$ _}4 x( F4 P: e$ Z
for(c = 0; c < arrtbox.length; c++) {
. _5 J# d* L2 Yvar no = new option();
( ~) T# {6 m' u& b0 r1 ino.value = arrlookup[arrtbox[c]];) S& D" X5 F( f
no.text = arrtbox[c];
5 V7 T0 f4 @6 I! g6 L6 Ltbox[c] = no;
7 M3 D9 ^" o) z }
5 m/ u6 @1 f) o}
2 u' K d! r6 O1 P& h</script>+ ]5 n, }! g6 e9 j3 _
</body>: @2 f9 i/ d, \. F
搜索更多相关主题的帖子:
JSP
