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

效果如下:

几个注意地方:
1.多选下拉框需要添加 multiple
2.获取选中的元素KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲id option:selec…(#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

jquery --- 多选下拉框的移动(穿梭框)相关推荐

html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法在页面中引入下面的文件. lt;l ...
jquery easyui 多选下拉框的实现
为什么80%的码农都做不了架构师?>>> jquery easyui 多选下拉框的实现修改官方提供的demo实例,本来是单选的,让她编程多选,完成了勾选和去勾选的所有功能. ...
jquery easyui下拉框多选和原生多选下拉多选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
php 获取下拉框选中的文本,jQuery实现select下拉框获取当前选中的文本
本文主要介绍了jQuery实现select下拉框获取当前选中文本.值.索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值.下面跟着小编一起来看下吧,希望能帮助到大家. 话不多 ...
JavaScript jQuery获取radio/下拉框的选中值
JavaScript获取radio选中值 <ww:iterator value="proceList" status="rowstatus" id=&qu ...
HTML多选mysql,html多选下拉框 | 学步园
一个jquery ui,实现html的多选下拉框,在下拉里面加checkbox,不改变页面的提交特性,只是动态的改变select选中的多选数据. jsp页面例子: pageEncoding=" ...
jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等...
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
【js】复选框，复选下拉框，文本框勾连
[js]对常见事件的一个总结 ps: 内容涉及(kendo Ui, jQuery) 如下图所示:要求实现功能点 (1)用户名(复选下拉框,可选择多个)和用户名(文本输入框)相勾连复选下拉框改变,文本 ...
layui多选下拉框
HTML代码 <select class="param_belong" multiple="multiple" lay-filter="sele ...

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

jquery --- 多选下拉框的移动(穿梭框)相关推荐

最新文章

热门文章