`

左右列表框内容选择控件

阅读更多
$("#right").click(function(){
			$("#selectB option:selected").attr("selected",false);
			$("#selectA option:selected").appendTo("#selectB");
		});
		$("#left").click(function(){
			$("#selectA option:selected").attr("selected",false);
			$("#selectB option:selected").appendTo("#selectA");
		});
		$("#rightAll").click(function(){
			$("#selectA option").appendTo("#selectB");
		});
		$("#leftAll").click(function(){
			$("#selectB option").appendTo("#selectA");
		});
		$("#selectA").dblclick(function(){
			$("#selectB option:selected").attr("selected",false);
			$("#selectA option:selected").appendTo("#selectB");
		});
		$("#selectB").dblclick(function(){
			$("#selectA option:selected").attr("selected",false);
			$("#selectB option:selected").appendTo("#selectA");
		});


<table id="tableA" width="400" border="0">
      <tr>
        <td width="179" rowspan="2"><div align="right">
          <select name="select" multiple="multiple" id="selectA"  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>
            <option value="8" >选项8</option>
          </select>
        </div>
		</td>
        <td width="14"><button id="rightAll" >&gt;|</button><button id="right" >&gt;&gt;</button></td>
		
        <td width="193" rowspan="2">
			<div align="left">
			  <select name="select2" multiple="multiple" id="selectB"  style="width:100px;height:160px">
		      </select>
	        </div></td>
      </tr>
      <tr>
        <td><button id="left" >&lt;&lt;</button><br /><button id="leftAll" >|&lt;</button></td>
      </tr>
      
    </table>
分享到:
评论

相关推荐

    易语言超级列表框加滚动条

    在易语言中,超级列表框控件提供了丰富的属性和方法,使得开发者能灵活地控制数据的展示和交互。 2. **滚动条**:滚动条是用户界面中的一个辅助控件,用于帮助用户浏览超过屏幕可视区域的内容。在易语言中,滚动条...

    仿腾讯左右列表框listbox

    【标题】"仿腾讯左右列表框listbox"指的是在网页设计中实现的一种交互式界面元素,它模仿了腾讯产品中的功能,将两个列表框(通常称为选择框或下拉列表)并排放置,允许用户从左侧列表选择项目,然后将其添加到右侧...

    jQuery左右文字双向列表选择器插件

    **jQuery左右文字双向列表选择器插件** 在Web开发中,用户交互的界面设计往往直接影响到用户体验。"jQuery左右文字双向列表选择器插件"是一个高效且功能丰富的工具,它为开发者提供了创建左右两个列表之间进行数据...

    列表左右选择插件

    在IT行业中,列表左右选择插件是一种常见的交互设计工具,特别是在数据管理和用户界面设计中,它为用户提供了一种高效、直观的方式来处理多个选项的选择。这种插件通常包含两个并排的列表,一个显示可供选择的项目,...

    列表左右选择全选反选插件

    在IT领域,列表左右选择全选反选插件是一种常见的用户界面组件,广泛应用于数据管理、文件操作或信息筛选等场景。这种插件通常具备以下关键功能和特点: 1. **全选与反选功能**:插件的核心功能是提供全选和反选...

    evc窗体控件编程 按钮文本列表框树控件等等

    列表框控件显示一列或多列的项目列表,用户可以选择其中一项。列表框可以是单选或多选,通过`LBS_MULTIPLESEL`样式设置。使用`InsertString()`添加项目,`GetCurSel()`获取当前选中项。 3. **滚动条控件**: 滚动...

    列表框滚动条

    首先,列表框是一种控件,通常用于展示一组可选择的项目。这些项目可以是文字、图片或其他类型的数据。当列表框中的项目数量过多,无法一次性在屏幕上完全显示时,滚动条就显得尤为重要。滚动条分为垂直和水平两种,...

    易语言超级列表框操作

    在易语言中,“超级列表框”是一个非常重要的控件,它用于显示多列数据,常用于数据浏览、选择等场景。这个主题“易语言超级列表框操作”主要涵盖了如何在易语言环境中对超级列表框进行各种操作,包括但不限于添加、...

    原创左右两列框架锚点滚动Jquery插件

    【标题】"原创左右两列框架锚点滚动Jquery插件"所涉及的知识点主要集中在网页设计和前端开发领域,特别是使用Jquery实现的一种高效、便捷的用户界面交互设计。这种设计模式通常被称为单页应用(Single Page ...

    ListBox实现上下左右移动

    ListBox是Windows Forms和Web开发中常用的一种控件,主要用于显示一系列可选择的项。在本文中,我们将深入探讨如何在Windows Forms或ASP.NET环境中实现ListBox的上下左右移动功能,并支持通过Ctrl键进行多选。 首先...

    jQuery双向列表左右移动选择框代码.zip

    《jQuery双向列表左右移动选择框实现详解》 在网页开发中,经常需要设计用户交互性强、操作便捷的组件,例如双向列表的选择功能。这通常用于让用户在两个列表之间转移选项,比如在“可用”和“已选”之间切换元素。...

    bootstrap左右多选多multselect插件

    Bootstrap 左右多选多Multiselect插件是一种基于流行的前端框架Bootstrap开发的组件,它极大地扩展了Bootstrap原生的下拉选择框功能。这个插件允许用户在两个独立的列表之间进行选择,使得多选操作更加直观和高效,...

    jquery角色左右选择框rar

    在左右选择框插件中,可能使用了如`$("#leftBox")`和`$("#rightBox")`这样的选择器来获取左侧和右侧的选择框元素。 2. **事件处理**:jQuery简化了事件绑定,例如`click`、`change`等。在这个插件中,开发者可能...

    jQuery双列表左右选择框代码

    "jQuery双列表左右选择框代码"是一个基于jQuery实现的交互式用户界面组件,通常用于数据筛选或配置场景,让用户可以从两个列表中选择元素。这种设计常见于多选项设置,如角色分配、权限管理或者属性筛选等。 这个...

    左右移动多选列表控件

    这种控件通常包含两个并排放置的列表框,一个表示已选择的项目,另一个则显示可选项。用户可以通过点击或拖动按钮或使用键盘快捷键将项从一个列表移动到另一个,实现数据的筛选和多选。 在实际的软件开发中,这种...

    jquery双列表框插件Bootstrap Dual Listbox

    这个插件使用户能够在两个并列的列表框之间方便地转移选择项,尤其适用于需要用户从多个选项中进行多选的场景。在响应式设计的背景下,它能确保在各种屏幕尺寸和触摸设备上的良好表现。 Bootstrap Dual Listbox的...

    易语言源码模块_超级列表框快速排序2.0.7z

    超级列表框是易语言中用于显示和管理大量数据的控件,它集成了列表框的功能并扩展了更多特性,如多列显示、数据绑定等。快速排序是一种常用的内部排序算法,由C.A.R. Hoare在1960年提出,它的基本思想是采用分治法...

    前端选择插件,左右选择

    在前端开发中,"左右选择"通常指的是交互式组件,用于让用户在两个独立的列表之间进行选择或转移项。这种类型的插件广泛应用于各种场景,如数据筛选、配置设置、多选项对比等。以下是关于“前端选择插件,左右选择”...

    multiselect2side.js 实现左右选择-交换内容,包括js,css,demo页面

    "multiselect2side.js" 是一个专门用于实现左右选择并交换内容的JavaScript库,它为用户提供了直观且高效的选择方式,广泛应用于诸如数据过滤、用户权限分配、多选项选择等场景。这个库包含了JavaScript代码、CSS...

    一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

    在本篇教程中,我们将深入探讨如何利用jQuery库来实现一个功能丰富的下拉列表左右选择交互。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得前端开发变得更加高效和便捷。本章节...

Global site tag (gtag.js) - Google Analytics