<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>
function moveRight() {
var sourceSelect = document.getElementById("sourceSelect");
var targetSelect = document.getElementById("targetSelect");
while(sourceSelect.options.selectedIndex != -1){
targetSelect.options.add(sourceSelect.options.item(sourceSelect.selectedIndex));
}
}
function moveLeft() {
var sourceSelect = document.getElementById("targetSelect");
var targetSelect = document.getElementById("sourceSelect");
while(sourceSelect.options.selectedIndex != -1){
targetSelect.options.add(sourceSelect.options.item(sourceSelect.selectedIndex));
}
}
</script>
</head>
<body>
<select id="sourceSelect" multiple >
<option value="1">aaa</option>
<option value="2">bbb</option>
<option value="3">ccc</option>
<option value="4">ddd</option>
<option value="5">eee</option>
<option value="6">fff</option>
</select>
<a onclick="moveRight();"> >> </a>
<a onclick="moveLeft();"> << </a>
<select id="targetSelect" multiple>
</select>
</body>
</html>
分享到：
相关推荐
在网页设计中，"select互选效果"是一种交互设计特性，允许用户在两个或多个下拉选择框（`<select>`元素）之间进行双向选择，实现数据的同步更新。这样的功能常见于需要关联两个列表项的场景，比如地区选择、类别筛选...
这个场景中，我们讨论的是如何实现一个功能，让用户可以在两个Select下拉框之间移动选择的值，这种功能常见于多选设置或者数据迁移的界面。下面我们将深入探讨如何实现这样的功能。 首先，我们需要两个HTML Select...
一、直接上代码 ...select id=leftSelector multiple=multiple name=SmsListOnLeft style=height:100px; width:50px> <option value=0>0</option> <option value=1>1</option> <option value=2>2</option>
本示例关注的是如何实现两个`<select>`标签各自显示不同的内容，以及如何实现多选功能，这在数据输入或过滤场景中非常常见。我们将使用Bootstrap框架来增强界面的美观性和用户体验。 Bootstrap是Twitter推出的一个...
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的双Select框多选表单，以便用户可以方便地在两个下拉列表之间选择和移动选项，并在提交表单时发送选定的数据。jQuery是一个强大的JavaScript库，它简化...
首先，我们需要在HTML中定义两个`select`元素，一个作为源列表（select1），另一个作为目标列表（select2）。它们可以通过`id`属性进行区分，以便在JavaScript中引用： ```html <select id="select1" multiple> ...
在这个例子中，我们创建了两个 select 元素，一个 ID 为 "leftSelect"，另一个为 "rightSelect"。同时，我们添加了一个按钮，ID 为 "moveButton"，用于触发移动操作。 接下来，我们需要使用 jQuery 来处理按钮点击...
在这个例子中，`response` 是从服务器返回的数据，每个元素包含 `value` 和 `text` 两个属性，分别用于选项的值和显示文本。 **自定义和扩展** Bootstrap Selectpicker 提供了丰富的 API 和配置选项，你可以根据...
在这个例子中，用户可以勾选一个、两个或全部三个选项。 ### CSS美化 虽然默认的多选下拉菜单在所有浏览器中的样式可能不尽相同，但我们可以使用CSS来统一并增强其外观。例如，我们可以改变边框、背景颜色、字体...
对于Python 2和3都兼容，这表明`multiple_select_widget-0.1.0-py2.py3-none-any.whl`可以用于支持这两种版本的Python环境。`none`和`any`部分则表示这个库不依赖特定的系统或平台，可以在任何符合Python标准的环境...
Bootstrap Select 需要依赖这两个库才能正常工作。然后，你需要引入 Bootstrap Select 的 CSS 和 JS 文件。通常，这些文件可以从官方仓库或者 CDN 上获取。 2. **基本使用** 在 HTML 中，创建一个普通的 `<select>...
minimumInputLength: 2 // 用户至少输入两个字符才开始搜索 }); ``` **6. 多选与分组** Select2 还支持多选和选项分组。只需在`<select>`标签上添加`multiple`属性，就可以启用多选模式。对于选项分组，可以使用`...
这两个`select`元素都需设置`multiple`属性，允许用户进行多选操作。以下是一个基本的HTML结构： ```html <select name="possible" size="4" multiple width="200" style="width:200px"> <option value="1">中国...
在网页设计和开发中，`select` 和 `input` 是两个非常常见的HTML元素，它们用于收集用户输入。本文将深入探讨如何在`select`中实现复选框（checkbox）选择功能，以及如何在`input`中实现上下滚动浏览条。 首先，让...
本文将深入探讨如何使用jQuery来操作HTML中的checkbox和select元素，这两个元素在网页表单中十分常见。 一、jQuery操作checkbox 1. 检查状态： jQuery提供了`is()`方法来检查checkbox是否被选中。例如，如果有...
4. 状态控制：layui提供了`checkbox_checked`和`checkbox_unchecked`两个类，用于控制复选框的选中状态。 三、layui多选下拉框（select）的使用 1. 初始化：在layui中，`select`组件需要通过JavaScript进行初始化...
本文将详细探讨如何使用jQuery模拟select，并介绍两个流行的插件：Select2和Chosen。 首先，传统的HTML select元素虽然功能齐全，但在样式定制和用户体验方面往往显得较为局限。为了提升网页的交互性和美观度，...
在本文中，我们将深入探讨如何使用AngularJS与Bootstrap Select2结合，实现强大的...通过深入了解这两个库的API和特性，你可以创建出满足各种需求的用户界面。记得在实际应用中，根据项目需求调整和完善这些示例代码。
本文实例讲述了jquery操作select常见方法。分享给大家供大家参考，具体如下： 在前段HTML页面设计中select 下拉框，或者 ...6. 两个select 框之间互相添加删除，从左边到右边，从右边到左边的操作，通常是多选情况。 7
Bootstrap Dual Listbox是一款基于jQuery和Bootstrap框架的双选列表控件，它为用户提供了便捷的方式来在两个选择框之间同步选项的选取。这个控件尤其适用于需要处理大量可选项目的场景，用户可以轻松地进行批量选择...