jQuery两个列表中元素相互交换Demo

简介:

效果如图:

 

复制代码
  1 <html>
  2 <head>
  3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4 <title>无标题文档</title>
  5 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  6 <style type="text/css">
  7 <!--
  8 BODY
  9 {
 10     font-family:"Courier";
 11     font-size: 12px;
 12     margin:0px 0px 0px 0px;
 13     overflow-x:no;
 14     overflow-y:no;
 15     background-color: #B8D3F4;
 16 }
 17 td
 18 {
 19     font-size:12px;
 20 }
 21 .default_input
 22 {
 23     border:1px solid #666666;
 24     height:18px;
 25     font-size:12px;
 26 }
 27 .default_input2
 28 {
 29     border:1px solid #666666;
 30     height:18px;
 31     font-size:12px;
 32 }
 33 .nowrite_input
 34 {
 35     border:1px solid #849EB5;
 36     height:18px;
 37     font-size:12px;
 38     background-color:#EBEAE7;
 39     color: #9E9A9E;
 40 }
 41 .default_list
 42 {
 43     font-size:12px;
 44   border:1px solid #849EB5;
 45 }
 46 .default_textarea
 47 {
 48     font-size:12px;
 49     border:1px solid #849EB5;
 50 }
 51 
 52 .nowrite_textarea
 53 {
 54     border:1px solid #849EB5;
 55     font-size:12px;
 56     background-color:#EBEAE7;
 57     color: #9E9A9E;
 58 }
 59 
 60 .wordtd5 {
 61     font-size: 12px;
 62     text-align: center;
 63     vertical-align:top;
 64     padding-top: 6px;
 65     padding-right: 5px;
 66     padding-bottom: 3px;
 67     padding-left: 5px;
 68     background-color: #b8c4f4;
 69 }
 70 
 71 .wordtd {
 72     font-size: 12px;
 73     text-align: left;
 74     vertical-align:top;
 75     padding-top: 6px;
 76     padding-right: 5px;
 77     padding-bottom: 3px;
 78     padding-left: 5px;
 79     background-color: #b8c4f4;
 80 }
 81 .wordtd_1 {
 82     font-size: 12px;
 83     vertical-align:top;
 84     padding-top: 6px;
 85     padding-right: 5px;
 86     padding-bottom: 3px;
 87     padding-left: 5px;
 88     background-color: #516CD6;
 89     color:#fff;
 90 }
 91 .wordtd_2{
 92     font-size: 12px;
 93     text-align: right;
 94     vertical-align:top;
 95     padding-top: 6px;
 96     padding-right: 5px;
 97     padding-bottom: 3px;
 98     padding-left: 5px;
 99     background-color: #64BDF9;
100 }
101 .wordtd_3{
102     font-size: 12px;
103     text-align: right;
104     vertical-align:top;
105     padding-top: 6px;
106     padding-right: 5px;
107     padding-bottom: 3px;
108     padding-left: 5px;
109     background-color: #F1DD34;
110 }
111 .inputtd
112 {
113     font-size:12px;
114     vertical-align:top;
115     padding-top: 3px;
116     padding-right: 3px;
117     padding-bottom: 3px;
118     padding-left: 3px;
119 }
120 .inputtd2
121 {
122     text-align: center;
123     font-size:12px;
124     vertical-align:top;
125     padding-top: 3px;
126     padding-right: 3px;
127     padding-bottom: 3px;
128     padding-left: 3px;
129 }
130 .tablebg
131 {
132     font-size:12px;
133 }
134 
135 .tb{
136     border-collapse: collapse;
137     border: 1px outset #999999;
138     background-color: #FFFFFF;
139 }
140 .td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
141 .td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
142 .td4{background-color:#F6F6F6;line-height:20px;}
143 .td5{border:#000000 solid;
144        border-right-width:0px;
145        border-left-width:0px;
146        border-top-width:0px;
147        border-bottom-width:1px;}
148 
149 .tb td{
150 font-size: 12px;
151 border: 2px groove #ffffff;
152 }
153 
154 
155 
156 
157 .noborder {
158     border: none;
159 }
160 
161 .button {
162     border: 1px ridge #ffffff;
163     line-height:18px;
164     height: 20px;
165     width: 45px;
166     padding-top: 0px;
167     background:#CBDAF7;
168     color:#000000;
169     font-size: 9pt;
170     font-family:"Courier";
171 } 
172 
173 .textarea {
174     font-family: Arial, Helvetica, sans-serif, "??";
175     font-size: 9pt;
176     color: #000000;
177     border-bottom-width: 1px;
178     border-top-style: none;
179     border-right-style: none;
180     border-bottom-style: solid;
181     border-left-style: none;
182     border-bottom-color: #000000;
183     background-color:transparent;
184     text-align: left
185 }
186 -->
187 </style></head>
188 
189 <body>
190 
191 <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
192 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
193   <tr>
194     <td width="126">
195         <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
196         <select name="first" multiple="multiple" size=10 class="td3" id="first">
197           <option value="选项1">选项1</option>
198           <option value="选项2">选项2</option>
199           <option value="选项3">选项3</option>
200           <option value="选项4">选项4</option>
201           <option value="选项5">选项5</option>
202           <option value="选项6">选项6</option>
203           <option value="选项7">选项7</option>
204           <option value="选项8">选项8</option>
205         </select>    
206     </td>
207     <td width="69" valign="middle">
208        <input name="add"  id="add" type="button" class="button" value="-->" /> 
209        <input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
210        <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
211        <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
212         </td>
213     <td width="127" align="left">
214       <select name="second" size="10" multiple="multiple" class="td3" id="second">
215          <option value="选项9">选项9</option>
216       </select>
217     </td>
218   </tr>
219 </table>
220 </div>
221 </body>
222 <script type="text/javascript">
223        //<input name="add"  id="add" type="button" class="button" value="-->" /> 
224        $("#add").click(function(){
225                $("#first>option:selected").appendTo($("#second"));
226        });
227        
228        //<input name="add_all" id="add_all"  type="button" class="button" value="==>" /> 
229        $("#add_all").click(function(){
230                $("#first>option").appendTo($("#second"));
231        });
232        
233        //<input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
234        $("#remove").click(function(){
235                $("#second>option:selected").appendTo($("#first"));
236        })
237        
238        //<input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
239         $("#remove_all").click(function(){
240                $("#second>option").appendTo($("#first"));
241        });
242         
243         $("#first").dblclick(function(){
244             $("#first>option:selected").appendTo($("#second"));
245         });
246         $("#second").dblclick(function(){
247             $("#second>option:selected").appendTo($("#first"));
248         });
249         
250         
251 </script>
252 </html>
复制代码

 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/5780131.html,如需转载请自行联系原作者

相关文章
|
2月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
20 0
|
1月前
|
JavaScript 前端开发
jquery怎么给循环出来的列表(类似于text框)取值和赋值
jquery怎么给循环出来的列表(类似于text框)取值和赋值
14 0
jquery怎么给循环出来的列表(类似于text框)取值和赋值
|
1月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
12 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
16 0
|
1月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
20 0
|
2月前
|
JavaScript 前端开发
jQuery 第八章(jQuery操作dom元素)
jQuery 第八章(jQuery操作dom元素)
49 0
|
2月前
|
JavaScript 前端开发
jQquery 第七章(jQuery操作dom元素)
jQquery 第七章(jQuery操作dom元素)
32 0
|
2月前
|
JavaScript 容器
【jQuery学习】—jQuery操作元素位置
【jQuery学习】—jQuery操作元素位置
|
3月前
|
JavaScript
jQuery动态增加一行元素和删除一行元素
jQuery动态增加一行元素和删除一行元素
14 0