jquery --- 多选下拉框的移动(穿梭框)

效果如下:
在这里插入图片描述

几个注意地方:
1.多选下拉框需要添加 multiple
2.获取选中的元素 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲id option:selec\dots$ (#id option:not(:selected))

下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解

添加选中到右边:

// 添加选中到右边
$('#add').click(()=>{let $options = $('#select1 option:selected')let $remove = $options.remove();$('#select2').append($remove);
})

添加未选到右边:

// 添加未选到右边
$('#add_not').click(()=>{let $options = $('#select1 option:not(:selected)')let $remove = $options.remove();$('#select2').append($remove);
})

全部添加到右边:

// 全部添加到右边
$('#add_all').click(()=>{let $remove = $('#select1 option').remove()$('#select2').append($remove);
})

整体代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>.content{display: inline-block;margin-left:15px;}div span{display: block;margin-left:-15px;}#add,#add_all,#add_not,#remove,#remove_all,#remove_not{cursor: pointer;}#select1{width: 100px;height: 160px;}#select2{width:100px;height:160px;}</style>
</head>
<body><div class="content"><select multiple id="select1"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option><option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option><option value="7">选项7</option><option value="8">选项8</option></select><div><span id="add">选中添加到右边&gt;&gt;</span><span id="add_not">添加未选到右边&gt;&gt;</span><span id="add_all">全部添加到右边&gt;&gt;</span></div>
</div>
<div class="content" style="margin-left:30px;"><select multiple id="select2" ></select><div><span id="remove">&lt;&lt;选中删除到左边</span><span id="remove_not">&lt;&lt;添加未选到左边</span><span id="remove_all">&lt;&lt;全部删除到左边</span></div>
</div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){// 添加选中到右边$('#add').click(()=>{let $options = $('#select1 option:selected')let $remove = $options.remove();$('#select2').append($remove);})// 添加未选到右边$('#add_not').click(()=>{let $options = $('#select1 option:not(:selected)')let $remove = $options.remove();$('#select2').append($remove);})// 全部添加到右边$('#add_all').click(()=>{let $remove = $('#select1 option').remove()$('#select2').append($remove);})// 删除选中到左边$('#remove').click(()=>{let $options = $('#select2 option:selected')let $remove = $options.remove();$('#select1').append($remove);})// 删除未选到左边$('#remove_not').click(()=>{let $options = $('#select2 option:not(:selected)')let $remove = $options.remove();$('#select1').append($remove);})// 全部删除到左边$('#remove_all').click(()=>{let $remove = $('#select2 option')$('#select1').append($remove);})
})
</script></body>
</html>

参考《锋利的jquery》P149~P151

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/250961.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！