<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; 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 写一个双击触发方法 *********************************************************** 学习永远不晚。——高尔基 ***********************************************************