jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"0 X9 O- Z/ T" o4 B! v
      c pageencoding="gb2312"  a1 L3 y2 `; u' i! Y' m# ]0 D# ]# K+ ?
%>( d+ d% w% O, c! G( f8 x" H5 E
<style>* G3 X9 y! E# X& m
.f9{ font-size:9pt; }
.bgc{ background-color:#aecaf9; color: #0033ff }  ~) F- l; u' o
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;* D6 j# s4 u/ V) ]3 X6 L/ C; H
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;5 C! G; N9 i* w3 r3 _
  border-right: solid 1px #5679bd;$ y1 J3 H1 b' Z  I, r' {
  padding:1px;
  margin:0px;}2 A1 n+ C" [( N- _9 B1 T
</style>; `% D' F. l3 G: G' Q' t
<script language="javascript">

: D. ?( D! l. p% H, t8 `: V</script>' t- z" I" `8 _3 \7 g) j7 y8 Q
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">2 n7 K5 g8 H  u' [. I. E) ]; ?1 S
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />) K# E7 S7 M9 {5 ?' ]
<%
, M" T! [' T" r3 X; f  cdatasource ds=new cdatasource();  //数据联结bean实例
! t, B$ S" S4 b; o0 A) D* s7 t4 F  java.sql.connection conn=ds.getconnection();$ y5 V7 U4 Z8 m6 m
  java.sql.statement stmt=null;# A, u3 c. e; s4 U4 c( d2 s) k
  java.sql.resultset rs=null;
5 u* B! d! n1 N9 ?. w  cdatacheck dc=new cdatacheck();) v. Y9 J  o1 H( _3 P4 W+ k
%>0 z/ I5 Q" W! s7 ?
<%& N- P: X# [/ O
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";6 ~! q3 z. K: x4 P% {8 R
stmt=conn.createstatement();
+ ?* z# [6 h1 B, irs=stmt.executequery(sqlu);
/ q8 v8 Y8 i/ P& q4 f+ D%>- Z! y. F+ c' K/ v. f( J
<script language='javascript'>
* B) [% `. ?6 ^1 s) {, ?/ earr = new array();9 r6 U! e" l$ L7 n7 O% X
<%  int temp=0;% J$ x, x# ?1 V8 d0 Z  C' D3 M
while(rs.next())* x! d. S6 Y0 x* [9 L
{
- Y2 c6 \1 {1 a( X%>* P7 {, i% W5 X2 ]  l0 a$ w
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");
& y7 s4 R+ D" N<%! o' O* Z. i& X
temp = temp + 1;
% A1 Z: y$ u$ }}" ~& H8 t1 J- v7 Y4 v
%>
1 a8 C2 I& X% f$ T& Ytemp=<%=temp%>;9 G+ A! u( V2 `' o* u& Z4 b
function changelocation(id){
$ i, i! V8 t3 Adocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 8 V# E) c9 ^, s3 y3 i
var i = 0;
4 V# z7 ?: b+ B- F3 W  i) @- vdocument.combo_box.city.options[0]=new option('-------',''); 5 Z% B. X% i; j
for(i=0;i<temp;i++){
# ]2 c, n# C0 K6 X( T( {if(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
; c' E6 ]$ h- N8 c5 p' \document.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
4 J0 Q$ `: [3 {3 G; z+ h} " B3 q/ k/ U5 M1 ^. Y1 \3 O0 S1 T
} 9 W# Y* [5 [" Z  g, ~+ Z: g
}
9 e1 ?# y  Z/ Z. k</script>% l) R6 w( `1 _5 Z' L7 O
" E) P" O! w2 i' E' D$ i
<form name="combo_box">
: O% C" q7 m  K0 o! ^1 M6 c<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">9 a9 w$ f% H; E& ~  x
  <tr height="24">
) u. z; y- W0 {% C <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
  ^3 D5 t4 r+ ?" J* m <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>$ W+ J+ R( i4 ~: D( ?6 W8 a% f) ~
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>
  i5 C% p0 z( x; O! E <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>4 m: p# O, S0 k, x
  </tr>7 |. u9 R) n: u) S; Z) `
  <tr>
4 R( H" p7 d- y  I4 _3 k <td>& q' M1 B# w" F. m5 P% f& j2 |7 i
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">! D1 Q" d, g$ e) T* `; c- B
  <option value="0">请选择部门 ---></option>
" S/ a: A8 g+ v' Y! r, H- ?" v<%
8 y( y7 \* ~; Y' @ string sqld="select * from tdept";- l0 ]" b% q. n2 Q- `
stmt=conn.createstatement();4 W* f* o4 j# |& W
rs=stmt.executequery(sqld);
( F2 j/ H6 _$ rwhile(rs.next())
  c: O9 r1 W  V( ^4 O$ r$ k{5 V" C/ J2 r; o
%>* ?6 K: H, r! }$ s# N- ^
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
8 Q( w" W4 |$ w7 u- K7 n<%
" \" v- c' ?/ l* X}7 F& ?7 C4 m9 p5 S
%>
! _! }% O- t% k5 D% E  </select>2 o/ L9 K% _$ Q
</td>, J/ j  a% [4 a$ h7 q
<td>9 ?8 a& j! R, g" Z# u
  <select multiple id=city style="width:150;height:200" class="bgc">8 [1 w% U: n/ f4 X9 S/ Q  w
  </select>
, N4 A- W" x" S</td>
" r) ^0 w/ Z. U. |* s <td nowrap align="center" class="bgc">& I5 c4 Y' P' f
  <input type="button"  value="<<" class="buttons">& b1 A1 a% ^1 T* R
  <input type="button"  value=">>" class="buttons">1 J7 x4 q) Z+ s4 T( Z- ]
</td>& i8 `% a' p& o* C& ?5 {# R6 o, A' G: Y
<td>+ N1 |7 r+ }  @
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc"># B* `: c! a) k; E% Z, n1 J
  </select>; ^8 t' I. E1 w% F% I# q( ]
</td>
2 l1 u4 w5 w- O1 |6 f! A+ x  </tr>
. ^! f7 ?6 j% s, `4 i( W, }$ u <tr class="bgc">
# `1 f: \2 P, j' ?" K2 W <td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>
- n: Y! j7 Y/ U0 H7 u  </tr>
& O3 t3 W- I& e</table>/ C) M! M6 N5 I- D& `9 R1 h
</form>
2 t6 ?* O% Y3 \  @% Y<script language="javascript">0 [& P# u' N( w, i
//人名移动
; W9 _& ^) ^4 ~$ ^6 ^5 ffunction move(fbox, tbox) {
" v6 `: d+ Y3 Z3 S: ?8 |var arrfbox = new array();
/ `* n0 M- m" k( u4 ~var arrtbox = new array();4 l, Z- D- f1 E/ }* M
var arrlookup = new array();+ s; D! z9 @: @3 F9 H$ P
var i;
& b+ P) e3 z- l( h$ n6 _for (i = 0; i < tbox.options.length; i++) {# Q7 G; a) W5 e
arrlookup[tbox.options.text] = tbox.options.value;
" S, ]2 C  t) K4 Oarrtbox = tbox.options.text;
1 a( Q: |% k0 x/ n}
# J' o' e4 c" E, d! N) tvar flength = 0;+ I4 Z7 p: s  P
var tlength = arrtbox.length;) H+ l$ M2 Y. b6 N8 P
for(i = 0; i < fbox.options.length; i++) {- h( @' N" H' y- \; K3 y* c
arrlookup[fbox.options.text] = fbox.options.value;8 r& H% J7 S/ N0 a! l9 o! u& z
if (fbox.options.selected && fbox.options.value != "") {. x) U" S( e1 y8 v: D8 b- z
arrtbox[tlength] = fbox.options.text;. P$ [# ~& c" K8 q* J+ j/ [
tlength++;1 R# W+ a; r1 o
}  o" o1 {, ^- O1 [; P6 j' K! b) C
else {! P$ o: U4 d5 c) S+ [& j' c6 T
arrfbox[flength] = fbox.options.text;/ T, l/ O) C. Y$ E- U, ~4 ]
flength++;
# A7 h' K7 F9 |2 ~7 x. e }
$ A% K3 I$ r/ z2 b}+ ?& Q/ i! H4 q0 \* B; P$ }# F
arrfbox.sort();
% Q3 W4 B: D9 n/ Q2 H. qarrtbox.sort();6 d3 D: [8 q6 {9 u3 c
9 A. e" G8 R5 _0 q, z8 m% x) W
fbox.length = 0;$ G4 N3 L4 K7 F  H: q, U
tbox.length = 0;7 S* }2 B" }& {9 c, K
var c;' i( e" e9 ^/ _) ^6 W3 ]
for(c = 0; c < arrfbox.length; c++) {
/ F2 i3 s1 c4 x0 @var no = new option();* k, N" }* \! {' b% J! g! B
no.value = arrlookup[arrfbox[c]];
* {7 s" l$ C9 S; r6 ]' ]: E" Y! ]no.text = arrfbox[c];( V+ t4 K7 B" s+ s* o
fbox[c] = no;8 k; U# q8 T  q! o$ |
}( ^7 K, ^  X" u( }4 A# G7 H4 }- h9 O
for(c = 0; c < arrtbox.length; c++) {
+ m  U4 N" p. u2 T: \& _# a! Uvar no = new option();4 r2 S, l) v  s2 q  M3 s8 _
no.value = arrlookup[arrtbox[c]];9 E8 ^  {) G& c# ^
no.text = arrtbox[c];4 x. }2 P$ }. q( R; y0 p' ~
tbox[c] = no;
4 m# f1 y! d& q- k }
- z  |1 N3 K5 O+ `4 e}
& Q! ^+ Y' @& b, Q7 a</script>
- ]; h2 ^9 r, ^5 x! x' G+ w, T9 ]</body>
1 d) S" k2 q" v2 ?8 W0 J4 M9 a( O8 |9 @

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

返回列表

jsp+javascript打造级连菜单

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

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