jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"1 s# P/ F% w& q; x) Z+ i* H
%>
<style>% y! t' ?4 e0 }( w
.f9{ font-size:9pt; }, P# f; g5 N# O& o# w
.bgc{ background-color:#aecaf9; color: #0033ff }8 j. Y' b" k/ }; q+ s* [
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;, Z/ n9 K' N- x$ y! V
  padding:1px;) O7 k7 y- O( ~9 ?0 i) g. l  N
  margin:0px;}
</style>/ t+ }, V3 Z+ ^3 y
<script language="javascript">

3 m, q/ C3 a' Q/ d; W" K</script>
: ^0 E% S0 Y3 d5 a- o4 J: ]8 s<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
! ?+ R, t2 C; Y% H! ^5 x- O<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
  V, w/ F. j: m, M, t- e" @<%
- f. ?: l  g' y. U9 h  cdatasource ds=new cdatasource();  //数据联结bean实例
! [8 ~# S/ T; V9 }5 R7 `: |! m, y) {  java.sql.connection conn=ds.getconnection();" d, b( N" g. @# {! o, w- K% E1 n
  java.sql.statement stmt=null;
% _4 q) k' b) |! j$ {$ f# A/ G9 q2 h  java.sql.resultset rs=null;
! I% C2 ^0 _* O# r  cdatacheck dc=new cdatacheck();2 m( r- d: x  a4 ^# \
%>
5 ^: W7 `. p. ^3 `& j<%6 V$ y# l+ |. ?
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 d2 |7 h. N; u- O
stmt=conn.createstatement();
+ z% H1 w$ Y) X/ Zrs=stmt.executequery(sqlu);
4 E% L6 I0 f4 m" I0 _9 f' E1 y/ C3 y%>
3 F8 A: i  ~$ a% s) ^% O3 ^9 f<script language='javascript'>4 M& j1 j- J# ]5 e0 M. P8 q
arr = new array();  U3 t, U3 |  B# D: H. y; j
<%  int temp=0;
! F" _* H( K0 M4 Cwhile(rs.next())4 [" P, T5 Q, }. r% w# A
{
" O$ D3 Y! p& O) H( P3 R- U%>
0 y6 V1 k% i# Aarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");( E# B9 {& m1 t8 M7 j
<%
0 u  S/ N. Y% H0 ^7 y% btemp = temp + 1;7 V/ P! y+ T4 z4 U7 O% v3 @
}0 |9 H" ^8 _& O# u1 c
%>% a" U% h8 i' E: {" m5 N+ v5 ~+ o4 U
temp=<%=temp%>;
3 L" E0 W) l# ~, N" q0 X6 P, H8 ofunction changelocation(id){ . e' L/ N3 V# |; v; }' {, u5 I- n
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始
( u& r3 a6 h, c. U+ Dvar i = 0; " ]" i3 W: s2 d( u. f6 N
document.combo_box.city.options[0]=new option('-------',''); " b* }- _1 C8 [" {, O5 K+ U
for(i=0;i<temp;i++){
& M0 ]) i1 o) o  c2 n( n, {if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] : \/ b: u& q+ d3 U9 x. v
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); - i( O9 U; K- f( w. `- P/ L
} 0 J5 d! M! ]7 r) y
}
) X3 V9 T  z% f3 o  _% v' B8 e}
+ M: s' q& `) m</script>. X" Y6 t( ^% P# b6 {% c
5 L- N1 K$ P6 O% m/ ^) I3 G% U
<form name="combo_box">
/ u5 h% r' R. k<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">7 Q, [+ E5 E- m
  <tr height="24">  C+ Q" u) ~- k) ?6 c5 V. H
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
' q6 C, g2 ^4 |' h <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
  ~1 s  Q  F$ h( g2 m <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
3 D) I0 ^% [( f( L' n <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
0 V: }  r* ?+ j# \3 y) K  </tr>
% w# ]. {  Q3 R, j2 B" S  <tr> . Q$ x$ H$ m) o0 a  {
<td>
  \5 Z* L  v% Y& ]3 t  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">' r( q: e  D2 b! p% y; q
  <option value="0">请选择部门 ---></option>' a! w, o* J7 p5 j3 m- b
<%
. S6 _# U% E) u+ Q string sqld="select * from tdept";
. _( h4 p* P8 |* }( L6 gstmt=conn.createstatement();& \$ Y( `1 h2 a" p4 t
rs=stmt.executequery(sqld);
. p; T& R2 w( q: Ewhile(rs.next())3 ^8 e: F0 l, S8 L8 y7 X9 A
{
* z$ U" s! G2 m* v6 V%>& r8 b$ Y" C/ v! l7 e; d
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>$ ^7 N; o- f3 N
<%3 @3 {6 I0 S3 Z5 h, M, t
}6 D7 _" h" i* {6 S! ?
%> 2 v/ B9 J: s- U2 g! \* {) L* f
  </select>
+ h) K! d6 t( S</td>9 m+ M/ J7 c. ^3 A( Y8 {9 _
<td>
0 D- e0 k5 I$ x+ M, e) r- R  <select multiple id=city style="width:150;height:200" class="bgc"># j: E* f/ {4 t% `, X
  </select>
9 w1 F' F* t  q5 L  w</td>
2 }" T* o# z0 f& N <td nowrap align="center" class="bgc">
$ W% |- @: @' r  <input type="button"  value="<<" class="buttons">
: ^$ k! [4 D0 @* u: p8 ?% _  <input type="button"  value=">>" class="buttons"># q1 F5 t" M7 |. s
</td>$ @8 d1 o- k2 [3 D' ^1 E
<td>
% T" F, o& ?2 F& l% F  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
& r/ u7 P3 @  k& k$ P& R' h6 u  </select>
- a- }. N( T' d' V* O& v, W</td>* ?" z, V( K7 @5 a& K7 e9 i
  </tr>) v* C6 |/ K1 X( w  N2 j6 `, A  o( S4 l9 g
<tr class="bgc">
8 u5 G: t: K  C+ ~  r& U <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>$ G5 a0 L/ }2 p
  </tr>
' l; |  \! W7 B) X</table>
0 h9 f7 U1 {( ~6 P7 |7 Y4 S/ O</form>, M8 a" W  C" G7 O) W
<script language="javascript">
2 R# S8 l& l1 H. w3 h% L# ]8 C//人名移动& I& P0 s1 L8 g% G# [
function move(fbox, tbox) {
) s( I$ S4 ^$ Ovar arrfbox = new array();
( ]5 r% S2 S7 |var arrtbox = new array();
3 X/ e* p9 c5 Mvar arrlookup = new array();' Y7 s. @; f' U# R- v9 J- o& X
var i;  G  t. [6 T* A% M- j
for (i = 0; i < tbox.options.length; i++) {( n& n# A# a4 w' B& n" G3 \  \
arrlookup[tbox.options.text] = tbox.options.value;
5 g- M( e7 D' G& R1 e) l7 Y; A8 u! iarrtbox = tbox.options.text;9 t6 b' U. v' v* H+ B
}" ~2 V3 X/ g* T# W7 @" K
var flength = 0;
1 H( v! ]7 t) `  k* }: N' o! r; m' `var tlength = arrtbox.length;
# {. |/ i# e3 E8 P2 u- Xfor(i = 0; i < fbox.options.length; i++) {- _& b, L: J6 r" J
arrlookup[fbox.options.text] = fbox.options.value;( r9 D. ?; |, i0 f
if (fbox.options.selected && fbox.options.value != "") {  F% v# [! o. Z6 T/ R
arrtbox[tlength] = fbox.options.text;$ y6 u3 o6 B! _( g, w8 n
tlength++;3 J+ y$ \/ Z% V" a9 }
}% u: z5 T8 ?3 r
else {
) p9 z% ^+ s: L8 T2 b% B: oarrfbox[flength] = fbox.options.text;: y) t" j+ a- ^
flength++;
, U# C, Y2 J, M7 \ }
4 y9 v, K! m2 X& Y* S}
6 d/ g2 Q: d0 W# C/ w2 Larrfbox.sort();9 w! o* [6 E/ z9 D! S  F- o
arrtbox.sort();
0 ?0 v* N" G( |
; p0 p+ L( a/ y, M' Sfbox.length = 0;$ [: y* [3 t5 e4 o- r' C1 d0 V$ E
tbox.length = 0;2 o  g$ U" F4 l
var c;+ q6 G! P0 T3 d, X
for(c = 0; c < arrfbox.length; c++) {6 x4 I8 k2 K5 p6 p2 h
var no = new option();
/ T) L  |8 Y% S* I' T% F# I2 X# Hno.value = arrlookup[arrfbox[c]];
( u* @+ k7 v& ]. ano.text = arrfbox[c];7 {' K+ I7 g: T' b- C- @9 }# k/ F
fbox[c] = no;
9 ]: H( I" s' Y& W5 F% Z( S7 @}
& T1 D1 [. J8 a8 Gfor(c = 0; c < arrtbox.length; c++) {" D$ G/ v# J- Y, e, t
var no = new option();
( }! x, D* r6 s, o' y3 U3 _2 q4 cno.value = arrlookup[arrtbox[c]];
2 o/ \3 t0 c. G0 M+ M7 \no.text = arrtbox[c];' p' `2 F2 o' F% H* Y( A( y
tbox[c] = no;7 [3 ~# c+ V  v
}
4 J( }- o3 N* F$ r- R}
* n# ]& k% |" \$ Y</script>
( q, Q: f; J) ~  `- G1 z</body>7 C' D1 \# H8 M1 j( L

捌玖网络 89w.org----致力于站长学习交流

返回列表

jsp+javascript打造级连菜单

[收藏此主题] [关注此主题的新回复]

[通过 QQ、MSN 分享给朋友]