<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">
<select
name="first" multiple="multiple" size=10 class="td3" id="s">
<option ondblclick="MoveSelectedOption(this,'second')" value="选项1">1选项1option>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项2">2选项2option>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项3">3选项3option>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项4">4选项4option>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项8">8选项8option>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项A">A选项Aoption>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项6">6选项6option>
<option ondblclick="MoveSelectedOption(this,'second')" value="选项7">7选项7option>
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选项9option>
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 = "";
$("#"+ target_id).append(option); // 将排序后的option 重新添加至select标签下
})
}
function MoveSelectedOption(ele,target_id) {
// 移动select元素
let source_id = $(ele).parent().attr('id');
let option = "";
$("#"+ target_id).append(option);
$(ele).remove();
BindSelectSortElement(target_id, source_id) // 移动后重新排序显示
}
script>
html>
备注：可以方法比较笨，如有简单的方法还请各位看客告知，谢谢！
具体细节可以在进一步优化，比如触发方法可以通过jQuery的选择option后点击触发，不需要每个option 写一个双击触发方法
***********************************************************
学习永远不晚。——高尔基
***********************************************************