关于下拉框左右选择的实例代码-html教程-PHP中文网

首页

web前端

html教程

关于下拉框左右选择的实例代码

零下一度

Jul 18, 2017 pm 01:40 PM

下拉左右选择

//下拉框左右选择

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.left, .right {float: left;height: 250px;width: 120px;margin-left: 10px;}#select1, #select2 {height: 200px;width: 120px;}</style><script src="js/jquery-1.11.3.min.js?1.1.11"></script><script>   $(function () {
           $("#buttonl1").click(function () {
               $('#select1 option:selected').appendTo('#select2');

           });
           $("#buttonl2").click(function () {               var $reall=$("#select1 option");
              $reall.appendTo($("#select2"));
           })
           $("#buttonr1").click(function () {
               $("#select2 option:selected").appendTo("#select1");
           })
           $("#buttonr2").click(function () {               var $reall=$("#select2 option");
               $reall.appendTo($("#select1"));
           })           //双击选项           $('#select1').dblclick(function(){ //绑定双击事件   //获取全部的选项,删除并追加给对方               $("option:selected",this).appendTo('#select2'); //追加给对方           });           //双击选项           $('#select2').dblclick(function(){
               $("option:selected",this).appendTo('#select1');
           });

       })</script>
       </head>
       <body>
       <div class="left"><select name="select1" id="select1" multiple="multiple">
       <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>
       <input type="button" value="选中添加到右边&gt;&gt;" id="buttonl1">
       <input type="button" value="全部添加到右边&gt;&gt;" id="buttonl2"></div><div class="right"><select name="select2" id="select2" multiple="multiple"><option value="8">选项8</option></select><input type="button" value="&lt;&lt;选中删除到左边" id="buttonr1"><input type="button" value="&lt;&lt;全部删除到左边" id="buttonr2"></div></body></html>

以上是关于下拉框左右选择的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

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

iBatis和MyBatis：哪个更适合你？Feb 19, 2024 pm 04:38 PM

iBatis与MyBatis：你应该选择哪个？简介：随着Java语言的快速发展，许多持久化框架也应运而生。iBatis和MyBatis是两个备受欢迎的持久化框架，它们都提供了一种简单而高效的数据访问解决方案。本文将介绍iBatis和MyBatis的特点和优势，并给出一些具体的代码示例，帮助你选择合适的框架。iBatis简介：iBatis是一个开源的持久化框架

CS玩家的首选：推荐的电脑配置Jan 02, 2024 pm 04:26 PM

1.处理器在选择电脑配置时，处理器是至关重要的组件之一。对于玩CS这样的游戏来说，处理器的性能直接影响游戏的流畅度和反应速度。推荐选择IntelCorei5或i7系列的处理器，因为它们具有强大的多核处理能力和高频率，可以轻松应对CS的高要求。2.显卡显卡是游戏性能的重要因素之一。对于射击游戏如CS而言，显卡的性能直接影响游戏画面的清晰度和流畅度。建议选择NVIDIAGeForceGTX系列或AMDRadeonRX系列的显卡，它们具备出色的图形处理能力和高帧率输出，能够提供更好的游戏体验3.内存电

红米Redmi K70如何打开存储权限？Feb 23, 2024 pm 12:30 PM

红米RedmiK70是很多用户们都在使用的机型，这款手机自从发布以来一直都保持着很不错的口碑，拥有着超高的性价比。当然，除了性价比以外，红米RedmiK70还有着许多非常实用的功能。那么红米RedmiK70怎么打开存储权限呢？接下来就让小编来为大家介绍一下吧！红米RedmiK70怎么打开存储权限？要打开红米RedmiK70的存储权限，你可以按照以下步骤操作：步骤一：打开手机的设置应用。步骤二：向下滚动并找到“应用管理”或“应用和通知”，然后点击进入。步骤三：在应用管理中，找到你想要打开存储权限的

kafka可视化工具对比分析：如何选择最合适的工具？Jan 05, 2024 pm 12:15 PM

如何选择合适的Kafka可视化工具？五款工具对比分析引言：Kafka是一种高性能、高吞吐量的分布式消息队列系统，被广泛应用于大数据领域。随着Kafka的流行，越来越多的企业和开发者需要一个可视化工具来方便地监控和管理Kafka集群。本文将介绍五款常用的Kafka可视化工具，并对比它们的特点和功能，帮助读者选择适合自己需求的工具。一、KafkaManager

揭秘Pip镜像源：如何选择最适合个人需求的镜像源？Jan 16, 2024 am 09:26 AM

Pip镜像源大揭秘：如何选择最适合你的镜像源？简介：Pip是Python中最常用的软件包管理工具之一，能够方便地安装、升级和移除Python包。在使用Pip的过程中，选择适合自己的镜像源可以显著提高安装速度和稳定性。本文将为大家介绍常见的几种镜像源，并提供具体的代码示例，以便读者可以轻松选择最适合自己的镜像源。一、什么是镜像源？在使用Pip

Win11 24H2更新失败了解决方法？Win11 24H2更新失败了问题解析Feb 23, 2024 am 10:30 AM

Win1124H2更新失败了怎么办是很多用户们在询问的一个问题，可能是用户们的硬件要求不足的情况，由于现在还没正式发布Win1124H2版本，用户们可以选择安装win1123h2的最新版本，下面就让本站来为用户们来仔细的介绍一下Win1124H2更新失败了问题解析吧。Win1124H2更新失败了问题解析可能是用户们的电脑硬件要求不足的情况，用户们可以下载石大师装机工具或者是系统之家装机工具来进行安装。但是由于现在win1124h2版本还没正式的发布，用户们可以选择安装win1123h2最新版本来

在大数据场景下的MySQL储存引擎选择：MyISAM、InnoDB、Aria对比分析Jul 24, 2023 pm 07:18 PM

在大数据场景下的MySQL储存引擎选择：MyISAM、InnoDB、Aria对比分析随着大数据时代的到来，传统的储存引擎在面对高并发、大数据量的情况下往往无法满足业务需求。MySQL作为最流行的关系型数据库管理系统之一，其储存引擎的选择显得尤为重要。在本文中，我们将对大数据场景下MySQL常用的储存引擎MyISAM、InnoDB、Aria进行对比分析，并给出

为什么学习Python是一个明智的职业选择？Sep 08, 2023 pm 01:45 PM

为什么学习Python是一个明智的职业选择？Python，作为一门易学易用且功能强大的编程语言，正日益成为职场人士的首选。无论你是初学者还是有一定编程经验的专业人士，学习Python都是一个明智的职业选择。本文将探讨学习Python的优势，并提供一些Python代码示例来帮助读者更好地理解。Python的易学性相比其他编程语言，Python具备非常低的学习曲

See all articles