jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"; N4 P8 Q  @. m- `) t
      c pageencoding="gb2312"
%>& T' W4 y1 a, V, O1 F
<style>! @# p/ K( {3 K$ Y! x: ?
.f9{ font-size:9pt; }! k5 b. F; Y% l3 L3 B; }
.bgc{ background-color:#aecaf9; color: #0033ff }0 N7 I& ^3 ~6 w, J; G3 T+ n
.buttons{font-family:arial; font-size:13px; font-weight:bold; background-color:#6796e4; color:white; border-top: solid 2px #aacafb;/ l" b! c' b- }4 P
  border-bottom: solid 1px #4e7dc1;6 X# z2 c0 _' h9 z1 g
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;
  padding:1px;
  margin:0px;}
</style>$ Q0 m9 ~3 D/ U+ S- O
<script language="javascript">, @6 G# B) }. W3 X$ E

1 |6 K  O, |# a" @# Z/ _' }0 P</script>
1 m. A; Q/ Z  L3 N4 U<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
' \0 W7 O: r4 M# _; F<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
. d" \  [1 s( m4 d! _6 J<%6 W) \3 w/ ]+ I
  cdatasource ds=new cdatasource();  //数据联结bean实例
3 F/ M1 j& N5 s, w1 u  java.sql.connection conn=ds.getconnection();9 G: A8 \  g, L% y' y& C" K
  java.sql.statement stmt=null;% N* P3 |; K+ H; c( N7 k$ W) y
  java.sql.resultset rs=null;
  ]" W3 s4 e" n# x  cdatacheck dc=new cdatacheck();
) |; i6 |& q& C. `3 Z* C%>- j7 w  H/ ~0 x8 n- j! r- R
<%$ h' I6 w6 q  H% \, X+ K) }3 M( }! K
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";
& i1 {4 W* ^/ ~stmt=conn.createstatement();
, ?7 w0 L$ U) w; w9 Y/ Y. Urs=stmt.executequery(sqlu);
9 e) {; N5 [2 R6 v% J- K0 b) Z%>6 y% Y  z+ x7 X/ |8 V4 l) `
<script language='javascript'>
7 ]4 H; Q6 V! _arr = new array();" T9 Z- y; e% M- @( _
<%  int temp=0;: g! Z: G$ i3 E9 i
while(rs.next()), [& @$ l8 g5 x- R: }8 }5 T
{5 i* F: d: c. O( o% c& m
%>0 a  V3 q* g0 E! J
arr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");- R# y9 l  U# {) Z. A- @
<%
' ^9 R( Y3 z2 n7 |temp = temp + 1;
/ n: Q8 ]! E/ x! j}
1 t% K& a9 S0 m* C( C' n%>
& s& c6 g/ n3 [$ u" `. Qtemp=<%=temp%>;
- ^( g, n/ g8 kfunction changelocation(id){
/ _8 G2 W) }: Qdocument.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 + T- b3 R3 e( z# |: [1 L
var i = 0; ( q1 f% A7 @# J) b1 B
document.combo_box.city.options[0]=new option('-------',''); + u% {1 v1 y# x; _
for(i=0;i<temp;i++){
2 N- d1 L4 H7 W/ Bif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
# ~1 g0 w; ?# Vdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
* b- w& ?, `8 c4 X} : s6 E4 Y1 b1 G& U- @% `0 D
}
! }4 @0 p! t7 k' r& c" ~9 q}
# ^3 ~6 S* {2 \: q* h, T5 s</script>2 T) ~3 Y) ]" y

! _% D3 u/ y4 |: F0 F# q8 Y<form name="combo_box">3 E# m' L, F% F6 R5 [4 B
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">3 ~0 B3 X7 c9 o/ h4 K. d6 y
  <tr height="24"># A. N* H+ n" `7 L8 q
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>) j0 ?  Y' x- ~# Q4 u6 a
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>! B' }! i) S9 M7 u& B7 G! x
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>, S. k0 p! K4 n
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
/ ]# I+ [" l' G& v) B5 S  </tr>% q& O8 k+ s4 E; p5 B
  <tr>
& x; R( ]& _+ ]* P: ^2 P6 o <td>+ B) G6 L( K. I4 c; J
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">
4 K. d0 Z' r7 l  n$ |  <option value="0">请选择部门 ---></option>4 R4 B% A: l! I9 }$ R
<%
) ?( c  ^3 Z( \' r: x1 ] string sqld="select * from tdept";0 I9 ?7 R5 x6 R: v9 w/ H
stmt=conn.createstatement();
. P5 L/ T4 }# s) b% Vrs=stmt.executequery(sqld);' L9 q9 D: G- e. L8 m, Q% E
while(rs.next())
3 s8 E* u! O7 l1 l& @$ h9 G{2 M9 ?, z$ J6 X* }+ j9 o
%>8 G9 p7 A/ L; p& k
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>
9 o. H- j3 Z3 @+ T/ w8 b! I<%6 u9 @( U% N0 H
}2 ]& m7 x9 l4 X: t$ G7 ?7 T0 d2 H3 b
%> 3 z9 d2 p5 K5 d8 q" p
  </select>1 q; ~* E9 K3 r8 C2 o8 l
</td>
/ z% T- W+ t+ ?) \% C& a <td>
# J5 L5 J  E8 M  <select multiple id=city style="width:150;height:200" class="bgc">0 y4 j" n( p% z; c5 \+ C
  </select>
2 o% D* U9 {; Q/ U0 q; O8 o$ m* |3 Y</td>
6 r' I) U2 U  _& e2 U9 y' V <td nowrap align="center" class="bgc">$ [8 P" A/ v* l/ M6 c% y  p8 K
  <input type="button"  value="<<" class="buttons">( ]. ~( K# w% H" l+ a0 n
  <input type="button"  value=">>" class="buttons">3 o/ ~% D8 a: [9 D6 r' `% I9 K& V" [
</td>
- U* `$ P' I8 C* `4 k- f <td>
9 H5 m9 q7 W8 o! Q$ e  s$ W) Y" j  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">
; l; B6 F1 G; T. R& _7 Y  </select>
' G8 J, O' l! o+ Z' g/ r7 I7 r</td>+ J& k" N/ O- \; v& o
  </tr>
, c& ?  m# d- C, c- x/ ^1 D* b <tr class="bgc"> / Y3 e& f8 y9 i1 R6 q" S# M- k8 u- l: l
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>+ w9 O( f/ N( M7 {$ C* Q8 x
  </tr>' ?; G9 ^5 c) |: J$ `( w. |
</table>
: A: W% d0 q9 |  ^& W4 x! B</form>* R" N$ M+ x7 f7 g2 c
<script language="javascript">
8 m! g6 d2 w" v5 F# D6 |/ b//人名移动
% B, n- e! q7 X7 @8 i$ Yfunction move(fbox, tbox) {4 T3 M- D/ ]5 w8 _
var arrfbox = new array();: u6 q4 _, H% e
var arrtbox = new array();6 P. A3 c% y' |
var arrlookup = new array();
3 j+ D& j0 ~- v. uvar i;6 z* c5 [- ~7 g+ ~3 w8 a  g
for (i = 0; i < tbox.options.length; i++) {
# S1 ^! p" \! V9 narrlookup[tbox.options.text] = tbox.options.value;+ a: ?% I) j, k; ^$ d
arrtbox = tbox.options.text;
$ }& B1 n4 d! v: e}
& U' f3 K* m& x) ?8 m+ v2 Fvar flength = 0;
4 o4 l* G  O8 Z( f; X6 E0 Svar tlength = arrtbox.length;* h) r: t! m3 B0 u
for(i = 0; i < fbox.options.length; i++) {3 H' p0 R( A1 G+ @- z0 @0 N
arrlookup[fbox.options.text] = fbox.options.value;7 P0 P  K5 O* E* P. v
if (fbox.options.selected && fbox.options.value != "") {: k1 U: P  O' y7 x
arrtbox[tlength] = fbox.options.text;/ Q' a' k+ ~& k6 U
tlength++;
- b9 Y5 \% F) }# H5 ^5 n: {}
7 R  @  g& m/ s  V  u( j; Ielse {$ T$ `9 u9 Z+ ~8 V9 h
arrfbox[flength] = fbox.options.text;" ^# H& ]7 \& w0 t
flength++;
: ^# R) i! M/ n2 k }
6 u, n1 P+ g6 i! {" c* e5 z}
$ |! l8 I5 B( R5 Rarrfbox.sort();6 R7 ], a$ R& ?/ ^4 s- Q4 ?- \) l, R! R
arrtbox.sort();" R) j& x# ]$ U0 \* m# j
- d* s$ n; X, {- W: p4 h2 z+ e6 P  o
fbox.length = 0;2 c2 U7 v+ m1 z$ P! [# K
tbox.length = 0;+ O3 K$ R1 `$ x) g. J
var c;
2 t7 Q  ~5 |# W6 ?3 R7 mfor(c = 0; c < arrfbox.length; c++) {1 i+ w5 s/ O: H( ^4 i, c7 K" ?
var no = new option();
3 O+ I9 E: E  Hno.value = arrlookup[arrfbox[c]];
7 M3 G) W' r) u- Sno.text = arrfbox[c];
9 N! B2 C" p7 [! L5 b5 O  z/ Hfbox[c] = no;
1 R6 y; v; D$ D}6 W) d8 D" \7 o% Z$ k$ o* J" Y
for(c = 0; c < arrtbox.length; c++) {1 W8 \* y8 a3 t7 s/ K5 e0 E  R
var no = new option();
. ?* O4 o& P' k7 L  _, tno.value = arrlookup[arrtbox[c]];' q( ]' g6 r) O
no.text = arrtbox[c];- T& ^/ E2 @5 H7 k
tbox[c] = no;7 d2 [$ ^% g4 L2 P
}  Q" P. d+ M) E6 H
}
7 h: q4 ~) ~4 X" t5 f5 c9 F</script>6 M6 ^. M' {4 b2 I0 Z" s. k+ P& j( L. I
</body>) U, I" u1 _$ j9 p7 @7 X" W

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

返回列表

jsp+javascript打造级连菜单

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

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