Jquery多选框互相内容交换的实例代码
程序员文章站
2023-09-19 22:26:38
代码如下:
无标题页</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/2043370.html">
Asp.Net 文件操作基类(读取,删除,批量拷贝,删除,写入,获取文件夹大小,文件属性,遍历目录) </a>
</p>
<p>
下一篇： <a href="/article/2043372.html">
Vue自定义指令实现checkbox全选功能的方法 </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>