
<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>


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

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

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

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

两个select之间的元素互相移动并保持顺序

//HTML:

//JS:

猜你喜欢