<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>
分享到：
相关推荐
$('#mySelect').multipleSelect({ // 这里可以配置插件的选项，比如： multiple: true, // 默认为true，表示开启多选 filter: true, // 开启搜索过滤功能 selectAll: true, // 是否显示全选/全不选按钮 width:...
本教程将围绕“利用jQuery实现多选，分栏比较”这一主题展开，结合Bootstrap的select组件，来创建一个既实用又美观的多选下拉菜单。 首先，我们需要理解jQuery的选择器和方法。jQuery选择器类似于CSS选择器，可以...
本资源"jquery下拉多选select插件.rar"提供了一个基于jQuery实现的多选下拉框插件，适用于J2EE开发环境，尤其适合那些希望在网页中创建美观且功能强大的下拉选择器的开发者。 首先，让我们深入了解一下jQuery的选择...
《jQuery实现的多选下拉框深度解析》 在网页开发中，为了提供更好的用户体验，我们经常需要使用到多选下拉框。jQuery库为我们提供了丰富的功能，使得创建交互式的多选下拉框变得轻而易举。在这里，我们将深入探讨...
本主题将深入探讨如何使用jQuery实现下拉框的多选功能，以提升用户体验和交互性。以下是对"Jquery实现下拉框多选"这一知识点的详细解释。 一、jQuery与HTML Select元素 在HTML中，`<select>`元素用于创建下拉菜单...
本话题聚焦于“jQuery 多选列表框”，这是一种允许用户在两个列表之间双向选择项的交互控件，通常用于数据筛选或选项分配。 首先，我们来看`jquery.multiselect2side`这个压缩包文件，它很可能包含了实现这种功能的...
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的双Select框多选表单，以便用户可以方便地在两个下拉列表之间选择和移动选项，并在提交表单时发送选定的数据。jQuery是一个强大的JavaScript库，它简化...
3. **jQuery代码**：接下来，编写jQuery脚本来实现多选下拉框的交互效果。我们可以监听按钮的点击事件，然后根据当前状态来切换下拉框的可见性。 ```javascript $(document).ready(function() { $("#...
在JavaScript中，多选下拉框可以通过设置`<select>`元素的`multiple`属性来实现。通过jQuery，我们可以轻松地为这些元素添加事件监听器，如`change`事件，以便在用户选择或取消选择选项时触发相应的行为。 4. **...
首先，要实现`select`下拉框的多选功能，我们需要在`<select>`标签中添加一个`multiple`属性。这个属性告诉浏览器用户可以选取多个值。下面是一个基本的多选`select`下拉框的HTML结构示例： ```html <select ...
本文将深入探讨如何使用 jQuery 来实现一个可多选的下拉框功能，这对于创建交互性强的用户界面非常有用。下面我们将详细讲解实现这个功能的关键步骤和涉及的技术点。 首先，我们需要一个 HTML 结构来定义我们的多选...
**jQuery Combotree 多选下拉树** jQuery Combotree 是一个专为Bootstrap设计的组件，它将传统的下拉菜单与树形结构相结合，提供了一种交互式的多选功能。这个组件基于jQuery库和zTree插件，使得在网页应用中能够...
jQuery Multiselect是由Luis Almeida开发的一个开源插件，它基于jQuery库，可以将传统的多选`<select>`元素转换为一个可定制、交互性强的多选下拉框。通过这个插件，你可以轻松地实现分组、搜索、排序等高级功能，...
当我们希望实现多选功能时，就需要利用`<select>`的一些特定属性和方法。本篇文章将深入探讨如何在HTML、CSS以及JavaScript中实现`<select>`的多选特性。 ### HTML基础 在HTML中，`<select>`元素有一个名为`...
**jQuery多选下拉框插件详解** 在Web开发中，多选下拉框是一种常见的交互元素，它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一，提供了许多插件来增强这种用户体验。`jquery.multi-select....
jQuery multiple-select-master是一款基于jQuery的多选下拉框插件，它通过添加CSS样式和JavaScript功能，将传统的单行选择框转变为可滚动、可搜索、可多选的列表，使得用户能够更方便地进行多项选择。这个插件支持...
为了实现多选，我们需要使用`<select>`的一个属性`multiple`。 **一、HTML基础** 在HTML中，创建一个简单的多选下拉框的基本结构如下： ```html <select multiple> <option value="value1">Option 1 ...
标题“jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)”和描述“Selectator是一款实现多选和搜索过滤功能的jQuery下拉列表框插件。下文给大家介绍jQuery使用Selectator插件实现多选下拉列表过滤框，...
**jQuery select下拉框单选和多选插件** 在Web开发中，下拉框（select）是常用的一种用户交互元素，它用于提供多个选项供用户选择。然而，原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...
以下是对如何实现 `jQuery.multiselect` 多选下拉框的详细步骤和相关知识点的讲解： ### 步骤一：引入依赖文件 首先，你需要在 HTML 页面中引入必要的 CSS 和 JavaScript 文件。这些文件包括 `jquery-ui.css`...