jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"0 Y) W2 k, x9 @6 Z" `( c
      c pageencoding="gb2312"" d! R+ t3 Z& ~& ~. P$ }# a
%>
<style>
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }9 _" `. m- \0 E+ x0 R
.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;7 X8 a5 `$ b+ t2 v9 q
  border-right: solid 1px #5679bd;# n  i0 D/ ^: T! \; L4 O% _5 A" s
  padding:1px;
  margin:0px;}
</style>
<script language="javascript">) Z  ^3 m8 }$ @) X+ _! D( ?

5 |! Z' n2 [+ R8 c5 ]3 |/ H</script>
8 h0 h, W3 X: T! X6 o7 J% b! D<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
$ @: R4 }. m; C; L$ O<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />$ L7 }! g9 A6 ^8 t+ g
<%
3 p9 w$ z2 M* }8 r' B- E0 Y7 C) u$ p  cdatasource ds=new cdatasource();  //数据联结bean实例: r( P0 s% k) |+ T# O  |1 w& r3 R
  java.sql.connection conn=ds.getconnection();+ n7 H2 e( \, ?0 d3 q/ z! y( {
  java.sql.statement stmt=null;
- t# S/ e9 V+ N2 n. Z( p  java.sql.resultset rs=null;1 A9 E7 r' |# b& [7 b8 q5 l
  cdatacheck dc=new cdatacheck();
, R5 _; x3 Y+ j3 C/ T( ?* o: ?% L8 V%>* }7 u3 ^4 v# v8 s( s5 |2 }
<%
! Y; W$ B  _: ^1 j3 Tstring 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";. i3 ?5 p4 F# I( h  S* e
stmt=conn.createstatement();
) b/ A8 B  B$ Xrs=stmt.executequery(sqlu);0 c/ E' O  A/ ^' m& J8 ]2 {
%>
6 Q1 Z( Z. n2 M3 s+ S<script language='javascript'>
* P9 J9 T: G% }% Karr = new array();
) ?' y1 L. q& |, s3 y3 h<%  int temp=0;
5 K/ k, S. ^. \- k5 J8 awhile(rs.next())
/ [& V7 i. ]1 |; T2 [{6 H/ t/ `( j- l& ~9 m
%>1 }- I" P3 C5 ~1 v  B
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
  t% V2 h& `  a; Q: [% @7 }% A# w<%0 J& A; B3 T8 B! U5 U0 {
temp = temp + 1;
# M" z5 p* z( `1 k: y3 v}
3 f3 ]( U% i5 Q- C) b) C%>, C+ o0 S- `/ l1 s8 r; P
temp=<%=temp%>;7 [4 N$ b$ ^4 j& k" ^
function changelocation(id){ % M2 l0 o  ^& W0 Z
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 # D4 K# T& h# C/ l- y5 V
var i = 0;
8 e) H, P: z% hdocument.combo_box.city.options[0]=new option('-------','');
- \3 ]; [3 F5 d0 v+ f& |1 pfor(i=0;i<temp;i++){ + t3 R7 V) u7 P; j6 t4 F4 Z
if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
" e: a' h$ E5 xdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]); 2 R+ `; d! \$ P8 [6 n" e
}
/ j) X3 e6 s9 F8 {4 x1 N}
9 Q8 ^0 ]+ _& R} $ U9 a2 Z* L1 @* F* I
</script>& j% w! Z- b/ I7 B

- k3 q. t  ?. [. E6 y7 \% R# h<form name="combo_box">
* n' T. W8 ], X- M<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">
9 `6 }: w- S# D5 d# W, I/ I: S  <tr height="24">
! ], }" U1 H: N <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
: @# a0 S* s6 |6 u6 I* [- ? <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>* i& _" I9 F* s0 r' v
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
$ o0 J4 ^& [. v6 w& z6 n  p <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>5 r4 @1 _6 }4 y9 Q) _
  </tr>* j0 `4 u) g+ o+ C9 [4 G2 b) S
  <tr> 1 U' m1 q; V4 N2 y6 I' A/ h
<td>
+ M. x$ I* ^, |$ \3 R9 C  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
! Y9 q1 o' G5 `7 Y  <option value="0">请选择部门 ---></option>8 i  t' T/ {) Q/ g1 b* ^4 n
<%
4 v! Q, w. a9 @* s% N5 w, w) Z/ B string sqld="select * from tdept";) C/ E) O9 @: a. F: e7 L+ p  {
stmt=conn.createstatement();) {4 D0 L( e* R$ m7 L! @( a) ^
rs=stmt.executequery(sqld);
' j6 e8 R9 V4 ~9 A8 L, Lwhile(rs.next())  Q0 W) b3 O' z% G
{
# S- |( ]* B7 v3 l6 b! E%>
- u2 Q5 `4 o$ ~. P) W" l& K  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>/ O- M, }: a) [# D7 i# g3 _
<%, _) ]$ f3 i- L1 ]
}+ o5 g7 b# v# b  R8 g
%> & W% y* Z6 w- ]/ t: Q
  </select>
' J0 c8 T4 a% |8 L</td>
8 o4 z1 g0 F" V& l <td>+ U- u7 D6 p/ F) c4 ?( ^" E
  <select multiple id=city style="width:150;height:200" class="bgc">
* @+ M) k6 C! l: {% R) L; C9 A  </select>
/ ^1 B+ K% Y* c: N$ ]& V5 Q8 o! r$ I</td>1 B; c9 T- X" {1 l! k5 _
<td nowrap align="center" class="bgc">
- L& c) ?' E8 h  O  <input type="button"  value="<<" class="buttons">/ @1 K, ]* w5 E" ^7 a
  <input type="button"  value=">>" class="buttons">
5 z) f  h; I( @. s) }6 G, U</td>2 i3 ]/ V0 M+ W% t' a- W& }
<td>
  `; C9 r( z$ f$ T  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc"># `0 `: v3 x& D% G
  </select>
6 K* p( |* ?: O7 ~</td>
! r; x5 q4 {# e" c0 O  </tr>7 N$ Q+ R5 v/ N4 n# V; s) P  q
<tr class="bgc">
  \; J3 j- U2 r% u; Q <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
8 C$ u3 ]2 h" y0 E3 g1 X# Q* X. j  </tr>& \- X5 m6 m0 u) ~7 [1 \
</table>- G$ Y1 {9 ]9 {3 U5 t
</form>
" h! K8 F. W5 s4 H2 R& J<script language="javascript">
; r, r* O" E$ B3 i6 F$ J9 K//人名移动
" d  c: d7 a# F" _  [  p2 {; |function move(fbox, tbox) {
; D/ B4 S( y8 Y, [& avar arrfbox = new array();; R' Y0 A" R2 w" ]6 ^
var arrtbox = new array();% H6 p  Q% `  Z/ N. c3 `9 C  v" h8 R
var arrlookup = new array();. L9 I9 T/ q' a  c+ y
var i;% W# d; Y/ D$ b* v7 A
for (i = 0; i < tbox.options.length; i++) {0 a( z9 H5 W9 f2 m, }0 R
arrlookup[tbox.options.text] = tbox.options.value;, L, ]8 {- Y0 |0 Q$ ~
arrtbox = tbox.options.text;* A7 o7 g5 e/ h# {. a' S" J
}* `: w0 d* w, i- l
var flength = 0;  x7 U+ \& Y# b+ n( D: _) z3 }) ~
var tlength = arrtbox.length;
4 i5 W" y7 f/ e& x+ yfor(i = 0; i < fbox.options.length; i++) {
) }; N: N3 O4 r6 Marrlookup[fbox.options.text] = fbox.options.value;- _3 |0 t1 N$ w" B2 f
if (fbox.options.selected && fbox.options.value != "") {
$ f6 d4 A  n+ a$ [. a+ U. {& ?arrtbox[tlength] = fbox.options.text;5 d3 U0 v5 }, \
tlength++;
* v4 F* o/ J. O, f. R5 p7 ~+ G" x}
2 z6 Q* q  H& L! B3 ~3 k5 N% K% ?else {) s7 k3 q( m: h: a# E8 `0 I  @
arrfbox[flength] = fbox.options.text;. O1 o9 o% D5 S: c2 o. ~4 Q
flength++;
: `# g; }3 L. q7 H! K. `9 y }
; I) k; b/ i; c8 S, e6 n}
3 W0 @8 D8 v9 p2 y4 Y# |- _arrfbox.sort();9 ~1 o. Y8 D' J) f2 n' ^
arrtbox.sort();
4 W7 J/ Y+ u+ z4 t3 z* [) a/ k5 D  [
6 x/ s) `2 s6 m# I" g4 Kfbox.length = 0;
0 P4 h. a9 t( E$ _* T" _: Rtbox.length = 0;
* T9 R7 _% p7 D4 }1 b" K. b, Tvar c;
0 c! o% n$ T% F: x; Ifor(c = 0; c < arrfbox.length; c++) {
' O7 c+ o, S3 u0 d/ u! O# wvar no = new option();
! x  b, V- c( y" M( V9 d. yno.value = arrlookup[arrfbox[c]];
2 U) H& X% b" Sno.text = arrfbox[c];  g. e6 i7 U- P7 m0 j0 u; E8 m8 X
fbox[c] = no;0 I  T/ I8 p* b/ s4 S# ~$ N7 e8 r
}: r+ V0 Y/ O7 k. P% G4 ?8 l! D
for(c = 0; c < arrtbox.length; c++) {, @: f9 b$ J" J# H  l. m$ F
var no = new option();5 K! Z0 e0 g+ o. y4 F
no.value = arrlookup[arrtbox[c]];5 j! Z1 X5 R( L6 J$ k
no.text = arrtbox[c];
7 y6 V, Z9 a# Y4 Rtbox[c] = no;7 j' ]. X9 Y/ A! L. l7 b
}
2 }' e3 B. E* y4 m0 l* d5 Y7 S7 d}6 C7 \- |. v. [' G( W
</script>" f- b9 Y: l$ f: {
</body>& @, w: K" c4 r) X, W& l+ o: Z* J

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

返回列表

jsp+javascript打造级连菜单

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

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