jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"" y1 [4 k" q6 O. P
      c pageencoding="gb2312") Q0 o/ _; Q0 C% z2 {4 y+ t
%>
<style>
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }% H# E% I; x# d! k& Z
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;5 C9 a7 O5 m# ~
  border-bottom: solid 1px #4e7dc1;8 K2 T5 k( \8 O7 C: ?; C2 d  l
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;! \, o" o$ u/ Z0 |
  padding:1px;) L( S" s* ~2 r
  margin:0px;}. l! t2 Z. b/ z
</style>
<script language="javascript">8 {% e( x) g( H4 \- z2 Q
8 F0 B/ Z' d- o$ O7 c, ?! _
</script>, S8 y8 {. ]* c0 B+ l
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
5 ]- Q- Y& {3 e<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />! Z: S" }" }3 L: A7 o! V
<%9 F; ]; y& y& l% _3 [) w
  cdatasource ds=new cdatasource();  //数据联结bean实例
9 l* ]. ~) c1 R, D( ?4 \  java.sql.connection conn=ds.getconnection();
% m; V9 x* N0 t6 p: P& c/ h  java.sql.statement stmt=null;
) o! N6 m; ^  l2 j% Y  java.sql.resultset rs=null;8 X0 v4 |4 f$ D8 C2 W& n$ z! I: h
  cdatacheck dc=new cdatacheck();
; I, z( w# t% o" q5 W%>
6 q- u8 u9 w( ]<%
6 O' s  ]2 n6 O7 L9 k9 T; w" Rstring 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";! Z* Q. |: y: C8 p$ L0 M/ T) O
stmt=conn.createstatement();  v* |" y( J/ i) _
rs=stmt.executequery(sqlu);
/ k* V2 o" ?: U$ `; `%>
9 _5 e5 d' j' h5 o9 _' a$ \<script language='javascript'>
, R0 r, J2 J. F* Narr = new array();* b  U# `$ V$ k4 [$ S
<%  int temp=0;
0 p. m, c9 o1 S' T7 zwhile(rs.next())0 e0 w! o" E- O: m4 d5 [% L( L
{, J$ k0 p7 k' f6 e1 z
%>
* U6 @8 N0 _7 n, ]5 v1 q2 parr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
8 \0 z( G! }6 {<%1 L% c/ q( {3 l8 Z4 }3 a7 |# V
temp = temp + 1;
# f8 y/ D: D3 D}
" |& c" w% I0 V4 d$ r& R  W3 R%>
1 M/ P! j9 s8 j' r  Ntemp=<%=temp%>;
$ O' a$ `2 x4 o/ Z  mfunction changelocation(id){ / f: {  z- d& n
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 & j# f+ b9 A$ X3 g% k
var i = 0;
9 e4 |. D& G7 I) n  jdocument.combo_box.city.options[0]=new option('-------','');
8 z: d- H  m. K% d4 j4 ifor(i=0;i<temp;i++){
1 L, n3 _. J& x+ [if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门] ) A  T3 M% H/ Q3 _5 k3 P
document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
8 V- h3 v! p% E& f% s- p}
5 V4 U% ^  i2 h1 Y9 W% @} / j. P3 p  |3 H: _
} * g/ R" m0 o9 y# V. V. G6 R, `
</script>6 S5 T9 t0 {) d

3 B0 K& L, b. w<form name="combo_box">
! e; u$ T' \) _( O& M" F1 h: v; r<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">; Y8 e0 G" [' r0 v
  <tr height="24">6 E' A( S% o. _4 Q. ]
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
  a: P: G5 N& B9 T" p  ] <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
% Z3 V! y7 x5 r/ U <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>7 k3 y1 @% D: N1 V" k3 T5 w( Q# e
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
  A$ c  @6 N, g+ o  </tr>2 d6 e/ `+ {9 v% m1 G* x5 w# X8 g# G
  <tr> , T( W" f' b( a- G; {2 A, `
<td>1 p' @7 p( a' f8 c' \) M: x
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
3 Q7 u+ Y2 f+ t  <option value="0">请选择部门 ---></option>
( k- m. S. Q) z3 r<%
5 o2 D6 K1 i$ D: A8 H& p& }1 p string sqld="select * from tdept";3 e. B4 _) L: v: d9 ~, L% R$ [
stmt=conn.createstatement();
6 G! L6 c( S; b" |' V- Jrs=stmt.executequery(sqld);
( J8 }% o4 V9 X# gwhile(rs.next())% o$ t" [6 h, m# m
{; F6 q) w; F: `3 E0 f1 r
%>
9 J# _, B, O" K# V  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
  r5 ^* v* k- o+ O. v! b$ D<%
, x8 J9 p3 Q/ _& I}
) a: d1 e; v* S& s& _%>
5 f' D2 u$ A  f% I* A+ t+ I% m4 F6 I  </select>% s, P% _9 A3 o) I6 F) {
</td>; I1 q- m$ w& |3 y) n1 w" E
<td>1 A6 v# l! ?% H% z! M, |# }: q
  <select multiple id=city style="width:150;height:200" class="bgc">
3 w7 _  H0 k7 a* P9 f  </select>
% X. o% k/ v' u9 H0 w</td>5 G+ @& A- ]: }+ u# O; a! j
<td nowrap align="center" class="bgc">
& s5 i. d' {) [; U/ ~# T  <input type="button"  value="<<" class="buttons">1 @6 c: s' u# ?! p& b0 ?" {6 n
  <input type="button"  value=">>" class="buttons">* u- ]4 C1 H, N6 T1 D, d4 K
</td>
: @# G9 d& @: F! i4 m0 g <td>) E' J  [# |6 F6 x2 V9 C9 P& j
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
- f4 x. e) a6 W8 k8 @$ h3 H  </select>6 B9 u2 ~1 D$ h( {! K1 x
</td>' s4 Q* C6 }: P4 B( R
  </tr>. a/ [' ^. \" @# u6 T
<tr class="bgc">
: n9 P, B5 X3 ^- d <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td># G9 d: L, K. o1 i$ Z4 {
  </tr>' F5 g+ v  L0 J, _' C
</table>
; p/ p) t0 E  a% n3 i& `6 w</form>
) D' P, ~5 y. \9 o3 A9 w" i1 [/ g: V" P<script language="javascript">2 h+ O4 t* M0 d& ~1 H& q
//人名移动. N3 e- A& b* f) O
function move(fbox, tbox) {: k/ a  N0 E3 s! [, O, b
var arrfbox = new array();
: S) V- `4 [3 }var arrtbox = new array();
5 K& ]1 j$ ~& v3 ]7 H- `var arrlookup = new array();( |0 J" u. ~( {: w/ w( }6 U7 G3 P
var i;( w' D, A8 M6 _8 j) d) l$ Q5 H
for (i = 0; i < tbox.options.length; i++) {
: x. d0 B0 `# }5 P1 varrlookup[tbox.options.text] = tbox.options.value;
3 B" @, W" a: i% Z9 y+ q: f" D9 _arrtbox = tbox.options.text;- J- ^7 e8 Y. K! M+ x! Q$ U. W
}
; @2 i4 L6 A1 j' k' Vvar flength = 0;! A, T" F/ U8 ?% Q$ K( u
var tlength = arrtbox.length;
( t: t3 \* u& M5 ~# Tfor(i = 0; i < fbox.options.length; i++) {- @; A0 S5 @  Q/ ?1 t5 t
arrlookup[fbox.options.text] = fbox.options.value;
9 P  ?" L# u/ H! e4 y, n1 A3 L( j) Gif (fbox.options.selected && fbox.options.value != "") {# D/ G3 I* e; K0 u1 I
arrtbox[tlength] = fbox.options.text;
0 s/ C# M, o3 T8 K) A! W7 c9 u8 M' ~5 ztlength++;
  z3 Q% m; m, ?6 B6 [2 u: ]( K}
+ j* R" d! D* T: p9 o  P9 F. yelse {% R% s$ n. U$ U, p8 v% t
arrfbox[flength] = fbox.options.text;
7 N/ f' y! b3 n* u8 q& w- Z7 `6 Zflength++;- J/ A9 |& c3 ^& h2 s
}
. M/ F& d* H* r, }" G}
! K8 E/ \& W  C  |. C3 Iarrfbox.sort();9 m1 h/ N! u  B2 ~& e. C( O- L
arrtbox.sort();1 a- g& a% ^& W; L% h

* s( r: D6 G* n9 t+ M& W; Y- J& \# pfbox.length = 0;% i$ r/ ^8 c3 o  ?1 R5 O
tbox.length = 0;
# ~* C# u* }+ |7 h5 lvar c;
5 \' Q0 w2 g$ y( Y; a8 Qfor(c = 0; c < arrfbox.length; c++) {
$ o/ g* ?$ J' s$ pvar no = new option();
: E! q. @. `2 v4 W2 kno.value = arrlookup[arrfbox[c]];
2 t/ W. ?7 ~) A5 v* M$ wno.text = arrfbox[c];
; K  g: R3 p) D9 `2 f( _9 ~fbox[c] = no;* v1 Y0 M7 ?& G/ G' R% i& o
}
( I) V1 ?! W; N2 ?# ]for(c = 0; c < arrtbox.length; c++) {: _7 h" e( G+ ~3 }4 q
var no = new option();: N4 _* O$ z- t  u, ]
no.value = arrlookup[arrtbox[c]];
9 Y) S/ V, B0 Z+ mno.text = arrtbox[c];
/ H/ }. z! r. L+ c: a0 I; w/ f9 Ctbox[c] = no;
) m/ N, L# U8 l, q* n2 m }2 ?  u7 H: y3 m0 M$ y. I: K0 v7 T* }
}
3 ~; P8 P9 F; y2 M: |</script>
" W) N& r; r( c5 X</body>
* _( ^3 W" z8 z- @

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

返回列表

jsp+javascript打造级连菜单

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

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