<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
.centent{
float: left;
width: 300px;
height: 200px;
}
span{
background-color:yellow;
}
</style>
<script type="text/javascript">
$(function(){
$("#add").click(function(){
/* //获取下拉框选中的选项
$option=$("#s1 option:selected");
//删除下拉框选中的选项
var $remove=$option.remove();
//将要删除的option追加给对方
$remove.appendTo("#s2"); */
//删除和追加操作可以使用appendTo()方法直接完成
$option=$("#s1 option:selected");
$option.appendTo("#s2");
});
//将全部的option追加给对方
$("#add_all").click(function(){
//获取所有的option
$option=$("#s1 option");
//追加给对方
$option.appendTo("#s2");
});
//双击进行追加给对方
$("#s1").dblclick(function(){
//获取双击选中的选项
var $option=$("option:selected",this);
//追加给对方
$option.appendTo("#s2");
});
//选中删除到左边
$("#del").click(function(){
$option=$("#s2 option:selected");
$option.appendTo("#s1");
});
//全部删除到左边
$("#del_all").click(function(){
$option=$("#s2 option");
$option.appendTo("#s1");
});
//双击删除
$("#s2").dblclick(function(){
$option=$("option:selected",this);
$option.appendTo("#s1");
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple id="s1" style="width:120px;height:160px;">
<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">选中添加到右边>></span><br>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple id="s2" style="width:120px;height:160px;">
</select>
<div>
<span id="del"><<选中删除到左边</span> <br>
<span id="del_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在这个特定的案例中，“重构《实现select multiple左右添加和删除功能》”是一个关于如何优化多选下拉框（select multiple）操作的实践。该博文的作者通过提供一个名为`multipleSelect.html`的示例文件，展示了如何...
本示例着重讲解如何利用jQuery实现这样的功能，同时支持多选和全选。 **一、HTML结构** `index.html` 文件中，你需要创建两个`<ul>`元素，分别代表左右两个列表，每个`<li>`元素代表一个可选项。此外，还需要两个...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
通过以上步骤，我们可以实现一个功能完善的`select`选择框，其内容可以在用户的操作下左右移动，同时支持添加和删除选项。这种动态交互的设计不仅可以提升用户体验，也可以为开发者提供更多的定制空间。
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多...
对于“可视化操控左右多选Select”的组件，我们首先要定义两个主要部分：左侧的选择框（源选项）和右侧的选择框（已选选项）。每个选择框都是一个React组件，它们可能包含一个`<select>`元素，或者自定义的UI来模拟...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！ 运行效果图：...
总结来说，这个实例展示了如何使用jQuery来实现两个多选`select`元素之间的选项添加、删除以及值的传递。它利用了`select`元素的`multiple`属性、`input`元素的`hidden`类型，以及jQuery的事件监听和DOM操作功能，...
3. **SelectList.js**：这个文件很可能是核心的JavaScript代码，实现了列表框的选择和移动功能。其中可能包含了处理用户点击事件、在左右列表间移动项、同步选中状态等关键逻辑。 4. **ListItems.js**：这个文件...
对于左右移动，我们可以假设存在两个`<select>`元素，分别表示“左侧列表”和“右侧列表”。用户可以将“左侧列表”的选项移动到“右侧列表”，反之亦然。这涉及到从一个`<select>`中移除元素并将其添加到另一个`...
在本文中，我们将深入探讨如何使用jQuery来实现Select元素之间的内容复制和移动功能。这个功能在许多用户界面中都有应用，比如多选设置、数据过滤等。以下是对给定代码的详细解释和扩展： 首先，我们需要引入jQuery...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现，简单实用，选中选项内容，点击移动按钮可进行内容左右移动，双击option内容也可左右移动，支持单选移动、多选移动和一键全部移动！
在本文中，我们将探讨如何使用JavaScript实现一个下拉列表中Select和Option元素的上下左右移动功能。 下拉列表是网页表单中常见的一种元素，通常用来提供用户一系列可选择的选项。Select和Option是HTML中用于创建...
它通常包含两个独立的列表（左侧列表和右侧列表），以及两个操作按钮——“左移”和“右移”。用户可以选择左侧列表中的项目添加到右侧，反之亦然。 1. **HTML 结构**： 创建基本的HTML布局是实现双向选择器的第一...
这种设计通常包含两个部分：左侧的源选项列表和右侧的目标选项列表。用户可以通过点击按钮或使用键盘快捷键将选中的选项从左侧移动到右侧，或者从右侧移回左侧。这种交互方式适用于需要用户从多个可选项中选取一部分...
以下是根据提供的文件内容，详细阐述实现左右列表框内容相互移动功能涉及的关键知识点： 1. jQuery基础介绍： jQuery是一个快速、小巧的JavaScript库，它通过提供一种简洁的DOM操作方法，简化了JavaScript编程。它...