<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function(){
var $options = $('#select1 option:selected');//获取当前选中的项
var $remove = $options.remove();//删除下拉列表中选中的项
$remove.appendTo('#select2');//追加给对方
});
$('#remove').click(function(){
var $removeOptions = $('#select2 option:selected');
$removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成
});
$('#addAll').click(function(){
var $options = $('#select1 option');
$options.appendTo('#select2');
});
$('#removeAll').click(function(){
var $options = $('#select2 option');
$options.appendTo('#select1');
});
//双击事件
$('#select1').dblclick(function(){
//var $options = $('#select1 option:selected');
var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格，有空格是不可以的
$options.appendTo('#select2');
});
$('#select2').dblclick(function(){
$('#select2 option:selected').appendTo('#select1');
});
});
</script>
<body>
<div class="centent">
<select multiple id="select1" style="width:100px;height:250px;">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="选项三">选项三</option>
<option value="选项四">选项四</option>
<option value="选项五">选项五</option>
<option value="选项六">选项六</option>
<option value="选项七">选项七</option>
<option value="选项八">选项八</option>
<option value="选项九">选项九</option>
</select>
<select multiple id="select2" style="width:100px;height:250px;">
</select>
</div>
<div>
<span id="add">选中添加到右边>></span>
<span id="remove"><<选中添加到左边</span><br>
<span id="addAll">全部添加到右边>></span>
<span id="removeAll"><<全部添加到左边</span>
</div>
</body>
分享到：
相关推荐
jQuery Multiple Select实现下拉框多选，请注意是Multiple 。实例介绍详细，想用的可以直接Copy进去用
支持下来查询（英文和中文）多选 select2 multiple multiSelect
主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下
JQuery带checkbox多选的下拉列表,功能非常强大，浏览器兼容性也很强, 浏览器兼容性如下： IE 7+ Chrome 8+ Firefox 10+ Safari 3+ Opera 10.6+ 调用非常强大，扩展性也很强
BsMultiSelect是一款基于Bootstrap 4的多选下拉框插件。该插件能够提供友好的多选功能，并提供一些情节模式和多种主题效果。
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
layui的select下拉框插件，可以多选
呃。其实很简单的东西啦。页面的图 两个列表都可以多选， ...select id=”select1″ size=”5″ multiple style=”width:100px ” > ”111″>北京</option> ”222″>上海</option> <option value=”3
本文实例讲述了jquery操作select常见方法。分享给大家供大家参考，具体如下： 在前段HTML页面设计中select 下拉框，或者 ...6. 两个select 框之间互相添加删除，从左边到右边，从右边到左边的操作，通常是多选情况。 7
多重选择是一个jQuery插件，用于使用复选框选择多个元素:)。 要开始使用结帐示例和文档， 安装 npm install multiple-select-modified 与原始版本相比的变化 新的多选选项： okButton布尔标志，设置后将在列表的...
有三种模式可定义:basic基本,multiple可多选,filter过滤显示 当Input内容框为可写状态时，可以通过输入TEXT来直接获取要选择的值； 可定义是否为动态自动载入（即INPUT内容框被选定后再进行数据载入）； 可以用...
select multiple></select>，自己花了一整天时间做了一个。或许这样占用的主要功能开发的时间，开发起来会更有紧迫感吧。感觉自己是个抖M自虐倾向，并且伴有css和代码缩进强迫症的程序猿。 01.画蛇添足 ...
Wrap jQuery functionality around a single or multiple DOM Element(s). This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements). 返回值 ...
jQuery树多选 该插件使您可以将甜美的Treeview前端添加到<select>节点。 可以像以前一样使用基础<select>节点。 这意味着您仍然可以使用$("select").val()或selectElement.value来获取值，就像没有插件...
花式多选花式多选将多选变成了一种易于样式化的选择。 花式多选具有搜索和添加新选项的能力。... select multiple =" true " > < option> Option 1 </ option> < option> Option 2 </ option> < option> O
获得单个select的值和多选select的值。 代码如下:HTML 代码:<p></p> <select id=”single”> <option>Single <option>Single2</option></select><select id=”multiple” multiple=”multiple”...
多选 多重选择是一个jQuery插件，用于使用复选框选择多个元素:)。 要开始使用结帐示例和文档，请访问 。 例子 变更日志 执照