<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.centent {
float: left;
text-align: center;
margin: 10px;
}
span {
display: block;
margin: 2px 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
font-size: 12px;
color: white;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function() {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple="multiple" id="select1" style="width:100px;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>
</select>
<div> <span id="add" >选中添加到右边>></span> <span id="add_all" >全部添加到右边>></span> </div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px;height:160px;">
<option value="8">选项8</option>
</select>
<div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div>
</div>
</body>
</html>
效果图：
相关推荐
本文将深入探讨“jquery下拉框左右选择”这一主题，它是一种交互式用户界面元素，通常用于在两个列表之间移动选项，帮助用户进行多选或排序操作。 首先，我们要明白“下拉框左右选择”的基本概念。这是一种UI设计...
在IT行业中，"dwz 下拉框左右选择"通常指的是一个特定的UI组件，它用于在Web应用中实现用户交互。DWZ（Dynamic Web Zone）是一个开源的JavaScript框架，专门用于构建富客户端的Web应用程序。这个框架提供了丰富的UI...
本文将深入探讨如何使用jQuery实现一个下拉框左右选择的功能，这是一个常见于用户界面设计中的交互元素，通常用于选项筛选或数据迁移。 首先，我们需要理解下拉框左右选择的基本概念。这种设计通常包含两个部分：...
《jQuery实现的多选下拉框深度解析》 在网页开发中，为了提供更好的用户体验，我们经常需要使用到多选下拉框。jQuery库为我们提供了丰富的功能，使得创建交互式的多选下拉框变得轻而易举。在这里，我们将深入探讨...
这个“头像选择功能基于jQuery下拉框图片选择示例”提供了一个高效且用户友好的解决方案，使得用户能够方便地从一系列预设的头像中选取自己的代表形象。 首先，我们要理解jQuery库在其中的作用。jQuery是一个广泛...
本项目“jQuery下拉框国家选择代码”是为网页开发者提供的一款实用工具，它允许用户在下拉菜单中选择全世界的国家，并且具备搜索功能和国旗图标显示，提升了用户体验。 首先，我们要了解jQuery如何实现下拉框的动态...
本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法。分享给大家供大家参考，具体如下： 我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下： <select> 选项一...
强大的jquery下拉框插件 下拉框展示带列表分页功能，适合下拉框...多项选择以标签（Tag）形式展现 结果列表自动判断屏幕边缘，避免内容超出可视范围 丰富的参数设置及功能API调用 浏览器兼容：IE8+、Chrome、Firefox等
在网页设计中，用户界面的交互性和易用性至关重要，jQuery城市下拉框菜单选择代码就是为提升用户体验而设计的一种常见技术。这个标题所指的知识点主要涉及如何使用jQuery库来实现一个动态的城市选择下拉菜单，使得...
而在这个场景下，我们关注的是如何在`DataGridView`的某一列实现一个下拉框（ComboBox），这个下拉框既能提供预设的选项供用户选择，又能让用户自定义输入新的数据。 首先，我们需要创建一个`DataGridView`控件，并...
在网页开发中，多选下拉框是一种常见的用户交互元素，它允许用户在下拉菜单中选择多个选项。本主题将深入探讨如何使用JavaScript库，尤其是jQuery和Bootstrap，来实现这种功能。`bootstrap-select`是Bootstrap框架的...
在网页开发中，实现下拉框的联动效果可以极大地提升用户体验，尤其是在处理地理位置信息时，如选择国家、省份和城市。"jQuery下拉框二级三级城市联动插件"就是这样一个工具，它允许用户通过级联的下拉菜单，便捷地...
《jQuery下拉框城市选择插件的深度解析与应用》 在网页开发中，用户界面的交互性至关重要，其中表单元素的优化是提升用户体验的关键环节。jQuery下拉框城市选择插件，作为一款专为网页设计师和开发者打造的工具，...
在网页设计中，下拉框（Dropdown）是一种常见的交互元素，用于展示多个选项供用户选择。然而，HTML原生的`<select>`标签提供的样式有限，往往无法满足设计师们追求美观和用户体验的需求。jQuery作为一款强大的...
本示例“jQuery下拉框图片选择特效imageselect.js”是利用jQuery的强大力量来提升用户界面的美观性和交互性。在这个项目中，我们将会探讨如何使用这个插件来实现一个具有图片选择功能的下拉菜单，从而让传统的...
在某些场景下，我们需要动态地填充select下拉框的选项值，以实现更灵活的数据输入。本篇文章将详细探讨如何在jQGrid中实现这一功能。 首先，理解`select`下拉框的基本概念。在HTML中，`<select>`元素用于创建一个...
本主题聚焦于创建一个自定义组件——"下拉框选择颜色"（CtlColorComboBox）。这个组件允许用户在一个下拉列表中选择颜色，以便于在应用程序中进行颜色配置，比如在mschart中为线形图分配不同颜色。 首先，`...
本文将深入探讨如何在Vue.js环境中利用jQuery实现下拉框菜单选择和日期时间选择的功能，并讨论相关代码实现及效果。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。...