jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"! C" b& [/ h& f1 H+ s
      c pageencoding="gb2312"
%>
<style>' i+ D7 P. S1 d: j
.f9{ font-size:9pt; }! g3 [4 \. k8 T/ m) ^) ?- a* F( r& B
.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;# e' B, s5 i' P) }3 x
  border-bottom: solid 1px #4e7dc1;- Z; f$ ^$ S+ ^, a* c6 Q; ^8 m
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}
</style>! R# N% k% [& S" A# L7 I; x# `
<script language="javascript">
, q' S: N4 H2 l& X; {5 C
</script>( k* {, z; t7 O0 ?1 V$ r$ m
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
7 Y4 G# h3 p6 E+ V0 K<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />% y' @. }0 t( H; P& j
<%0 Z+ J1 ^& Q' H7 z5 C) x
  cdatasource ds=new cdatasource();  //数据联结bean实例/ R  `3 R4 R7 @! g, m2 x6 s
  java.sql.connection conn=ds.getconnection();. Q6 g3 r9 y2 s  h4 f9 h  r" N
  java.sql.statement stmt=null;
( D& r4 g( C* k+ `- w- T1 U  java.sql.resultset rs=null;9 q8 g2 n7 G3 t+ \/ t5 x( a: o4 G0 q3 M
  cdatacheck dc=new cdatacheck();( k( t/ V9 @  M7 n) c
%>
3 I  R9 e1 I( n) h$ S<%% o4 Y( Q  w: [; O8 U' ?
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";
! ?) C; F7 u! {- z$ r& [- V8 _- wstmt=conn.createstatement();( e0 }+ M6 J# K+ v
rs=stmt.executequery(sqlu);
/ p0 {/ P" G* ]' t$ W5 D2 U! R%>
; @, q9 X, I* n. ~<script language='javascript'># a9 {  d9 m7 u1 t9 k4 p  Z
arr = new array();5 `' m2 [, k: Q; ?
<%  int temp=0;& X# y/ M$ u$ d' t8 R
while(rs.next())
3 k/ n' \! ^) r& w& `) X{' [9 H/ A2 j; g5 p! ^
%>
7 A8 U3 ?. P) G2 C7 P* Larr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");" a' h! @7 E. u! K, b
<%5 x# h5 V0 d2 Q% e& j. F0 P
temp = temp + 1;
# r' }/ U# k2 D}/ V/ S. f9 r4 @* I6 L. S
%>/ T$ R0 P: w7 y: H3 h
temp=<%=temp%>;. @) v/ L" w% n* @
function changelocation(id){ 1 i! i7 y5 v" h1 W
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 ' T' \* \/ Q& X: ~
var i = 0; 7 O7 p0 S; R7 f2 }# _
document.combo_box.city.options[0]=new option('-------',''); 7 i, d9 m8 N! |7 N
for(i=0;i<temp;i++){
" C7 ?: L$ f! Q+ _; @if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] : D- L8 }& `  H/ a6 T1 {
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 9 @( @3 R  I8 u' M
}
9 U( k9 U0 l' z6 X! E1 G4 x7 \}
; l9 l$ b9 y  ?; ^} # w3 D" W7 F- \1 l
</script>
7 J- N$ i% t& T0 J" I: d! J* |: m* V0 M% F4 X5 A$ Q7 V
<form name="combo_box">) r9 _' c4 h- e/ J1 x; P2 ]* v
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">' E( O8 D$ v7 h; X/ ?% Z+ m( A
  <tr height="24">
0 d# n3 D/ h+ |# Y2 w0 \/ v <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
1 p9 ^: a* O- }6 Q <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
) ?4 t7 z" g- v. S <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
2 P$ x; `9 n0 a, H, V/ W+ x5 i# P7 ] <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
- h( o; A( J* J: v, p, L  </tr>
4 u  R+ R( w  d8 T4 ]* L  <tr> * e/ t2 Z* }" f
<td>
: T) |: o+ Q% A3 u  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">  _# i4 s& U. z8 u
  <option value="0">请选择部门 ---></option>
& ?9 b/ ~0 }" K- C% f% p0 S<%" x2 e6 s# \2 s* i
string sqld="select * from tdept";
, w# I% {6 J8 \5 Mstmt=conn.createstatement();$ D# E: C4 [& a/ o1 Q$ ~5 |
rs=stmt.executequery(sqld);
* B5 ]) V6 e  p6 hwhile(rs.next())& X& K3 V: b0 w% g: B( j
{
%>
/ f" z4 A6 V0 Y* U: d  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>3 |/ c& c" }8 Z4 B9 C3 R2 ]
<%
  J9 {! }( c3 j/ E9 D5 o  Y}
, S9 J3 t/ _# V2 ?" T3 J) L# p7 H%> 0 c7 ^' u- |6 o* Q6 ]6 v
  </select>8 _7 f' ]3 @. H
</td>
: `5 V" _3 z, s$ T5 m <td>
" Q0 Y9 ~3 }0 N2 Q/ h' K: O5 }  <select multiple id=city style="width:150;height:200" class="bgc">; }  H) H4 {/ n, X& a7 k
  </select>  a, Q: p+ i  M0 ^* ~& i1 y; b
</td>2 h8 Z  X% U8 I2 L1 ^" @
<td nowrap align="center" class="bgc">9 I0 R  Z* K$ E
  <input type="button"  value="<<" class="buttons">. g8 e, Q6 h1 y* f/ I1 k2 s% T
  <input type="button"  value=">>" class="buttons">
7 }4 N! d! M0 b& }2 [, G</td>7 l  v9 J( a  W4 I' Z& |  f1 H
<td>: I0 h& S; r' a3 K& ]9 L3 e
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">$ x1 n* p% _/ f0 }
  </select>+ v7 s2 B5 W. B( P3 m1 t
</td>
5 ^& C6 E3 t2 w  </tr>
4 M7 @7 R/ ]8 v9 n5 A" j0 M <tr class="bgc"> + i5 e" T/ q/ F( R2 k
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
: Q# {, O3 T" Z4 {  </tr>
( b7 J( i; M+ ]. M, G9 z</table>) h* I. E. a+ M. ^3 S  a( L4 e0 o
</form>+ Z/ \# ~  D$ j$ g9 \6 s
<script language="javascript">
( b4 ?$ }9 B( h9 k' u" H' _, H//人名移动5 ?  X$ T. a( V# n% K
function move(fbox, tbox) {2 h, I' S0 N8 _# t1 \
var arrfbox = new array();- X- `4 \. y7 H% [3 _1 I
var arrtbox = new array();2 D/ t+ t5 y! [7 c4 g
var arrlookup = new array();9 I2 S6 X2 s( u
var i;. b0 N  ]. W6 c
for (i = 0; i < tbox.options.length; i++) {
/ I+ C% g" x: A" q& d) t( b7 Z: carrlookup[tbox.options.text] = tbox.options.value;" g  E. v* k8 \1 k% w" ]+ `0 b
arrtbox = tbox.options.text;8 l3 v; I" b; c" t. F
}
/ W0 z$ m$ N* ~7 n9 w2 i# wvar flength = 0;
4 B& o  H# L+ |6 U& Pvar tlength = arrtbox.length;
& j8 a2 V# Z' b+ _for(i = 0; i < fbox.options.length; i++) {( X' {: o2 b; {+ |0 q% g/ s
arrlookup[fbox.options.text] = fbox.options.value;! a7 {. L3 p* p
if (fbox.options.selected && fbox.options.value != "") {
  k8 P  d' u4 V5 l& Q8 X$ N* I; barrtbox[tlength] = fbox.options.text;
: p5 R2 D/ q9 W2 Y, L1 C. p% ctlength++;* k- ?1 q0 N5 p; Y3 a+ M, F6 J8 j3 N
}
+ S8 ?8 {, e8 p4 l1 i  t4 q) ~else {
1 h2 f9 Z; C4 {arrfbox[flength] = fbox.options.text;% W, ~$ H+ C6 I1 F' P
flength++;
2 O5 B  c8 Y- j/ q7 G( Q- i' Q- b }( ?% D$ Y' p; m* L9 `! n
}
+ ~- @6 D# J. S1 u. d8 larrfbox.sort();5 t0 R& I% C* D$ y" |' {
arrtbox.sort();
8 e$ J5 `0 v: c) Z5 |; h9 ~2 X' H$ d* r
fbox.length = 0;! d# _& o& d5 I/ [
tbox.length = 0;
- |: ^8 M. l0 y& h& }4 Svar c;7 b  N& G" [# l. L  ^; u
for(c = 0; c < arrfbox.length; c++) {
( ~2 k- I) t2 A8 K- D8 n2 avar no = new option();3 [+ z& w! X* x. b' u" y+ f2 r
no.value = arrlookup[arrfbox[c]];) {5 r9 H' I# a( j3 |0 W6 A1 Y; @
no.text = arrfbox[c];
6 }: m" V; ]& Xfbox[c] = no;
0 q) ~. Z# }$ ?! d- d}
0 L- ]8 {, [7 X) Cfor(c = 0; c < arrtbox.length; c++) {( q- r8 M8 z0 R0 `9 A+ j  ^0 ~3 s
var no = new option();) {. w& ^" r" I5 o; N; k, J
no.value = arrlookup[arrtbox[c]];
4 O$ |# O0 o2 n; B: e2 Jno.text = arrtbox[c];
) V% t6 _1 ^' Ttbox[c] = no;) \$ r5 S6 f2 e8 {* X# y/ R2 Q
}9 ~: Y! Y, z( H( L( m8 H
}
+ \* {* ^/ z( b4 O- z</script>
" E- n+ r6 X3 Y" s4 F! c</body>  }" |+ O. C5 b; [" _

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

返回列表

jsp+javascript打造级连菜单

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

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