当前位置: 首页 > news >正文

两个多选框(select)之间值的左右上下移动

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>两个多选框(select)之间值的左右上下移动</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script type="text/javascript">$(function () {$("#s1 option:first,#s2 option:first").attr("selected", true);$("#s1").dblclick(function () {var alloptions = $("#s1 option");var so = $("#s1 option:selected");if (so === null || so == "undefined") {return;}try {var a = (so.get(so.length - 1).index == alloptions.length - 1) ? so.prev().attr("selected", true) : so.next().attr("selected", true);} catch (e) {return;}$("#s2").append(so);});$("#s2").dblclick(function () {var alloptions = $("#s2 option");var so = $("#s2 option:selected");if (so === null || so == "undefined") {return;}try {var a = (so.get(so.length - 1).index == alloptions.length - 1) ? so.prev().attr("selected", true) : so.next().attr("selected", true);} catch (e) {return;}$("#s1").append(so);});$("#add").click(function () {var alloptions = $("#s1 option");var so = $("#s1 option:selected");var a = (so.get(so.length - 1).index == alloptions.length - 1) ? so.prev().attr("selected", true) : so.next().attr("selected", true);$("#s2").append(so);});$("#remove").click(function () {var alloptions = $("#s2 option");var so = $("#s2 option:selected");var a = (so.get(so.length - 1).index == alloptions.length - 1) ? so.prev().attr("selected", true) : so.next().attr("selected", true);$("#s1").append(so);});$("#addall").click(function () {$("#s2").append($("#s1 option").attr("selected", true));});$("#removeall").click(function () {$("#s1").append($("#s2 option").attr("selected", true));});$("#s1up").click(function () {var so = $("#s1 option:selected");if (so.get(0).index !== 0) {so.each(function () {$(this).prev().before($(this));});}});$("#s1down").click(function () {var alloptions = $("#s1 option");var so = $("#s1 option:selected");if (so.get(so.length - 1).index != alloptions.length - 1) {for (i = so.length - 1; i >= 0; i = 1 - 1) {var item = $(so.get(i));item.insertAfter(item.next());}}});$("#s2up").click(function () {var so = $("#s2 option:selected");if (so.get(0).index !== 0) {so.each(function () {$(this).prev().before($(this));});}});$("#s2down").click(function () {var alloptions = $("#s2 option");var so = $("#s2 option:selected");if (so.get(so.length - 1).index != alloptions.length - 1) {for (i = so.length - 1; i >= 0; i--) {var item = $(so.get(i));item.insertAfter(item.next());}}});});</script><table width="600" border="0" cellpadding="0" cellspacing="0"><tr><td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:200px" ,style="height:300px;"><option value="opt01">option01</option><option value="opt02">option02</option><option value="opt03">option03</option><option value="opt04">option04</option><option value="opt05">option05</option><option value="opt06">option06</option><option value="opt07">option07</option><option value="opt08">option08</option><option value="opt09">option09</option><option value="opt10">option10</option></select></td><td width="37" align="center"><input type="button" name="addall" id="addall" value=">|"/><br/><input type="button" name="add" id="add" value=">>"/><br/><input type="button" name="remove" id="remove" value="<<"/><br/><input type="button" name="removeall" id="removeall" value="|<"/></td><td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:200px height: 300px;"></select></td></tr>
</table></html>

 

相关文章:

两个多选框(select)之间值的左右上下移动

<!DOCTYPE html> <html> <head><meta charset"utf-8"><title>两个多选框(select)之间值的左右上下移动</title> </head> <script src"https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>&…...

【设计模式】——模板模式

什么是模板模式&#xff1f; 模板方法模式&#xff08;Template Method Pattern&#xff09;&#xff0c;又叫模板模式(Template Pattern)&#xff0c;在一个抽象类公开定义了执行它的方法的模板。它的子类可以按需要重写方法实现&#xff0c;但调用将以抽象类中定义的方式进行…...

工业机器视觉系统开发流程简介

需求分析和系统设计&#xff1a;与用户合作&#xff0c;明确系统的功能和性能需求&#xff0c;并设计系统的整体架构。 软、硬件选型&#xff1a;根据需求分析结果&#xff0c;选择适合的软、硬件设备&#xff0c;包括光学传感器、相机、光源、图像采集设备、处理器等。 软件…...

【Unity3D】Renderer Feature简介

1 3D 项目迁移到 URP 项目后出现的问题 3D 项目迁移至 URP 项目后&#xff0c;会出现很多渲染问题&#xff0c;如&#xff1a;材质显示异常、GL 渲染不显示、多 Pass 渲染异常、屏幕后处理异常等问题。下面将针对这些问题给出一些简单的解决方案。 URP 官方教程和 API 详见→Un…...

麻了!包含中科院TOP,共16本期刊被标记为“On Hold”状态!

近日&#xff0c;小编从科睿唯安旗下的“Master Journal List”官网查到&#xff0c;除了知名老牌期刊Chemosphere竟然被标记为“On Hold”状态&#xff0c;目前共有7本SCI期刊&#xff0c;1本SSCI期刊&#xff0c;8本ESCI期刊被标记为“On Hold”&#xff0c;究竟是怎么回事呢…...

2.Flink应用

2.1 数据流 DataStream&#xff1a;DataStream是Flink数据流的核心抽象&#xff0c;其上定义了对数据流的一系列操作DataStreamSource&#xff1a;DataStreamSource 是 DataStream 的 起 点 &#xff0c; DataStreamSource 在StreamExecutionEnvironment 中 创 建 &#xff0c;…...

Matlab进阶绘图第25期—三维密度散点图

三维密度散点图本质上是一种特征渲染的三维散点图&#xff0c;其颜色表示某一点所在区域的密度信息。 除了作图&#xff0c;三维密度散点图绘制的关键还在于密度的计算。 当然&#xff0c;不管是作图还是密度的计算&#xff0c;这些在《Matlab论文插图绘制模板》和《Matlab点…...

C++设计模式之桥接设计模式

文章目录 C桥接设计模式什么是桥接设计模式该模式有什么优缺点优点缺点 如何使用 C桥接设计模式 什么是桥接设计模式 桥接设计模式是一种结构型设计模式&#xff0c;它可以将抽象接口和实现分离开来&#xff0c;以便它们可以独立地变化和扩展。 该模式有什么优缺点 优点 灵…...

论文笔记:SUPERVISED CONTRASTIVE REGRESSION

2022arxiv的论文&#xff0c;没有中&#xff0c;但一作是P大图班本MIT博&#xff0c;可信度应该还是可以的 0 摘要 深度回归模型通常以端到端的方式进行学习&#xff0c;不明确尝试学习具有回归意识的表示。 它们的表示往往是分散的&#xff0c;未能捕捉回归任务的连续性质。…...

Java 多线程并发 CAS 技术详解

一、CAS概念和应用背景 CAS的作用和用途 CAS&#xff08;Compare and Swap&#xff09;是一种并发编程中常用的技术&#xff0c;用于解决多线程环境下的并发访问问题。CAS操作是一种原子操作&#xff0c;它可以提供线程安全性&#xff0c;避免了使用传统锁机制所带来的性能开…...

如何压缩高清PDF文件大小?将PDF文件压缩到最小的三个方法

PDF格式是一种非常常用的文档格式&#xff0c;但是有时候我们需要将PDF文件压缩为更小的大小以便于传输和存储。在本文中&#xff0c;我们将介绍三种PDF压缩的方法&#xff0c;包括在线PDF压缩、利用软件PDF压缩以及使用WPS缩小pdf。 首先&#xff0c;在线PDF压缩是最常用的方…...

04 统计语言模型(n元语言模型)

博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https://github.com/nickchen121/Pre-training-language-model 配套博客链接:https://www.cnblogs.com/nickchen121/p/15105048.html 预训练 预先训练 我们…...

Linux各目录详解

Linux文件系统是一个树状结构&#xff0c;由多个目录&#xff08;或文件夹&#xff09;组成。以下是常见的Linux目录及其功能的详细解释&#xff1a; /&#xff08;根目录&#xff09;&#xff1a;在Linux文件系统中&#xff0c;所有其他目录和文件都是从根目录派生的。所有的存…...

【css】属性选择器分类

属性选择器类型示例说明[attribute][target]选择带有 target 属性的所有元素[attributevalue][target_blank]选择带有 target“_blank” 属性的所有元素[attribute~value][title~flower]选择带有包含 “flower” 一词的 title 属性的所有元素[attribute|value][lang|en]选择带有…...

备份容灾哪家好怎么样

数字化时代&#xff0c;数据安全是我们不容忽视的问题。云呐容灾备份系统不仅提供了强大的数据保护功能&#xff0c;而且操作简单&#xff0c;使用方便。无论你是企业管理员&#xff0c;还是个人用户&#xff0c;都可以轻松上手。它还提供了丰富的报告和监控功能&#xff0c;让…...

【前端实习生备战秋招】—HTML 和 CSS面试题总结(三)

【前端实习生备战秋招】—HTML 和 CSS面试题总结&#xff08;三&#xff09; 1.行内元素有哪些&#xff1f;块级元素有哪些&#xff1f; 空(void)元素有那些&#xff1f; CSS 规范规定&#xff0c;每个元素都有 display 属性&#xff0c;确定该元素的类型&#xff0c;每个元素…...

Ansible Rsync 使用Ansible Rsync模块进行文件传输

在Ansible自动化工具中&#xff0c;Rsync模块&#xff08;Rsync Module&#xff09;是一个强大的组件&#xff0c;用于在Ansible控制节点和目标主机之间进行文件传输和同步。本文将深入探讨Ansible Rsync模块&#xff0c;了解它如何成为自动化任务中高效同步的自动化利器。 Ans…...

Eclipse如何自动添加作者、日期等注释

一、创建类时自动添加注释 1、Window->Preferences 2、Java->Code Syle->Code Templates->Code->New Java files->Edit->要添加的注释->Apply 二、选中要添加的类或者方法通过AltShiftJ快捷键添加 1、Window->Preferences 2、Java->Code Syle…...

uniapp返回

// 监听返回事件onNavigationBarButtonTap() {uni.showModal({title: 提示,content: 确定要返回吗&#xff1f;,success: (res) > {if (res.confirm) {uni.navigateBack({delta: 2})}}})},...

【Antd】antd form表单的rules文案无法跟随状态重渲染的原因及解决办法

问题背景 我有两个表单项&#xff0c;当我选择出库类型&#xff0c;调用onChange改变inOutType 状态&#xff0c;这时候发现这句代码不生效&#xff1a; rules{[{ required: true, message: 请选择${inOutType 1 ? 持有人 : 负责人} }]}示例代码 <TypographyForm.Group…...

别再让PowerBI报告挤成一团了!用按钮+书签,一个页面搞定趋势和明细分析

PowerBI交互设计进阶&#xff1a;用按钮与书签打造空间魔术 当业务分析报告遇上数据爆炸时代&#xff0c;信息过载与界面拥挤成为每个分析师挥之不去的噩梦。我曾见过某零售企业的季度分析仪表板——12个图表密密麻麻挤在A4纸大小的画布上&#xff0c;趋势线相互缠绕&#xff…...

UniAppX项目数据可视化升级:用lime-echart + ECharts打造高性能图表(从Vue2/Vue3到uni-app-x全流程)

UniAppX高性能数据可视化实战&#xff1a;lime-echart与ECharts的深度整合指南 当移动端数据可视化需求遭遇性能瓶颈时&#xff0c;UniAppX框架与lime-echart的组合正在成为技术决策者的新选择。本文将揭示如何在不同技术栈中实现图表渲染性能的突破性提升&#xff0c;从原理剖…...

用腾讯云轻量锐驰和对象存储,手把手教你30分钟搞定私人不限速网盘(附SSL证书配置)

零基础30分钟搭建高性能私人网盘&#xff1a;腾讯云轻量锐驰对象存储实战指南 你是否也受够了公有网盘动辄几百KB的下载速度&#xff1f;每次分享文件给朋友&#xff0c;对方总要忍受龟速下载的煎熬。更别提那些突然消失的文件和频繁弹出的会员广告——是时候拥有一个完全自主掌…...

OpenClaw量化对比:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF不同精度版本的自动化任务表现

OpenClaw量化对比&#xff1a;Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF不同精度版本的自动化任务表现 1. 测试背景与实验设计 去年在开发一个自动化文档处理流程时&#xff0c;我发现OpenClaw的任务成功率与底层模型量化精度密切相关。当时使用Q8版本处理Excel文…...

新手福音:在快马平台零基础上手加速库,轻松提速深度学习训练

新手福音&#xff1a;在快马平台零基础上手加速库&#xff0c;轻松提速深度学习训练 作为一个刚接触深度学习的新手&#xff0c;最头疼的莫过于环境配置和性能优化。最近我在InsCode(快马)平台上发现了一个超实用的功能——预置加速库的深度学习项目模板&#xff0c;让我这个小…...

如何用掩码生成蒸馏(MGD)提升小模型性能?实战ResNet-18到ImageNet分类

掩码生成蒸馏实战&#xff1a;如何让ResNet-18在ImageNet上提升1.8%准确率 在模型轻量化的浪潮中&#xff0c;知识蒸馏技术正经历着从简单模仿到特征重构的范式转变。当我们用ResNet-50这样的"大模型"指导ResNet-18等"小模型"训练时&#xff0c;传统方法往…...

OpenAI Agent SDK实战:5分钟搞定MCP协议接入(附完整代码)

OpenAI Agent SDK与MCP协议深度整合实战指南 在当今AI技术快速迭代的背景下&#xff0c;工具链的标准化与互操作性成为开发者面临的核心挑战之一。OpenAI推出的Agent SDK与MCP协议组合&#xff0c;为构建可扩展的智能体系统提供了工业级解决方案。本文将带您从零开始&#xff0…...

告别手推雅可比!用Ceres自动求导搞定SLAM中的BA优化(附完整代码)

告别手推雅可比&#xff01;用Ceres自动求导搞定SLAM中的BA优化&#xff08;附完整代码&#xff09; 在视觉SLAM系统的开发中&#xff0c;Bundle Adjustment&#xff08;BA&#xff09;优化是提升定位与建图精度的关键环节。传统实现需要手动推导复杂的雅可比矩阵&#xff0c;不…...

Meshroom三维重建实战指南:从图像到模型的全流程解析

Meshroom三维重建实战指南&#xff1a;从图像到模型的全流程解析 【免费下载链接】Meshroom 3D Reconstruction Software 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom Meshroom作为一款开源的3D重建软件&#xff0c;通过摄影测量技术将2D图像转化为精确的三维…...

FOC算法避坑指南:克拉克变换的‘等幅值’与‘等功率’到底怎么选?基于STM32的实测对比

FOC算法避坑指南&#xff1a;克拉克变换的‘等幅值’与‘等功率’到底怎么选&#xff1f;基于STM32的实测对比 在STM32平台上实现磁场定向控制&#xff08;FOC&#xff09;时&#xff0c;克拉克变换系数的选择往往让工程师陷入两难&#xff1a;究竟该用2/3&#xff08;等幅值&…...