用jquery+CSS实现左右选择框效果

效果如下:

 

代码:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml" >
3. <head>
4.     <title>无标题页</title>
6.     <script src="../Js/jquery.js" type="text/javascript"></script>
7.     <script type="text/javascript">
8.         $(function(){
9.   $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
10.             $("#waitPerson").dblclick(function(){
11.                 $("#waitPerson option:selected").clone().appendTo("#alreadPerson");
12.                 $("#waitPerson option:selected").remove();
13.                 $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
14.             });
15.             
16.              $("#alreadPerson").dblclick(function(){
17.                 $("#alreadPerson option:selected").clone().appendTo("#waitPerson");
18.                 $("#alreadPerson option:selected").remove();
19.                 $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
20.             });
21.             
22.              $("#moveToRight").click(function(){
23.                 $("#waitPerson option:selected").clone().appendTo("#alreadPerson");
24.                 $("#waitPerson option:selected").remove();
25.                 $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
26.             });
28.             $("#moveToLeft").click(function(){
29.                 $("#alreadPerson option:selected").clone().appendTo("#waitPerson");
30.                 $("#alreadPerson option:selected").remove();
31.                 $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
32.             });
33.             
34.             $("#AllToLeft").click(function(){
35.                 $("#alreadPerson option").clone().appendTo("#waitPerson");
36.                 $("#alreadPerson option").remove();
37.                 $("#alreadPerson option:first,#waitPerson option:first").attr("selected",true);
38.             });
39.             
40.             $("#AllToRight").click(function(){
41.                 $("#waitPerson option").clone().appendTo("#alreadPerson");
42.                 $("#waitPerson option").remove();
43.                 $("#waitPerson option:first,#alreadPerson option:first").attr("selected",true);
44.             });
45.         });
46.     </script> 
48.     <style type="text/css">
49.         body
50.         {
51.             margin:0px;
52.             padding:0px;
53.             font-size:12px; 
54.         }
55.         #left
56.         {
57.             width:30%;
58.             float:left;
59.         }
60.         #moveToRight
61.         {
62.             width: 118px;
63.             display:block;
64.         }
65.         #moveToLeft
66.         {
67.             width: 119px;
68.             display:block;
69.         }
70.         #right
71.         {     
72.             width:36%;      
73.             float:left;
74.         }
75.         
76.         #btns
77.         {
78.             float:left;
79.             width: 30%;
80.             margin:5px;
81.         }
82.         
83.         #container
84.         {           
85.             width:500px;    
86.         }
87.         #waitPerson
88.         {
89.             height: 165px;
90.             width:100%px;
91.         }
92.         #alreadPerson
93.         {
94.             height: 171px;
95.             width:100px;
96.         }
97.         
98.         h4
99.         {
100.             height:25px;
101.             text-align:center;
102.             background-color:#F6F6F6    
103.         }
104.         
105.         div
106.         {
107.             border:1px solid #CCCCCC;
108.         }
109.         
110.         span
111.         {
112.             display:block;  
113.             font-size:13px;
114.             font-weight:bold;
115.             text-align:center;
116.             height:25px;
117.             line-height:25px;
118.             border:1px solid #CCCCCC;
119.             background-color:#F6F6F6    
120.         }
121.     </style>
123. </head>
124. <body>
125.    <div id="container">
126.         <div>
127.             <span>人员选择</span>
128.             <div id="left">
129.                 <span>左边项</span>
130.                 <select id="waitPerson" multiple="multiple">
131.                     <option>人员一</option>
132.                     <option>人员二</option>
133.                     <option>人员三</option>
134.                 </select>
135.             </div>
136.             <div id="btns" style="border:none">
137.                 <input id="moveToRight" type="button" value="向右移动" />
138.                 <input id="moveToLeft" type="button" value="向左移动" />
139.                 <input id="AllToRight" type="button" value="全部向右移动" />
140.                 <input id="AllToLeft" type="button" value="全部向左移动" />
141.             </div>
142.             <div id="right">
143.                 <span>右边项</span>
144.                 <select id="alreadPerson" multiple="multiple">
145.                     <option>人员四</option>
146.                     <option>人员五</option>
147.                     <option>人员六</option>
148.                 </select>
149.             </div>
150.         </div>
151.      </div>
152. </body>
153. </html>