jquery书写左右两个多选下拉列表交换移除功能

使用jquery做一个多选列表左右互换的功能，代码如下

<!DOCTYPE HTML>
<html lang="en-US">
<head><meta charset="UTF-8"><title></title><script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body><div><div><div style="display:inline-block;"><div>1组用户</div><select name="" multiple="multiple" style="height:200px;" id="left_select"><option value="101">用户101</option><option value="102">用户102</option><option value="103">用户103</option><option value="104">用户104</option><option value="105">用户105</option><option value="106">用户106</option><option value="107">用户107</option></select></div><div style="display:inline-block;height: 200px;vertical-align: middle;"><button type="button" id="left_btn">>></button><button type="button" id="right_btn"><<</button></div><div style="display:inline-block;"><div>2组用户</div><select name="" multiple="multiple" style="height:200px;" id="right_select"><option value="201">用户201</option><option value="202">用户202</option><option value="203">用户203</option><option value="204">用户204</option><option value="205">用户205</option><option value="206">用户206</option><option value="207">用户207</option></select></div><div></div></div></div><script type="text/javascript">$(function(){//页面加载完毕后开始执行的事件//点击左边select 去右边
            $("#left_btn").click(function(){$("#left_select option:selected").each(function(){$("#right_select").append($(this).prop("outerHTML"));$(this).remove();});});//点击右边select 去左边
            $("#right_btn").click(function(){$("#right_select option:selected").each(function(){$("#left_select").append($(this).prop("outerHTML"));$(this).remove();});});});</script>
</body>
</html>

效果如图：

jquery书写左右两个多选下拉列表交换移除功能相关推荐

可以左右移动多选下拉列表的javaScipt(可以兼容IE和firefox)
自己在项目业余时间总结了一份可以左右移动(Add和remove)多选下拉列表的javaScipt,可以兼容IE和firefox,并且经过测试,只是代码略显臃肿,希望各位网友参考后给一些指点,特别是在简 ...
JQuery 多选下拉列表左右移动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
axure 下拉多选元件_Axure教程：下拉多选列表集合（多选下拉列表+单选下拉列表+分级下拉列表）...
原标题:Axure教程:下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表) 之前和大家分享了 <>.<>,很多同学私信我说很好使用,希望能够做一个多选下拉列表的教程 ...
两个多选框(select)之间值的左右上下移动
两个多选框(select)之间值的左右上下移动两个多选框(select)之间值的左右上下移动的代码请参考: <html> <head> < ...
jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
jQuery结合PHP+MySQL实现二级联动下拉列表[实例] 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回 ...
MFC两个复选框互斥设置
MFC两个复选框互斥设置下面是两个复选框,我们想要做到只能选择一个,并且点击其中一个自动关闭另一个,并且不像别的示例所做的点击其中一个另一个直接不能点击,这种方法的话可以随时修改,比较方便下面是第 ...
技嘉z68pds3刷中文bios_技嘉RTX 3080 VISION OC雪鹰显卡评测：内容创作、3A游戏两不误之选...
VISION是技嘉在Z490发布时专门为内容创造者打造的全新产品系列,除了VISION主板之外,还有VISION显卡,我们今天的主角-技嘉RTX 3080 VISION OC雪鹰就是技嘉专门为内容创造 ...
jquery 获取前两个table里的每个tr里面的第二个td
jquery 获取前两个table里的每个tr里面的第二个td $("table:lt(2)>tbody>tr td:nth-child(2)) $("table:lt ...
jQuery插件开发的两种方法及$.fn.extend的详解
2019独角兽企业重金招聘Python工程师标准>>> 作者: 字体:[增加减小] 类型:转载时间:2014-01-16 我要评论 jQuery插件开发分为两种:1 类级别.2 ...

jquery书写左右两个多选下拉列表交换移除功能

jquery书写左右两个多选下拉列表交换移除功能相关推荐

最新文章

热门文章