jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移

2024-01-07 15:18
文章标签 javascript 元素 支持 select jquery 插件 frontend 左右 option 选框 上移 下移 multiselects

本文主要是介绍jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移

点击在新窗口中浏览此图片

在线预览

jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移

源码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MultiSelects(左右选框) 完美版</title>
<script src="http://demo.deeka.cn/limit2checked/jquery-1.2.6.pack.js"></script>
<script>
<!--
$(function(){
   $("#s1 option:first,#s2 option:first").attr("selected",true);
  
   $("#s1").dblclick(function(){
     var alloptions = $("#s1 option");
     var so = $("#s1 option:selected");

     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
    
     $("#s2").append(so);
   });
  
   $("#s2").dblclick(function(){
     var alloptions = $("#s2 option");
     var so = $("#s2 option:selected");
    
     so.get(so.length-1).index == alloptions.length-1?so.prev().attr("selected",true):so.next().attr("selected",true);
    
     $("#s1").append(so);
   });
  
   $("#add").click(function(){
     var alloptions = $("#s1 option");
     var so = $("#s1 option:selected");

     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");
    
     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--)
       {
         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>
</head>

<body>
<table width="288" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td width="29">
       <input type="button" name="s1up" id="s1up" value="↑" /><br />
     <input type="button" name="s1down" id="s1down" value="↓" /></td>
     <td width="100"><select name="s1" size="10" multiple="multiple" id="s1" style=" width:100px;">
       <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="&gt;|" /><br /><input type="button" name="add" id="add" value="&gt;&gt;" /><br /><input type="button" name="remove" id="remove" value="&lt;&lt;" /><br /><input type="button" name="removeall" id="removeall" value="|&lt;" /></td>
     <td width="100"><select name="s2" size="10" multiple="multiple" id="s2" style=" width:100px;">
     </select></td>
     <td width="119">
       <input type="button" name="s2up" id="s2up" value="↑" /><br />
     <input type="button" name="s2down" id="s2down" value="↓" /></td>
   </tr>
</table>
<p>支持直接双击添加/删除，上下(支持间隔)排序</p>
<p>jQuery Learning 群：24810664</p>
</body>
</html>

这篇关于jQuery插件---MultiSelects(左右选框)，支持select下option元素的上移下移的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/580341。

相关文章

C# 比较两个list 之间元素差异的常用方法

C# 比较两个list 之间元素差异的常用方法

《C#比较两个list之间元素差异的常用方法》：本文主要介绍C#比较两个list之间元素差异,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. 使用Except方法2. 使用Except的逆操作3. 使用LINQ的Join,GroupJoin
阅读更多...
浏览器插件cursor实现自动注册、续杯的详细过程

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机
阅读更多...
python3如何找到字典的下标index、获取list中指定元素的位置索引

python3如何找到字典的下标index、获取list中指定元素的位置索引

《python3如何找到字典的下标index、获取list中指定元素的位置索引》：本文主要介绍python3如何找到字典的下标index、获取list中指定元素的位置索引问题,具有很好的参考价值,... 目录enumerate()找到字典的下标 index获取list中指定元素的位置索引总结enumerat
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作（X86）1.准备工作（arm）2.手
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2