`

自己写的jQuery 左右选择框

阅读更多
<!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">&gt;&gt; </button></p>
			<p><button class="btn" id="btn_2">&gt;</button></p>
			<p><button class="btn" id="btn_3">&lt;</button></p>
			<p><button class="btn" id="btn_4">&lt;&lt;</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>
分享到:
评论
1 楼 gowithbutton 2011-12-09  
厉害厉害厉害厉害

相关推荐

    jquery左右选择框

    根据提供的文件信息,本文将详细解析“jquery左右选择框”的实现原理、代码结构及功能特点。此案例展示了如何使用jQuery库来实现一个简单的左右选择框交互功能,这在实际项目中非常常见,例如用户权限分配、多选项...

    jquery 左右选择框

    "jQuery 左右选择框"通常指的是使用jQuery实现的一种交互式选择组件,这种组件常用于用户界面,允许用户在两个分隔的区域之间移动选项,以进行多选或排序操作。下面我们将深入探讨这一主题。 首先,我们来理解...

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

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

    jquery角色左右选择框rar

    本资源"jquery角色左右选择框rar"提供了一个使用jQuery实现的简单角色互选功能,这对于网页开发中的用户交互设计特别有用。在网页表单中,用户往往需要选择或分配某些属性或角色,这种左右选择框的设计可以提高用户...

    jquery实现的左右选择的例子

    开发者可能使用了内联样式、内部样式表或外部样式表来定义元素的布局、颜色、边框等视觉属性,使得左右选择框看起来更加吸引人。 7. **响应式设计**:考虑到现代网页需要适应不同设备的屏幕尺寸,此组件可能采用了...

    jquery实现用户信息左右选择特效

    本项目"jquery实现用户信息左右选择特效"是基于jQuery构建的一个交互式用户信息管理功能,它优化了传统的多选列表,提供了一种更加直观和动态的方式来处理用户数据。 首先,我们要理解这个项目的背景。传统的多选...

    jquery ui 树状下拉选择框

    ### jQuery UI 树状下拉选择框(Comboxtree)详解 #### 一、引言 随着 WEB2.0 及 AJAX 思想在互联网上的快速发展与传播,一系列优秀的 JavaScript 框架相继诞生,例如 Prototype、YUI、jQuery、MooTools、Bindows ...

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

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

    jQuery左右列表按钮控制穿梭框

    "jQuery左右列表按钮控制穿梭框"是网页交互设计中的一种常见功能,常用于数据选择和转移,例如在表单中选择多个选项。这种设计通常包含两个并排的列表框,一个显示可供选择的项目,另一个显示已选择的项目。用户可以...

    jquery双向选择器两侧select框列表文字左右选择器代码

    本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”,这是一种常见于网页表单设计的功能,用于实现两个下拉列表(select框)之间的双向同步选择。 首先,我们需要理解jQuery的选择器。jQuery...

    基于zTree-MultiSelect实现的左右选择框Demo

    本项目"基于zTree-MultiSelect实现的左右选择框Demo"是针对zTree进行的一个功能扩展,旨在提供多选和左右移动功能,以满足更复杂的用户交互需求。 zTree的核心功能是将层级结构的数据转换为树形结构显示,其强大的...

    jQuery左右列表选择点击切换代码.zip

    在本项目中,"jQuery左右列表选择点击切换代码.zip" 提供了一个基于jQuery的交互式功能,用于在两个列表之间进行选择和切换。这个功能通常用于用户需要在多个选项之间进行选择的情况,如配置设置、筛选条件等。下面...

    Javascript左右选择框

    JavaScript 左右选择框是一种常见的前端交互设计,它通常用于让用户在两个独立的列表之间进行元素的选择和转移。这种设计模式在很多应用场景中都能见到,比如用户权限设置、多选选项配置等。在这个"Javascript左右...

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

    **jQuery双向列表左右移动选择框**是一种常见的交互设计,它允许用户在两个列表之间移动项目,通常用于选择或分配选项。这种设计广泛应用于各种应用程序,如设置管理、权限分配等。下面将详细介绍如何实现这样的功能...

    使用JQuery左右移动下拉列表框中的值

    标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表(select元素),特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...

    jQuery双列表左右选择框代码

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

    jQuery左右列表选择点击切换代码

    本示例中的“jQuery左右列表选择点击切换代码”是用于创建一个交互式的列表选择器,用户可以通过点击左右两侧的列表来切换并选择所需项。这个功能常见于各种网页应用,如设置选项、筛选器或者导航菜单。 首先,`...

    jQuery穿梭框左右列表添加删除代码

    **jQuery穿梭框(Transfer Box)** 是一个常见的前端交互组件,它允许用户在两个列表之间移动条目,常用于数据的双向选择,如角色分配、权限设置等场景。本示例着重讲解如何利用jQuery实现这样的功能,同时支持多选...

    jquery实现 左右 双向选择器 挺好用

    在给定的资源中,“jquery实现 左右 双向选择器 挺好用”是一个利用jQuery创建的交互式用户界面组件,用于实现双向选择功能。这种组件常见于需要用户在两个列表之间转移选项的场景,例如在“已选”和“可选”之间...

    jQuery左右列表选项框代码.zip

    在这个"jQuery左右列表选项框代码.zip"压缩包中,包含了一个利用jQuery实现的交互式功能,即左右列表选项框。这种设计常用于用户在两个列表之间转移选项,例如在选择联系人或者分配权限时。以下是关于这个功能的详细...

Global site tag (gtag.js) - Google Analytics