jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"
%>
<style>- F+ a/ {' [7 [6 ]) V* h
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;7 j3 r% u4 `5 P! y! P! B8 p
  border-bottom: solid 1px #4e7dc1;7 U7 P$ B# a, H3 O
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;* S! U0 W( Q0 K4 O. s, {
  padding:1px;
  margin:0px;}. l9 Q8 n5 Y8 b5 W! D" w9 ]8 m
</style>
<script language="javascript">4 n' `; P0 J* L
8 N" g! O9 T% q' D+ s& ^4 Q
</script>
, L7 p5 Y1 n/ g& m/ z$ t. S, E0 ^<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
# _7 ]8 L. @; O' A# o<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />5 q8 g! a( g6 a  B* b0 v+ @
<%- x' Y3 p6 Y% k. h& n. n6 Q: g
  cdatasource ds=new cdatasource();  //数据联结bean实例  D. ]6 i- U0 S8 r. r) a& K4 }# D/ Q
  java.sql.connection conn=ds.getconnection();* S4 T/ S2 V" L- O+ T; m9 n
  java.sql.statement stmt=null;
6 _! D0 Q; l: {: U8 E  java.sql.resultset rs=null;# e( Q* p- U& @7 t! y1 K& I
  cdatacheck dc=new cdatacheck();
/ p( m2 s. F' `9 s- E%>& E1 }" S% a7 s. c" x
<%) c% e: r. e$ `+ y
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";
- \; G# i9 Q. h. r* M: dstmt=conn.createstatement();' p0 H, ^0 F- Q
rs=stmt.executequery(sqlu);: f% a0 J& |7 u
%>
1 R: y7 n1 Q, J7 N<script language='javascript'>- p5 |0 [4 Z& ]
arr = new array();
3 [  ?' H% D2 I: t, ^<%  int temp=0;% \) x( j( l8 X9 w, g9 n
while(rs.next())
, w& {1 T; `1 {& e/ M{
2 L& c( N$ N8 \%>, f" W* ~1 E0 b( o# e0 l; O
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
- w9 q; t4 Y9 l4 W' t: Y: U<%
1 P) B+ _! s1 f( d5 C2 Q4 Ytemp = temp + 1;
, d& j* T8 Y. C/ l% W* N- f. I}- V, T) q/ X- s3 N
%>
( E3 E; ?  ?$ a6 Atemp=<%=temp%>;
  q1 [3 z" Q7 B7 }2 q: ^$ [function changelocation(id){
+ k9 \. m5 [& ^0 ]4 kdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 ( d1 D/ j  f7 K
var i = 0;
. K# O, p% f9 z$ I6 \- cdocument.combo_box.city.options[0]=new option('-------','');
- {$ Y* g5 Q* U# z4 @9 Tfor(i=0;i<temp;i++){
" w- v) e2 ~$ ?! sif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
) r; q3 ^3 ~5 R3 ^8 h0 Q2 ]document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
6 a3 h4 P6 ~1 V* y9 T4 ?5 j) e* E6 `} 3 A' N) P" W$ u
}
2 s5 d- S/ Q$ L- z* a, F  L}
/ \1 K% [5 X( w0 m' O- p. L1 P) V* d</script>
/ Q, M8 d- U. g/ I+ }" ?
: {6 f/ M( Y5 B0 ]: Q* @, y<form name="combo_box">5 G# h  ]! t4 A% _6 K
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">. Y6 a- S9 ?5 R* |
  <tr height="24">
# E" [/ h4 f/ K) d <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
  \) y& K/ M+ {% A: f0 N <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>% T$ ]% c$ P2 N8 B) c1 v; k" L
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>5 M# @' Y2 L; R6 \
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>. `: m2 R9 W. N' ?& ?0 O- D% S
  </tr>
. f$ X7 W# Q; Y: g  <tr>
1 h: B0 ]: g8 R  { <td>& F1 V6 O2 K2 O8 E! P2 H
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">. [5 P7 F3 i1 ?9 I0 P7 z! u
  <option value="0">请选择部门 ---></option>
) D; F- I+ K/ f<%
5 L. U3 g* _' v! X4 X6 k- F string sqld="select * from tdept";7 N. x! n! l. p7 b( ]
stmt=conn.createstatement();) @' v+ `% c" C! A8 X
rs=stmt.executequery(sqld);
# W: i% E+ F: m4 E+ F1 Pwhile(rs.next())
  W  L1 G$ ~5 ]" ]& T0 z. L9 F+ C{
5 Q. I  y& @: _+ r7 @2 J2 ~%>* [- P4 l& f9 M. O+ H
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
& l! s/ r2 ^+ L% i0 d<%" r8 x+ r3 {2 i# B- Y
}+ ?  i' W/ Z- v7 v3 Y: p* O( [7 M
%> 6 |# \- }5 d7 B0 K
  </select>
! \6 m6 K; H7 @, Q) m</td>
2 N8 F5 M- W  s. J0 v1 i <td>1 P% A1 O# ]+ h& p! t2 y
  <select multiple id=city style="width:150;height:200" class="bgc"># B' e9 Q2 L* ]! k
  </select>2 R( a" o$ N  X% P7 y2 ~5 Q
</td>* g0 P2 ], p. ^0 Z: M
<td nowrap align="center" class="bgc">; @% v. _2 m. p6 \3 w/ o
  <input type="button"  value="<<" class="buttons">
7 X8 I+ ^$ j, Q# E& {1 ~  <input type="button"  value=">>" class="buttons">
( u4 B  [- C! R: \</td>
! ]) O5 H: Q/ e& a0 s2 S, D% { <td>
+ j9 {" \$ [& P* {# a  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">0 O" V) E5 G+ N
  </select>  C+ f. C# |- Z
</td>/ @- p( [4 q' C8 A: C8 j& M
  </tr>! r% X2 K# r' ?6 m
<tr class="bgc"> 3 m$ d7 ]7 O* q9 a
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>4 _5 i% j; @0 V8 t- Q5 |2 R/ ]
  </tr>/ ^  l: g' F/ q4 g
</table>
  z- a0 Q9 }$ T1 K</form>
- T; M$ d) U- S! j; Y<script language="javascript">" s. e" L( m2 I: d
//人名移动
- m% Q7 T" R6 I  r. Y+ Vfunction move(fbox, tbox) {* X3 N. o8 e9 X8 `
var arrfbox = new array();
' y7 r, h) K8 m9 _var arrtbox = new array();! m, w6 j  c7 b
var arrlookup = new array();
) @4 L  _$ |; Z2 svar i;
( k. ~8 r0 X; d0 ?  y' Vfor (i = 0; i < tbox.options.length; i++) {; E2 ~! E! `; b" E: N! ^
arrlookup[tbox.options.text] = tbox.options.value;
2 R# h! b( E  E1 m' N. \arrtbox = tbox.options.text;
2 r" O  r6 {1 H# I2 N5 R}9 V% `7 v7 T! {9 X9 m# r3 ]2 O
var flength = 0;5 O, d5 v) Y; P% D: q4 S
var tlength = arrtbox.length;
1 ?0 _# L- N7 ?; _. P1 ^for(i = 0; i < fbox.options.length; i++) {  p0 B. A  T, d& s% R# Z
arrlookup[fbox.options.text] = fbox.options.value;
# u; S1 u* V" w0 i! S* @if (fbox.options.selected && fbox.options.value != "") {
" s+ {- Q, k( q! t, Sarrtbox[tlength] = fbox.options.text;
5 C5 ]  n2 m) V7 ttlength++;7 `1 B# @4 l* `+ F/ O7 y
}
* r: n0 e" a, H- ~; O) telse {1 b& i, T1 N( L* u2 I& M. D
arrfbox[flength] = fbox.options.text;
: d; O( T/ O0 P1 ~/ nflength++;4 J  s/ N6 X2 P* Q" j
}
8 \2 P) U  c9 G' I3 e}2 M( _7 G& W3 z- G( z  m* E
arrfbox.sort();
4 h0 n- U, ^2 rarrtbox.sort();0 D  u* m3 n/ y$ _) W) }
9 P3 a6 p7 C7 U( M# S; D" Q
fbox.length = 0;
! J3 ]  r! ~: [1 O( m$ Q2 Z4 {tbox.length = 0;( F- f! a2 y1 M9 m
var c;
7 J- K( V8 n# H+ F& Z% \6 Gfor(c = 0; c < arrfbox.length; c++) {- _" h2 p' P% R# }9 @$ @( P6 C
var no = new option();- U0 V0 p1 r+ ^0 T( h5 ^
no.value = arrlookup[arrfbox[c]];- D! @5 u3 W" S( r: M8 r
no.text = arrfbox[c];
' Q( L. ?5 J5 p* A3 z+ k+ [7 \fbox[c] = no;; H7 @8 n. w0 B3 V8 W
}* B5 ^; v( N. z1 p: l
for(c = 0; c < arrtbox.length; c++) {. V8 {! O  ~5 ~, [9 p7 K, h0 w
var no = new option();
) C3 F) T, X6 I4 L: Q6 \no.value = arrlookup[arrtbox[c]];( ]& N8 n8 J; W
no.text = arrtbox[c];1 {% x2 E6 x8 R7 y6 b4 Q( C' `. C% i
tbox[c] = no;& b: C! W6 t# {8 J
}+ ~( P2 D) `1 Q% X: A& Q2 u
}
( F) A3 y9 M% y</script>9 v* `8 f) O0 A. \, Q: x  |. f9 B
</body>
8 [3 e: m$ c: c$ I$ S

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

返回列表

jsp+javascript打造级连菜单

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

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