jquery获取select项并移动到另一个select里

用了jquery和bootstrap5。
如下项的左侧可移动到右侧,右侧可移动到左侧。
在这里插入图片描述

div代码如下

 <div class="input-group mb-3"><span class="input-group-text">可用节点</span><select class="form-select service-type" id="sel1" multiple size="9" name="sellist1"><option value="">全部服务</option><option value="map-rest">地图服务</option><option value="data-rest">数据服务</option><option value="3D-rest">三维服务</option><option value="spatialAnalysis-restjsr">空间分析服务</option><option value="transportNetworkAnalyst-rest">网络分析服务</option><option value="trafficTransferAnalyst-restjsr">交通换乘服务</option><option value="networkAnalyst3D-rest">三维网络分析服务</option><option value="addressMatch-restjsr">地址匹配服务</option><option value="map-restjsr">矢量瓦片服务</option><option value="plot-rest">动态标绘服务</option><option value="wmts100">wmts1.0服务</option><option value="wfs100">wfs1.0服务</option><option value="wfs200">wfs2.0服务</option></select><div class="row" style="padding: 50px"><input type="button" class="btn btn-secondary row gx-1 gy-md-5" id="nodetoright" value=">>"></input><input type="button" class="btn btn-secondary row gx-1 gy-md-5" id="nodetoleft" value="<<"></input></div><span class="input-group-text">目标节点</span><select class="form-select service-type" id="sel2" multiple size="9" name="sellist1"></select></div>

JS代码如下

   $("#nodetoright").click(function () {
// 获取所有选中的选项var selectedOptions = $('#sel1 option:selected');
// 遍历选中的选项并将其添加到目标select元素中selectedOptions.each(function () {var option = $(this).clone();$('#sel2').append(option);});
// 从源select元素中移除已选中的选项selectedOptions.remove();});$("#nodetoleft").click(function () {
// 获取所有选中的选项var selectedOptions = $('#sel2 option:selected');
// 遍历选中的选项并将其添加到目标select元素中selectedOptions.each(function () {var option = $(this).clone();$('#sel1').append(option);});
// 从源select元素中移除已选中的选项selectedOptions.remove();});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645326.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp组件库Modal 模态框 的使用方法

目录 #平台差异说明 #基本使用 #传入富文本内容 #异步关闭 #点击遮罩关闭 #控制模态框宽度 #自定义样式 #缩放效果 #API #Props #Event #Method #Slots 弹出模态框&#xff0c;常用于消息提示、消息确认、在当前页面内完成特定的交互操作。 #平台差异说明 AppH5微…

modbus poll测试工具测试modbus tcp与PLC设备连接使用方法

socket默认端口是502&#xff0c;socket连上之后&#xff0c; 按照modbuspoll工具设置的读写参数 生成的RTU命令格式去组装读PLC的设备数据 modbuspoll工具配置&#xff0c;以v9.9.2中文破解版为例&#xff1a; 首先点连接菜单&#xff08;connection&#xff09;建立连接&…

反射式编程中,Mono和Flux两个类的区别

在响应式编程框架如Project Reactor中&#xff0c;Mono和Flux是两个核心类&#xff0c;它们都实现了Reactive Streams规范的Publisher接口&#xff0c;用于处理异步数据流。 1. Mono&#xff1a; Mono代表的是0或1个元素的数据序列。换句话说&#xff0c;它表示的是未来可能产…

for循环延时时间计算

​ 文章目录 前言一、计算方式二、for循环 2.1 for循环里定义变量2.2 codeblock设置C99标准 三、四、总结 前言 之前做led点亮的实验&#xff0c;好像是被delay函数影响了&#xff0c;因为delay参数设置的不对&#xff0c;led没有正常闪烁。现在就想搞明白一些。 一、计算…

Fluent Bit配置与使用——基于版本V2.2.2

Fluent Bit日志采集终端 文档适用版本&#xff1a;V2.2 1、日志文件处理流程 数据源是一个普通文件&#xff0c;其中包含 JSON 内容&#xff0c;使用tail插件记录日志&#xff0c;通过parsers进行格式化匹配&#xff08;图里没写&#xff09;&#xff0c;通过两个筛选器&…

[150] 逆波兰表达式求值 js

题目描述&#xff1a; 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 * * 请你计算该表达式。返回一个表示表达式值的整数。 逆波兰表达式&#xff1a; * * 逆波兰表达式是一种后缀表达式&#xff0c;所谓后缀就是指算符写在后面。 *…

新能源汽车智慧充电桩管理方案:环境监测与充电安全多维感知

随着新能源技术的不断发展&#xff0c;新能源充电桩作为电动汽车的重要基础设施&#xff0c;其管理和维护变得尤为重要。环境监测类传感器能够实时监测充电桩周围的环境参数&#xff0c;如温度、湿度等&#xff0c;为管理人员提供及时、准确的数据&#xff0c;以便做出相应的调…

JS之歌词滚动案例

让我为大家带来一个歌词滚动的案例吧&#xff01; 详细的介绍都在代码块中 我很希望大家可以自己动手尝试一下&#xff0c;如果需要晴天的mp3音频文件可以私信我 上代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…

C++类和对象_C++回顾

面向对象和面向过程的区别 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题。 C是基于面向对象的&#xff0c;关注的是对象&#xff0c;将一件事情拆分成不同的对象&#xff0c;靠对象之间的交互完成。 类…

Excel·VBA时间范围筛选及批量删除整行

看到一个帖子《excel吧-筛选开始时间&#xff0c;结束时间范围内的所有记录》&#xff0c;根据条件表中的开始时间和结束时间构成的时间范围&#xff0c;对数据表中的开始时间和结束时间范围内的数据进行筛选 目录 批量删除整行&#xff0c;整体删除批量删除整行&#xff0c;分…

LeetCode 2865. 美丽塔 I,前后缀分离+单调栈

一、题目 1、题目描述 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeight…

HTML+CSS:炫酷登录切换

效果演示 实现了一个登录注册页面的切换效果&#xff0c;当用户点击登录或注册按钮时&#xff0c;会出现一个叠加层&#xff0c;其中包含一个表单&#xff0c;用户可以在表单中输入用户名和密码&#xff0c;然后点击提交按钮进行登录或注册。当用户点击返回按钮时&#xff0c;会…

操作系统----操作系统的特征

目录 1.并发&#xff1a; 2.共享&#xff1a; 3.虚拟&#xff1a; 4.异步&#xff1a; 操作系统包括以下4个特征&#xff1a;并发&#xff0c;共享&#xff0c;虚拟&#xff0c;异步 1.并发&#xff1a; 指两个或多个事件在同一时间间隔内发生。这些事件宏观上是同时发生…

边缘计算:挑战与机遇的平衡艺术

前言 边缘计算作为云计算的补充&#xff0c;通过在数据源近处进行数据处理&#xff0c;已经成为实现物联网&#xff08;IoT&#xff09;、自动驾驶、智慧城市等应用的重要技术。然而&#xff0c;边缘计算的发展和普及也面临不少挑战&#xff0c;同时也带来了巨大的机遇。 方向…

【Android】Android中的系统镜像由什么组成?

文章目录 总览Boot Loader 的加锁与解锁Boot 镜像内核RAM diskARM 中的设备树 (Device Tree) /System 和/Data 分区镜像参考 总览 各种Android设备都只能刷专门为相应型号的设备定制的镜像。 厂商会提供一套系统镜像把它作为“出厂默认”的 Android 系统刷在设备上。 一个完…

SpringCloudAlibaba系列之Nacos实战

目录 注意事项 参考资源 Nacos配置中心 初始化项目 进行Nacos相关配置 运行 Nacos注册中心 dubbo方式 对外暴露接口dubbo-api 服务提供者dubbo-provider 服务消费者dubbo-consumer 负载均衡客户端方法 服务提供者 服务消费者 注意事项 不管是使用Nacos配置中心&…

代码随想录 Leetcode144/94/145 二叉树的前/中/后序遍历

题目&#xff1a; 前&#xff1a; 中&#xff1a; 后&#xff1a; 代码&#xff08;首刷自解 2024年1月24日&#xff09;&#xff1a; //前序遍历&#xff0c;递归 class Solution { public:void funcOfRecursion(TreeNode* cur, vector<int>& vec) {if (cur null…

MySQL深入——16

MySQL如何保持高可用&#xff1f;&#xff1f; 主备延迟 主备延迟分为两类&#xff0c;一类主动比如软件升级&#xff0c;主库所在机器按照计划下线等&#xff0c;另外一类是被动&#xff0c;比如主库所在机器掉电。 在看这个概念之前&#xff0c;我们先来看看“同步延迟”&…

谈谈 RocketMQ 5.0 分级存储背后一些有挑战的技术优化

作者&#xff1a;斜阳 RocketMQ 5.0 提出了分级存储的新方案&#xff0c;经过数个版本的深度打磨&#xff0c;RocketMQ 的分级存储日渐成熟&#xff0c;并成为降低存储成本的重要特性之一。事实上&#xff0c;几乎所有涉及到存储的产品都会尝试转冷降本&#xff0c;如何针对消…

张量计算和操作

一、数据操作 1、基础 import torchx torch.arange(12) # x:tensor([ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])x.shape # torch.Size([12])x.numel() # 12x x.reshape(3, 4) # tensor([[ 0, 1, 2, 3], # [ 4, 5, 6, 7], # [ 8, 9, 10, 11]])torch.zeros((2…