<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

//HTML:

<body>

    <div

        style="border: 1px dashed #E6E6E6; margin: 150px 0px 0px 450px; width: 350px; height: 200px; background-color: #E6E6E6;">

        <table width="285" height="169" border="0" align="left"

            cellpadding="0" cellspacing="0" style="margin: 15px 0px 0px 15px;">

            <tr>

                <td width="126">

                    <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--> <select

                    name="first" multiple="multiple" size=10 class="td3" id="s">

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项1">1选项1</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项2">2选项2</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项3">3选项3</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项4">4选项4</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项8">8选项8</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项A">A选项A</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项6">6选项6</option>

                    <option ondblclick="MoveSelectedOption(this,'second')" value="选项7">7选项7</option>

                </select>

                </td>

                <td width="127" align="left">

                    <select name="second" size="10"

                    multiple="multiple" class="td3" id="second">

                        <option ondblclick="MoveSelectedOption(this,'s')" value="选项9">9选项9</option>

                    </select>

                </td>

            </tr>

        </table>

    </div>

</body>

//JS:

<script src="/static/js/jquery_1.12.4_jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

    });

    function BindSelectSortElement(target_id, source_id) {

        // 排序select 下option元素

        let arr_text = [];    // 用于获取option text值

        let arr_val = {};     // 用于获取原option vlaue值

        $("#"+ target_id + ' option').each(function () {

            arr_text.push(this.text);

            arr_val[this.text] = this.value

        });

        arr_text_sort = arr_text.sort(function(a,b){return a.toString().localeCompare(b)});    // 排序option text值

        console.log(arr_text_sort);

        $("#"+ target_id).empty();    // 清空目标select标签下的所有对象

        $.each(arr_text_sort, function (k, v) {

            let option = "<option value='" + arr_val[v] +"'ondblclick=MoveSelectedOption(this,'"+ source_id +"') >" + v +"</option>";

            $("#"+ target_id).append(option);    // 将排序后的option 重新添加至select标签下

        })

    }

    function  MoveSelectedOption(ele,target_id) {

　　　　　// 移动select元素

        let source_id = $(ele).parent().attr('id');

        let option = "<option value='" + $(ele).val() +"'ondblclick=MoveSelectedOption(this,'"+ source_id +"') >" + $(ele).text() +"</option>";

        $("#"+ target_id).append(option);

        $(ele).remove();

        BindSelectSortElement(target_id, source_id)    // 移动后重新排序显示

    }

</script>

</html>

备注：可以方法比较笨，如有简单的方法还请各位看客告知，谢谢！

　　　具体细节可以在进一步优化，比如触发方法可以通过jQuery的选择option后点击触发，不需要每个option 写一个双击触发方法

***********************************************************

 学习永远不晚。——高尔基

***********************************************************


												


											
两个select之间的元素互相移动并保持顺序的更多相关文章
	

    
								
  1. jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
		
    jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val();  //选择被选中Radio的Val ...
    
		
    2. 
						
  2. 两个Select 之间的值的传递
		
    运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...
    
		
    3. 
						
  3. python基础===两个list之间移动元素
		
    首先我们先了解一下list的几个常用函数: a = [123,456,"tony","jack"] #list中增加元素a.append("www&q ...
    
		
    4. 
						
  4. activity生命周期分析（两个activity之间跳转的生命周期执行顺序）
		
    NoteMainActivity点击跳转至NoteListActivity 我们都了解: 当A界面点击进入B界面时,此时         A===onPause--->onStop        ...
    
		
    5. 
						
  5. 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移
		
    AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...
    
		
    6. 
						
  6. JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）
		
    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
    
		
    7. 
						
  7. DOM的小练习，两个表格之间数据的移动
		
    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...
    
		
    8. 
						
  8. sql返回两个日期之间的日期_函数实现
		
    -- Description:返回两段日期之间的所有日期    <Description,,>-- ============================================ ...
    
		
    9. 
						
  9. Oracle 两个表之间更新的实现
		
    Oracle 两个表之间更新的实现   来源:互联网 作者:佚名 时间:2014-04-23 21:39 Oracle中,如果跨两个表进行更新,Sql语句写成这样,Oracle 不会通过.查了资料,S ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. （python）数据结构---字符串
			
    一.概述 由一个个字符组成的有序序列. 使用单引号.双引号.三引号引住的字符序列. 不可变.线性的数据结构. 二.字符串的相关操作 1.元素访问----下标 字符串是线性的数据结构,可以使用索引去访问 ...
    
			
    2. 
						
  2. C#-封装（七）
			
    封装概念 C#是面向对象的一门语言,面向对象的语言有三大特性:封装.继承.多态.而封装可以实现一个自定义的类,从而定义新的对象 封装是将一个或多个项目集合在一个单元中,这个单元称之为类.这样可以防止对 ...
    
			
    3. 
						
  3. Oracle EBS R12 GL_IMPORT_REFERENCES 映射
			
    非原创. 转自出处: http://alloracleapps.com/oracle_apps/gl_import_references-columns-mapping-11i-vs-r12/
    
			
    4. 
						
  4. EOS智能合约开发(一)：EOS环境搭建和启动节点
			
    EOS和以太坊很像,EOS很明确的说明它就是一个区块链的操作系统,BM在博客中也是说过的. 可以这样比喻,EOS就相当于内置激励系统的Windows/Linux/MacOS,这是它的一个定位. 包括以 ...
    
			
    5. 
						
  5. C#实现CRC校验
			
    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web;  ...
    
			
    6. 
						
  6. Lua中的#
			
    Lua中的 对字符串来说,#取字符串的长度,但对于table需要注意. lua的table可以用数字或字符串等作为key, #号得到的是用整数作为索引的最开始连续部分的大小, 如果t[1] == ni ...
    
			
    7. 
						
  7. 磁盘测试工具FIO工具安装和使用方法
			
    一.FIO工具安装: 1.查看fio是否安装 [root@localhost /]#rpm –qa|grep fio 2.源码安装(推荐) 官网地址:http://freecode.com/proje ...
    
			
    8. 
						
  8. NodeJS二进制包安装和快捷键配置(适用于U盘版安装配置)
			
    首先下载NodeJS二进制安装包:https://nodejs.org/dist/v10.15.3/node-v10.15.3-win-x64.zip 在D盘新建NodeJS文件夹,解压node-v1 ...
    
			
    9. 
						
  9. 排序算法之直接插入排序的思想以及Java实现
			
    1,基本思想 假设待排序的数据是数组A[1-.n].初始时,A[1]自成1个有序区,无序区为A[2-.n].在排序的过程中,依次将A[i] (i=2,3,-.,n)从后往前插入到前面已排好序的子数组A ...
    
			
    10. 
						
  10. 【大数据技术】HBase介绍
			
    1.HBase简介1.1 Hbase是什么HBase是一种构建在HDFS之上的分布式.面向列.多版本.非关系型的数据库,是Google Bigtable 的开源实现. 在需要实时读写.随机访问超大规模 ...
    
			
    11.