jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"1 G5 {! g+ ]  q+ H' E' j
%>9 x0 O9 O+ b9 v% G. e5 \  y8 i
<style>
.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;' O! ]5 T6 j! C& n# c
  border-bottom: solid 1px #4e7dc1;, t. a5 F8 ]' I. t- Q9 s- _2 G
  border-left: solid 1px #aecaf9;6 b; m* O4 b' W: @
  border-right: solid 1px #5679bd;5 O) S1 }- E7 C5 `0 r
  padding:1px;
  margin:0px;}( G- r: y( i( c! i: g" X
</style>
<script language="javascript">

+ X, R! _" M6 L) I& G</script>) e0 u. `8 u2 P1 G; A
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">' a/ u* ^) e) I6 n
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
; L. L$ |4 j$ S8 i7 J! @<%. A6 j3 A. y) s, E8 J
  cdatasource ds=new cdatasource();  //数据联结bean实例+ g* b. ~- b  z; n0 ~
  java.sql.connection conn=ds.getconnection();, \9 [0 |0 R) H* s  O8 y( D' i
  java.sql.statement stmt=null;% o! S* n5 o% I5 e, h9 G  s+ x
  java.sql.resultset rs=null;8 x& N+ [; M% J6 b2 z! ^
  cdatacheck dc=new cdatacheck();( E, q2 u: g  A; M
%>2 q5 C2 j1 k) }6 ^# [$ a
<%, I7 `5 E$ c  d8 a% b1 J0 C3 Q& X
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";
- p+ q7 O3 ?0 G0 r5 V2 C' `1 Dstmt=conn.createstatement();# ~1 i# v$ B9 L7 C6 C
rs=stmt.executequery(sqlu);
" h5 M; Z/ Z, n, N5 }6 m4 Q; F%>3 i8 o% u4 b7 y& y: c4 J: L) Y
<script language='javascript'>
* z* W; n+ V1 carr = new array();
7 ^0 l$ q5 l  D' u1 Z  O5 E7 w' ?<%  int temp=0;; O* p3 A% t0 f0 {8 l; v
while(rs.next())$ I  K, p2 W7 J& L! f  u2 J* P
{
* [% H2 F$ \8 I%>2 a3 V+ t1 b# q& F  u! [1 Z
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
6 s0 H; a, F6 O) i% X4 y4 r<%
2 F9 a9 c1 z9 x  C" ]) ^temp = temp + 1;5 w' s& J0 f+ C
}2 U& c  p- U6 U5 k
%>
& \+ U5 G2 u) {0 J9 |; M$ ^/ \temp=<%=temp%>;1 i$ U  r4 J/ S! f, t" _) ^. Y; H1 M
function changelocation(id){
% Q/ i  G% R% S1 R' T% Q6 k& W  pdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 5 w8 H" {  x, N$ r
var i = 0;
) C* x. n) g2 w1 Jdocument.combo_box.city.options[0]=new option('-------',''); . N/ k8 \- q" h0 p
for(i=0;i<temp;i++){ * t) J/ |5 G& o1 a5 Y1 C1 \4 G4 l
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
  v# F% G! I0 M3 F2 B2 N2 t  V  tdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
2 d: B: h8 ^- V8 [' r} 9 S" V& ^9 Z5 K  e7 L6 D3 g
}
. ~# n7 S/ z) f) _, ~# r1 ^: A} 9 }; M6 X1 V4 e4 b0 \, n. f
</script>
2 s5 c, ]4 |* Z) [6 O7 M8 e1 e1 v& B/ k
<form name="combo_box">
$ z* L; @9 s* F( v7 ?& Q0 S( I<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
$ k( r" v) \& X: |- A' z  <tr height="24">
3 A, M8 M) w/ Q) K$ _) C6 f, f; o <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
- K. H5 e0 ^' Y* r7 B) B <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>
3 `: ?* Q0 S0 D& a* z <td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>2 c0 m- t  _. `% c" |
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>: H2 Z& m# w8 D
  </tr>7 a" t& J/ j. v) f, u0 n
  <tr>
+ S% v6 H. h# S7 l9 m9 ^ <td>3 e1 L) I, H2 N9 h) M0 B
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
) l9 O" E5 Y( ?; M# ^  <option value="0">请选择部门 ---></option>
0 x) c& Z7 Y1 O) [) v<%
5 ?1 B4 P* Q0 s5 ]: a string sqld="select * from tdept";9 e: w  p+ n/ t9 S
stmt=conn.createstatement();3 `9 y- C2 y: _; c8 v+ R* w
rs=stmt.executequery(sqld);  A/ U" l9 V* Q, k2 p6 O
while(rs.next())
5 \4 n, G1 o/ f# m  B) B{) O1 I0 B1 ~" u! ]5 F& W$ F4 w) Y  |9 o1 l
%>
& |4 z" {. b0 y2 V+ |+ N  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>3 p) b& i/ y, x& c  g* p+ q: d
<%2 a3 ?1 j7 |; v% [  a0 k8 w
}
# A, \4 p* W( d6 X! Y5 u" B%> . i# \! f: H+ [6 D+ b
  </select>( ^! A0 K9 A3 X1 s
</td>
+ d4 I$ F* M4 ~" K <td>9 ~, K9 U7 ]8 p& Z
  <select multiple id=city style="width:150;height:200" class="bgc">
1 h8 M4 X( e* V& n( H" N! \  </select>
+ g  e& C* X6 Y# c8 C</td>
  ]  h2 X* g- U8 x  [5 b* { <td nowrap align="center" class="bgc">( g1 s  `4 J  ?$ V: F7 o
  <input type="button"  value="<<" class="buttons">9 }) ]2 s% Q  A6 t8 f! S# P
  <input type="button"  value=">>" class="buttons">( B# d) N  s) @( E
</td>2 |/ q' H+ c( H/ C7 N
<td>& q4 C& Q  \: Z- x! x2 d
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
& i) T& I) _4 s- k  </select>* {/ `, y, v2 E+ h
</td>6 r4 u/ t7 T& q* N
  </tr>
* l4 Y9 c5 P* R. L- n <tr class="bgc"> % J! \2 Y2 T5 S) P8 I* U
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>  H4 Y3 h: p: W9 g  U! H
  </tr>8 ]. q$ Q% D# h2 D9 z! q/ C
</table>9 U9 R9 u8 R4 E; v
</form>
5 g2 `8 H6 P# S4 Y8 [0 U0 S% g2 d: c<script language="javascript">
- l) R$ l6 ]" O% H. F//人名移动
2 b# W6 n. x7 q' O# q' x% h1 Tfunction move(fbox, tbox) {
2 z/ d: M( v; a7 K" Xvar arrfbox = new array();* j. p* C0 ?& F$ B
var arrtbox = new array();1 n! Y# m$ o8 w8 e: s
var arrlookup = new array();0 T; W. j5 i, U6 v8 T: l; S2 `
var i;$ R, n" W' w/ ~* B" ~' U* ^2 n
for (i = 0; i < tbox.options.length; i++) {
: i* a. s  D9 |$ e! h' Parrlookup[tbox.options.text] = tbox.options.value;
! K9 o6 ]$ T$ {4 ^- B2 V$ {+ uarrtbox = tbox.options.text;
! o% k+ u" x4 [" m}. I# n5 q! J1 D
var flength = 0;9 e1 U. X" r5 J. A+ L
var tlength = arrtbox.length;. c  R) V$ Q0 Y/ [7 {
for(i = 0; i < fbox.options.length; i++) {2 g! ~4 p- o& F
arrlookup[fbox.options.text] = fbox.options.value;
& v! _8 |) g8 m. d' uif (fbox.options.selected && fbox.options.value != "") {2 J. d: L/ e) F
arrtbox[tlength] = fbox.options.text;
: W5 v3 o# M- z: ctlength++;) g+ X) i" ^/ m$ d0 o- w
}5 ]+ g( g3 z$ T( j0 x, z
else {0 J0 D( A- h0 i; I3 i  o* @/ k5 \
arrfbox[flength] = fbox.options.text;3 I. s5 o' W4 [; U* Y
flength++;
9 [' e0 Y! f) c$ Q. ~ }
  R/ l. {; \8 V' U5 V# H}' O1 X5 @( h5 g. A) Y) z
arrfbox.sort();8 S  W" f' h5 }/ P  i
arrtbox.sort();$ B. M3 f/ |7 ~

9 ~+ i+ f& r: j! T3 a3 O. vfbox.length = 0;
1 M' ]+ x4 X3 K" b2 Ptbox.length = 0;! V. |8 l, G9 \( ]+ ^9 C( ^
var c;: q- a3 n1 W0 {; d
for(c = 0; c < arrfbox.length; c++) {
6 Q+ Z4 u/ K1 U. u5 Nvar no = new option();
$ Q* l% t9 {8 d; {; Q$ ^+ {no.value = arrlookup[arrfbox[c]];
: {& T9 \/ m8 g4 y; D+ B- A; W9 o, O4 Ano.text = arrfbox[c];- x% X9 o# R8 g, _# B+ F# r
fbox[c] = no;/ ?0 c- ]+ V/ a$ H" K/ _0 D
}- q2 c/ s7 A* s- n8 K9 G$ [
for(c = 0; c < arrtbox.length; c++) {
' l" `; \- `* G0 Q7 b# @, kvar no = new option();/ W- q: E9 b  z. o& r
no.value = arrlookup[arrtbox[c]];
' ^8 }% i# |  Lno.text = arrtbox[c];
! T6 y) N8 D. D1 y$ F% [' K. f" @tbox[c] = no;$ P( }# }! y5 }
}
5 b4 p, c' P( {}9 I; U9 u3 M7 O7 c9 I6 a. _
</script>
6 Y  V" E9 L1 ]# p+ T4 e) k</body>

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

返回列表

jsp+javascript打造级连菜单

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

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