欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery多选框互相内容交换的实例代码

程序员文章站 2022-05-21 15:30:36
代码如下:     无标题页</t...</div> <div class="content"> <p>代码如下:</p> <p class="codebody" id="code63158"><br> <head runat="server"><br>     <title>无标题页</title><br>     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><br>     <script type="text/javascript"><br>         $(document).ready(function(){<br>             // 把选择项追加给对方<br>             $('#add').click(function(){<br>             var options=$('#select1 option:selected');<br>             var remove=options.remove();<br>             remove.appendTo("#select2");<br>             });<br>             // 把所有项追加给对方<br>             $('#addAll').click(function(){<br>             var options=$('#select1 option');<br>             var remove=options.remove();<br>             remove.appendTo("#select2");<br>             });<br>             // 把选择项退回给对方<br>             $('#remove').click(function(){<br>             var options=$('#select2 option:selected');<br>             var remove=options.remove();<br>             remove.appendTo("#select1");<br>             });<br>             // 把全部项退回给对方<br>             $('#removeAll').click(function(){<br>             var options=$('#select2 option');<br>             var remove=options.remove();<br>             remove.appendTo("#select1");<br>             });<br>         });<br>     </script><br> </head><br> <body><br>     <form id="form1" runat="server"><br>     <p id="left"><br>         <select multiple="multiple" id="select1" style="width:100px;height:160px"><br>         <option>选项1</option><br>         <option>选项2</option><br>         <option>选项3</option><br>         <option>选项4</option><br>         <option>选项5</option><br>         </select><br>     </p><br>     <p><br>         <span id="add">选中项添加至右边>></span><br /><br>         <span id="addAll">全部添加到右边>></span><br>     </p><br>     <p id="right"><br>         <select multiple="multiple" id="select2" style="width:100px;height:160px"></select><br>     </p><br>     <p><br>         <span id="remove"><<选中项还原至左边</span><br /><br>         <span id="removeAll"><<全部还原至左边</span><br>     </p><br>     </form><br> </body></p> </div> <div class="info-pre-next"> <p> 上一篇: <a href="/article/1079699.html"> jQuery动态设置form表单的enctype值(实现代码) </a> </p> <p> 下一篇: <a href="/article/1079701.html"> Python开发数据预处理方法 </a> </p> </div> <div class="wz_tuijian"> <p> 推荐阅读 </p> <ul> <li> <a href="/article/2043371.html" target="_blank" title="Jquery多选框互相内容交换的实例代码"> <h2> Jquery多选框互相内容交换的实例代码 </h2> </a> </li> <li> <a href="/article/2039746.html" target="_blank" title="jquery 实现复选框的全选操作实例代码"> <h2> jquery 实现复选框的全选操作实例代码 </h2> </a> </li> <li> <a href="/article/1302164.html" target="_blank" title="jquery 实现复选框的全选操作实例代码"> <h2> jquery 实现复选框的全选操作实例代码 </h2> </a> </li> <li> <a href="/article/1168100.html" target="_blank" title="jQuery扩展方法实现Form表单与Json互相转换的实例代码"> <h2> jQuery扩展方法实现Form表单与Json互相转换的实例代码 </h2> </a> </li> <li> <a href="/article/1079700.html" target="_blank" title="Jquery多选框互相内容交换的实例代码"> <h2> Jquery多选框互相内容交换的实例代码 </h2> </a> </li> <li> <a href="/article/590221.html" target="_blank" title="Jquery多选框互相内容交换的实例代码_jquery"> <h2> Jquery多选框互相内容交换的实例代码_jquery </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益,请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号:<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body> </html>