jquery制作select列表双向选择示例代码

首页

web前端

js教程

jquery制作select列表双向选择示例代码_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:37 PM

select 列表

jquery制作的select列表双向选择，兼容性肯定是不错的，需要的朋友可以学习下

<!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 &#63; jQuery("#btn_1").removeAttr("disabled") : jQuery("#btn_1").attr("disabled","disabled"); 
jQuery("#sel_left option:selected").length > 0 &#63; jQuery("#btn_2").removeAttr("disabled") : jQuery("#btn_2").attr("disabled","disabled"); 
jQuery("#sel_right option:selected").length > 0 &#63; jQuery("#btn_3").removeAttr("disabled") : jQuery("#btn_3").attr("disabled","disabled"); 
jQuery("#sel_right>option").length > 0 &#63; 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>

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7637

CakePHP 教程

1391

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

150

显示更多

Related knowledge

如何使用Python从列表中删除方括号 Sep 05, 2023 pm 07:05 PM

Python是一款非常有用的软件，可以根据需要用于许多不同的目的。Python可以用于Web开发、数据科学、机器学习等许多其他需要自动化处理的领域。它具有许多不同的功能，可以帮助我们执行这些任务。Python列表是Python的一个非常有用的功能之一。顾名思义，列表包含您希望存储的所有数据。它基本上是一组不同类型的信息。删除方括号的不同方法许多时候，用户会遇到列表项显示在方括号中的情况。在本文中，我们将详细介绍如何去掉这些括号，以便更好地查看您的列表。字符串和替换函数删除括号的最简单方法之一是在

如何使用Python的count()函数计算列表中某个元素的数量 Nov 18, 2023 pm 02:53 PM

如何使用Python的count()函数计算列表中某个元素的数量，需要具体代码示例Python作为一种强大且易学的编程语言，提供了许多内置函数来处理不同的数据结构。其中之一就是count()函数，它可以用来计算列表中某个元素的数量。在本文中，我们将详细介绍如何使用count()函数，并提供具体的代码示例。count()函数是Python的内置函数，用于计算某

制作 iPhone 上 iOS 17 提醒应用程序中的购物清单的方法 Sep 21, 2023 pm 06:41 PM

如何在iOS17中的iPhone上制作GroceryList在“提醒事项”应用中创建GroceryList非常简单。你只需添加一个列表，然后用你的项目填充它。该应用程序会自动将您的商品分类，您甚至可以与您的伴侣或扁平伙伴合作，列出您需要从商店购买的东西。以下是执行此操作的完整步骤：步骤1：打开iCloud提醒事项听起来很奇怪，苹果表示您需要启用来自iCloud的提醒才能在iOS17上创建GroceryList。以下是它的步骤：前往iPhone上的“设置”应用，然后点击[您的姓名]。接下来，选择i

我们可以在Java列表中插入空值吗？ Aug 20, 2023 pm 07:01 PM

SolutionYes,Wecaninsertnullvaluestoalisteasilyusingitsadd()method.IncaseofListimplementationdoesnotsupportnullthenitwillthrowNullPointerException.Syntaxbooleanadd(Ee)将指定的元素追加到此列表的末尾。类型参数E −元素的运行时类型。参数e −要追加到此列表的元

创建杂货清单的方法：使用 iPhone 的'提醒事项”App Dec 01, 2023 pm 03:37 PM

在iOS17中，Apple在提醒应用程序中添加了一个方便的小列表功能，以便在您外出购买杂货时为您提供帮助。继续阅读以了解如何使用它并缩短您的商店之旅。当您使用新的“杂货”列表类型（在美国以外名为“购物”）创建列表时，您可以输入各种食品和杂物，并按类别自动组织它们。该组织使您在杂货店或外出购物时更容易找到您需要的东西。提醒中可用的类别类型包括农产品、面包和谷物、冷冻食品、零食和糖果、肉类、乳制品、鸡蛋和奶酪、烘焙食品、烘焙食品、家居用品、个人护理和健康以及葡萄酒、啤酒和烈酒。以下是在iOS17中创

Del和remove()在Python中的列表上有什么区别？ Sep 12, 2023 pm 04:25 PM

在讨论差异之前，让我们先了解一下Python列表中的Del和Remove()是什么。Python列表中的Del关键字Python中的del关键字用于从List中删除一个或多个元素。我们还可以删除所有元素，即删除整个列表。示例使用del关键字从Python列表中删除元素#CreateaListmyList=["Toyota","Benz","Audi","Bentley"]print("List="

使用Python根据列表创建多个目录 Sep 08, 2023 am 08:21 AM

Python凭借其简单性和多功能性，已成为各种应用程序中最流行的编程语言之一。无论您是经验丰富的开发人员还是刚刚开始编码之旅，Python都提供了广泛的功能和库，使复杂的任务变得易于管理。在本文中，我们将探讨一个实际场景，Python可以通过自动执行基于列表创建多个目录的过程来帮助我们。通过利用Python内置模块和技术的强大功能，我们可以有效地处理此任务，而无需手动干预。在本教程中，我们将深入研究创建多个目录的问题，并为您提供使用Python解决该问题的不同方法。在本文结束时，我们的目标是为您

jquery如何隐藏select元素 Aug 15, 2023 pm 01:56 PM

jquery隐藏select元素的方法：1、hide()方法，在HTML页面中引入jQuery库，可以使用不同选择器来隐藏select元素，ID选择器将selectId替换为你实际使用的select元素的ID；2、css()方法，使用ID选择器选择需要隐藏的select元素，使用css()方法将display属性设置为none，并将selectId替换为select元素的ID。

See all articles

jquery制作select列表双向选择示例代码_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题