<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. 两个Select 之间的值的传递

    运行效果: 下面是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML ...

  3. python基础===两个list之间移动元素

    首先我们先了解一下list的几个常用函数: a = [123,456,"tony","jack"] #list中增加元素a.append("www&q ...

  4. activity生命周期分析(两个activity之间跳转的生命周期执行顺序)

    NoteMainActivity点击跳转至NoteListActivity 我们都了解: 当A界面点击进入B界面时,此时         A===onPause--->onStop       ...

  5. 软件项目技术点(1)——d3.interpolateZoom-在两个点之间平滑地缩放平移

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 软件参考d3的知识点 我们在软件中主要用到d3.js的核心函数d3.interpolateZoom - 在两个点之间平滑地缩放平移.请 ...

  6. JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  7. DOM的小练习,两个表格之间数据的移动

    本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head>   <meta http-equiv="Content-Type" ...

  8. sql返回两个日期之间的日期_函数实现

    -- Description:返回两段日期之间的所有日期    <Description,,>-- ============================================ ...

  9. Oracle 两个表之间更新的实现

    Oracle 两个表之间更新的实现   来源:互联网 作者:佚名 时间:2014-04-23 21:39 Oracle中,如果跨两个表进行更新,Sql语句写成这样,Oracle 不会通过.查了资料,S ...

随机推荐

  1. Ubuntu-Tweak 安装

    Ubuntu Tweak 是中国人开发的一款专门为Ubuntu准备的配置.调整工具,类似与compiz,界面更友好.   下面是安装命令:   第一步:添加tweak源 sudo add-apt-re ...

  2. Spinner的简单使用

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. leetcode-53.最大子序和

    leetcode-53.最大子序和 题意 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,- ...

  4. 使用Visual Studio Team Services持续集成(四)——使用构建运行测试

    使用Visual Studio Team Services持续集成(四)--使用构建运行测试 使用构建来运行测试来验证集成是一个很好的实践. MyHealth.API.IntegrationTests ...

  5. Android 官方DEMO BasicNetworking

    本示例演示如何使用Android API检查网络连接. Demo下载地址:https://github.com/googlesamples/android-BasicNetworking/#readm ...

  6. SSL里的certificate格式资料小结

    在查看相关报文的时候,发现RFC5246本身并没有对certificate的格式AlgorithmIdentifier作深入的介绍,只说其格式必须是X509v3 DER表示,思虑良久才找到方向:后者的 ...

  7. 决策树ID3算法的java实现(基本适用所有的ID3)

    已知:流感训练数据集,预定义两个类别: 求:用ID3算法建立流感的属性描述决策树 流感训练数据集 No. 头痛 肌肉痛 体温 患流感 1 是(1) 是(1) 正常(0) 否(0) 2 是(1) 是(1 ...

  8. mssql sqlserver 批量删除所有存储过程的方法分享

    转自:http://www.maomao365.com/?p=6864 摘要: 下文讲述采用sql脚本批量删除所有存储过程的方法,如下所示: 实验环境:sqlserver 2008 R2 平常使用sq ...

  9. Nginx 出现 403 Forbidden 最终解决

    Nginx 出现 403 Forbidden 最终解决 步骤一: 检查目录权限.权限不足的就加个权限吧. 例子:chmod -R 755 / var/www 步骤二: 打开nginx.conf 例子: ...

  10. Asp.Net WebApi 项目及依赖整理

    一.目前版本 Microsoft ASP.NET Web API 2.2 对应程序集版本5.2.3 二.默认生成的配置文件中的内容 <packages> <package id=&q ...