jsp+javascript打造级连菜单

JSP

<%@ page import="java.util.date,yava.fileapp.*,java.sql.*;"
      c pageencoding="gb2312"
%># ]! A5 }& q, ]- P/ Q5 I, E6 e& B
<style>
.f9{ font-size:9pt; }+ ^9 C7 h8 A6 k$ m& u
.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;4 i* [* `" h# Y5 v( C0 a& T
  border-bottom: solid 1px #4e7dc1;
  border-left: solid 1px #aecaf9;
  border-right: solid 1px #5679bd;. @* V8 l: V! A3 N% h
  padding:1px;
  margin:0px;}
</style>
<script language="javascript">
: \$ }5 q4 S& p+ R
</script>. ?3 `( D  F# y2 i3 q
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">2 S" H0 p- E2 P
<jsp:usebean id="user" scope="session" class="yava.fileapp.userbean" />
9 P& H: y4 [) s' i. _<%) S% C  C, {9 ]) E( |
  cdatasource ds=new cdatasource();  //数据联结bean实例& _! O' g8 w# b8 \# Z+ e
  java.sql.connection conn=ds.getconnection();
  g: c8 r# y5 C& M% @1 s6 A4 n  java.sql.statement stmt=null;. Z/ Y" W( G" S0 U2 s0 q1 K3 @
  java.sql.resultset rs=null;; C4 V- h' A% _/ z1 o- Q, s1 R
  cdatacheck dc=new cdatacheck();* b/ k4 _$ b; A
%>
2 W' E; e& T: C! {+ I4 N. K6 \<%
+ j* o$ o6 I5 @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";' w$ R3 ?3 N3 Z  J8 J! ~, \
stmt=conn.createstatement();# G# c7 l4 r4 f  h
rs=stmt.executequery(sqlu);
  e' f) k7 Z% B- x* E6 K%>
% ~6 J; N$ q' m2 Q4 S: `+ \  B8 P<script language='javascript'>
( W4 a! {/ u+ O+ `- Tarr = new array();+ K6 x9 \* k, h' p! t$ J
<%  int temp=0;
' s# J$ o& l9 ^- g7 L9 W4 Nwhile(rs.next())
" R+ \, D. t7 w) @{7 I) j% |  Q) d8 q! i* _
%>
9 L3 J4 r& [: B+ R. Uarr[<%=temp%>]=new array("<%=rs.getstring("fname")%>","<%=rs.getstring("fdept")%>");- V% s  Y) A% h! ]) A* S
<%6 g9 R, V/ t7 t# ~5 \- X
temp = temp + 1;
# r2 @3 l) i/ v  r4 ]0 K}
$ |, b* f$ K$ j* \0 P%>
+ u& c8 o6 I8 g* z* R9 Q& B' G& \temp=<%=temp%>;1 n6 p$ ]* f4 ?/ \  V
function changelocation(id){ % }+ I) ~! J) `" @
document.combo_box.city.length=0; //初始化第2级菜单的长度，下标从0开始 & @% }# ?# P6 c7 w) X* n% i' q
var i = 0;
$ p* v9 P; N& i! o! V. d4 O; a$ Idocument.combo_box.city.options[0]=new option('-------',''); 6 _5 ^( e% E6 {; i
for(i=0;i<temp;i++){
' ]0 e) _, }7 l. l, Wif(arr[1]==id){//如果相等，证明在第2级里面有输入第1级组织的子集,arr[总数目][部门]
6 i! j# H  L2 g- Wdocument.combo_box.city.options[document.combo_box.city.length] = new option(arr[0], arr[0]);
6 C) q" o# v3 s}
/ @. @2 j- A' y! v9 ]( s: S} " P. L+ v  S, k4 u4 N& `- S
}
$ D& U0 [" G: {  N, x# t; q; G' U4 h</script>/ Q* h/ y% x& z) m/ h& o5 y$ m+ n0 w
& F6 I, k, i# O4 V; W9 D) k% }0 o
<form name="combo_box">  d( `- I) k1 G7 `
<table border="0" cellspacing="0" cellpadding="0" height="210" width="59">0 {6 T- F' }* c
  <tr height="24">% ]8 w# L2 X* _% W
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>部门选择</font></td>
3 a  s/ `2 S5 o' ^ <td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>人名选择</font></td>- [2 s3 z. |; e% S/ S
<td bgcolor="#336699" class="buttons" align=center nowrap><font color=#ffffff>添加/移除</font></td>2 Q8 D8 z3 L& S$ h; q- ~
<td bgcolor="#336699" class="buttons" align=center><font color=#ffffff>最终人</font></td>
; `* V, r* U# H1 |5 C  </tr>5 n' b; G& T# x4 g' ~
  <tr>
1 s9 f$ f/ x% F/ S& b1 O# y, I <td>" g2 v& M$ i8 K$ S" f0 S8 a
  <select multiple id=prov name="prov" style="width:150;height:200" class="bgc">  w9 ^* s- N6 e# [
  <option value="0">请选择部门 ---></option>5 Y8 X7 D7 Q& c
<%  o. ~3 G, F/ `8 n9 `& }- {
string sqld="select * from tdept";
/ N3 ^1 g, {9 m$ B. r5 R$ v" B' Xstmt=conn.createstatement();4 y: @  E# a4 L; h: g) C/ n
rs=stmt.executequery(sqld);# b8 F% P% x2 k! ~
while(rs.next())+ ]8 ^  ?4 N( \! Y
{
- ?) ]4 K2 M; y%>4 T; P2 R+ G: Y/ C& y
  <option name="<%=rs.getstring("fno")%>"><%=rs.getstring("fname")%></option>  [6 u/ S/ ?( z% I3 a3 H: Q) ]5 E2 u7 L
<%
# k( _, Y  D$ B* j; H8 v/ R}
) r' V* `7 Q4 N8 o4 O8 N$ g  w%> 1 E9 k; E& W6 g/ K
  </select>
1 B& r9 K+ w6 b' `- J- ^3 k</td>3 t+ ~, M- N, S
<td>
. S- P2 I4 S% X+ ]  <select multiple id=city style="width:150;height:200" class="bgc">
9 A+ G: G! U. l) D. Z. L( m: A  T  </select>7 v0 f' v5 k1 d* e- [) S
</td>
: O+ N9 E& n) G <td nowrap align="center" class="bgc">3 ]" f3 ]# {' Z, C
  <input type="button"  value="<<" class="buttons">
5 n0 j! ^4 f& r. W/ d% |* K: q. F% r; G  <input type="button"  value=">>" class="buttons">
: L* K9 H( N) N) l6 x" I</td>8 b7 b, C" z6 M' O9 E
<td>% R. f* e) E; v4 l
  <select multiple size="10" name="list2" style="width:150;height:200" class="bgc">4 X$ X2 ?6 @4 g  i8 C: K) f
  </select>2 h$ V9 s' D+ y
</td>
* [+ V0 y. {' }* W- n3 `0 C7 l7 g( X4 b  </tr>& p8 s" K. e, ^% c8 [# E' v
<tr class="bgc"> ! s, B4 Z# Q! F- H
<td colspan="4" align="center"><input type="button" name="button1" class="buttons" value="选好了！" ></td>6 Z8 H# ~0 J; Q* i/ }. f7 L
  </tr>
5 M# u5 X! X% a; ^</table>
6 a5 h& ~/ ~" U3 H) g' C8 p</form>/ W6 X' G* ?( B+ w3 K
<script language="javascript">. l' V. g6 a4 m4 M9 Z/ v
//人名移动
* @. I1 X( o- p% N- C6 J8 `6 L" sfunction move(fbox, tbox) {* y( P' F* D% C: m$ D6 I- _
var arrfbox = new array();
+ w: y# A. R. Y% I2 p* t# q2 J* Uvar arrtbox = new array();
* ~( z4 X5 A7 K- ~var arrlookup = new array();
1 C  q0 c+ k0 |: w; R7 C, Wvar i;; i) z$ L1 I; I: ]2 H7 O9 D: o
for (i = 0; i < tbox.options.length; i++) {- R; p1 W1 ~6 f, R
arrlookup[tbox.options.text] = tbox.options.value;  G# q* l) q5 x! p
arrtbox = tbox.options.text;
5 [6 @3 `1 ]1 ?$ T* \}
. m! Y" i1 Q! M* |( kvar flength = 0;: J5 r  b6 o1 P) U
var tlength = arrtbox.length;
& D2 E- j4 x/ \9 ]! T5 @5 Q: I* D3 mfor(i = 0; i < fbox.options.length; i++) {
8 y3 H: W) C. k6 o; K; o6 Garrlookup[fbox.options.text] = fbox.options.value;( M/ r& O: ?$ I; K
if (fbox.options.selected && fbox.options.value != "") {
$ [# C% G6 `1 G+ e! ~arrtbox[tlength] = fbox.options.text;8 Z' d2 f% Y9 i9 B* N
tlength++;$ l- Y7 k0 Q5 q  u4 g! ~$ a
}) L0 |9 p: ?! L3 C7 y9 T% m
else {% t& C3 c6 x; R# \* i+ _
arrfbox[flength] = fbox.options.text;( D: j" p0 d, v. i
flength++;
" k7 I, P, D/ t }4 \! k5 E. B3 T" g9 L
}
' v% _& _$ ~1 O  C' ~arrfbox.sort();
6 k3 E5 F+ K9 K0 @; g: x6 ~3 Aarrtbox.sort();; l* D0 h; L7 A# t: N2 ^" o

5 B+ h0 F  Z; M+ {: Q9 g, P4 S6 Ofbox.length = 0;* a3 ?! [5 V" e9 E. z& X# d8 L# ]% t
tbox.length = 0;
% |6 T; e/ O3 T+ u. p, ~var c;
0 ]. h9 G7 F" V: O! m& efor(c = 0; c < arrfbox.length; c++) {9 a8 |  ~/ h& W5 @8 K/ a5 F* g
var no = new option();
0 A$ s( r& i5 z# pno.value = arrlookup[arrfbox[c]];% S) \) `, h! F
no.text = arrfbox[c];  _; J) ]; Z7 V# k$ w/ A* J: k
fbox[c] = no;2 G) U! `. K& M, ^7 x- v' ^
}$ B% t6 W6 N! [% ?3 w7 M6 _
for(c = 0; c < arrtbox.length; c++) {
2 t+ |; L3 v$ P0 U) }, n4 q; ]! Evar no = new option();+ N, T3 Q1 I2 ~) A# j1 ~8 O
no.value = arrlookup[arrtbox[c]];
1 c$ ^" ]5 E& N' Qno.text = arrtbox[c];7 d; K  t) }" t7 y' b
tbox[c] = no;- I8 g- Y0 Y3 a' F; z6 j
}
, R% O1 B: E+ k5 W$ k}
5 X. Q/ k; }/ Y9 d+ u) F  g! F</script>$ Y3 [/ f& U# i# T$ ]. ]
</body># [: `  a; Y7 V6 u! x

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

返回列表

jsp+javascript打造级连菜单

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

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