<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
.sel{width:150px;height:200px;}
.btn{width:50px;font-weight:bold;font-size:14px; }
</style>
</HEAD>
<BODY>
<table>
<tr>
<td>
<select multiple class="sel" id="sel_left">
<option value="a">aaaaaaaaaaa</option>
<option value="b">bbbbbbbbbbb</option>
<option value="c">ccccccccccc</option>
<option value="d">ddddddddddd</option>
<option value="e">eeeeeeeeeee</option>
</select>
</td>
<td>
<p><button class="btn" id="btn_1">>> </button></p>
<p><button class="btn" id="btn_2">></button></p>
<p><button class="btn" id="btn_3"><</button></p>
<p><button class="btn" id="btn_4"><<</button></p>
</td>
<td>
<select multiple class="sel" id="sel_right">
<option value="f">fffffffffff</option>
</select>
</td>
</tr>
</table>
</BODY>
<script>
$(function(){
$("#sel_left,#sel_right").bind("change",checkBtn);
$("#btn_1,#btn_2,#btn_3,#btn_4").bind("click",clickBtn);
checkBtn();
});
function checkBtn(){
jQuery("#sel_left>option").length > 0 ? jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled");
jQuery("#sel_left option:selected").length > 0 ? jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled");
jQuery("#sel_right option:selected").length > 0 ? jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled");
jQuery("#sel_right>option").length > 0 ? jQuery("#btn_4").removeAttr("disabled") : jQuery("#btn_4").attr("disabled","disabled");
}
function clickBtn(e){
if("btn_1" == e.target.id){
jQuery("#sel_left>option").appendTo("#sel_right");
}else if("btn_2" == e.target.id){
jQuery("#sel_left option:selected").appendTo("#sel_right");
}else if("btn_3" == e.target.id){
jQuery("#sel_right option:selected").appendTo("#sel_left");
}else if("btn_4" == e.target.id){
jQuery("#sel_right>option").appendTo("#sel_left");
}
checkBtn();
}
</script>
</HTML>
分享到：
相关推荐
"jQuery 左右选择框"通常指的是使用jQuery实现的一种交互式选择组件，这种组件常用于用户界面，允许用户在两个分隔的区域之间移动选项，以进行多选或排序操作。下面我们将深入探讨这一主题。 首先，我们来理解...
根据提供的文件信息，本文将详细解析“jquery左右选择框”的实现原理、代码结构及功能特点。此案例展示了如何使用jQuery库来实现一个简单的左右选择框交互功能，这在实际项目中非常常见，例如用户权限分配、多选项...
**jQuery左右文字双向列表选择器插件** 在Web开发中，用户交互的界面设计往往直接影响到用户体验。"jQuery左右文字双向列表选择器插件"是一个高效且功能丰富的工具，它为开发者提供了创建左右两个列表之间进行数据...
本资源"jquery角色左右选择框rar"提供了一个使用jQuery实现的简单角色互选功能，这对于网页开发中的用户交互设计特别有用。在网页表单中，用户往往需要选择或分配某些属性或角色，这种左右选择框的设计可以提高用户...
开发者可能使用了内联样式、内部样式表或外部样式表来定义元素的布局、颜色、边框等视觉属性，使得左右选择框看起来更加吸引人。 7. **响应式设计**：考虑到现代网页需要适应不同设备的屏幕尺寸，此组件可能采用了...
本项目"jquery实现用户信息左右选择特效"是基于jQuery构建的一个交互式用户信息管理功能，它优化了传统的多选列表，提供了一种更加直观和动态的方式来处理用户数据。 首先，我们要理解这个项目的背景。传统的多选...
### jQuery UI 树状下拉选择框（Comboxtree）详解 #### 一、引言 随着 WEB2.0 及 AJAX 思想在互联网上的快速发展与传播，一系列优秀的 JavaScript 框架相继诞生，例如 Prototype、YUI、jQuery、MooTools、Bindows ...
《jQuery双向列表左右移动选择框实现详解》 在网页开发中，经常需要设计用户交互性强、操作便捷的组件，例如双向列表的选择功能。这通常用于让用户在两个列表之间转移选项，比如在“可用”和“已选”之间切换元素。...
"jQuery左右列表按钮控制穿梭框"是网页交互设计中的一种常见功能，常用于数据选择和转移，例如在表单中选择多个选项。这种设计通常包含两个并排的列表框，一个显示可供选择的项目，另一个显示已选择的项目。用户可以...
本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”，这是一种常见于网页表单设计的功能，用于实现两个下拉列表（select框）之间的双向同步选择。 首先，我们需要理解jQuery的选择器。jQuery...
本项目"基于zTree-MultiSelect实现的左右选择框Demo"是针对zTree进行的一个功能扩展，旨在提供多选和左右移动功能，以满足更复杂的用户交互需求。 zTree的核心功能是将层级结构的数据转换为树形结构显示，其强大的...
在本项目中，"jQuery左右列表选择点击切换代码.zip" 提供了一个基于jQuery的交互式功能，用于在两个列表之间进行选择和切换。这个功能通常用于用户需要在多个选项之间进行选择的情况，如配置设置、筛选条件等。下面...
JavaScript 左右选择框是一种常见的前端交互设计，它通常用于让用户在两个独立的列表之间进行元素的选择和转移。这种设计模式在很多应用场景中都能见到，比如用户权限设置、多选选项配置等。在这个"Javascript左右...
**jQuery双向列表左右移动选择框**是一种常见的交互设计，它允许用户在两个列表之间移动项目，通常用于选择或分配选项。这种设计广泛应用于各种应用程序，如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...
标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表（select元素），特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...
"jQuery双列表左右选择框代码"是一个基于jQuery实现的交互式用户界面组件，通常用于数据筛选或配置场景，让用户可以从两个列表中选择元素。这种设计常见于多选项设置，如角色分配、权限管理或者属性筛选等。 这个...
本示例中的“jQuery左右列表选择点击切换代码”是用于创建一个交互式的列表选择器，用户可以通过点击左右两侧的列表来切换并选择所需项。这个功能常见于各种网页应用，如设置选项、筛选器或者导航菜单。 首先，`...
**jQuery穿梭框（Transfer Box）** 是一个常见的前端交互组件，它允许用户在两个列表之间移动条目，常用于数据的双向选择，如角色分配、权限设置等场景。本示例着重讲解如何利用jQuery实现这样的功能，同时支持多选...
在给定的资源中，“jquery实现 左右 双向选择器 挺好用”是一个利用jQuery创建的交互式用户界面组件，用于实现双向选择功能。这种组件常见于需要用户在两个列表之间转移选项的场景，例如在“已选”和“可选”之间...
在这个"jQuery左右列表选项框代码.zip"压缩包中，包含了一个利用jQuery实现的交互式功能，即左右列表选项框。这种设计常用于用户在两个列表之间转移选项，例如在选择联系人或者分配权限时。以下是关于这个功能的详细...