如何以编程方式重新排序我的 jQuery 多选？答案

【问题标题】：How do I programmatically reorder my jQuery multiselect?如何以编程方式重新排序我的 jQuery 多选？
【发布时间】：2013-09-17 21:45:33
【问题描述】：

我正在使用ui.multiselect.js 来设置我的多选样式。两边都是可拖动的，左边是可排序的，这不能改变。我想要做的是点击一个按钮，并让该按钮将我的四个选择（称为a, b, c, d）从右向左移动，按a, d, b, c 的顺序显示（并存储在$('#mySelect').val() 中）。

我可以很容易地让选择向左移动，但是改变它们的顺序让我很难过。我已经告诉_moveOptionNode(item) 函数回显其相关内容，但后来我意识到，因为它只接受一个不是很有用的参数。该函数可以选择调用.insertAfter() 和.prependTo()，但到目前为止，直接调用它们也没有给我带来任何运气。

根据过去的经验，我知道$('#mySelect').val() 中选定选项的顺序将随着视觉效果一起更新，这对我正在做的事情很重要，但我也知道在ui.multiselect.js 的当前版本中，我无法先更新$('#mySelect').val() 的顺序。所以我显然需要一种方法来模拟拖动选项，或者让它开始按照我想要的方式排序。

我仍在努力，但到目前为止我还没有取得任何成功，我非常感谢这个社区可以提供的任何帮助。

【问题讨论】：

标签： jquery jquery-ui sorting multi-select

【解决方案1】：

事实证明，这样做的方法是通过操作 HTML 元素，而不是通过影响多选 ui 元素。我用这两行代码完成了它：

$(".selected li:contains('d')", $($('#mySelect').parent()[0])).insertAfter($(".selected li:contains('a')", $($('#mySelect').parent()[0])))

$("#mySelect option[value='d']").insertAfter($("#mySelect option[value='a']"))

当然，这种方法有一个明显的弱点，因为它会移动每个包含字母 d 的视觉元素，并在每个包含字母 a 的视觉元素之后复制它，但修复它只是一个改变我如何选择元素的问题。整体方法在这里真正重要，现在我已经掌握了，剩下的就是小菜一碟了。

编辑：这是我的最终代码：

var previtem = null;
var prevvalue = '';
$.each(values, function(i, item) {
    var text = $("#mySelect option[value='"+item+"']").text();
    $('#mySelect').multiselect("select", text);
    $.each($('.selected li:contains('+text+')', $($('#mySelect').parent()[0])), function(i, item) {
        if ($(item).text() == text) {
            // We only move it if it's not the first one in
            // By definition it won't be moved to the start, so this will always work
            if (previtem != null) {
                $(item).insertAfter(previtem);
            }
            previtem = $(item);
        }
    });
    // Again, only move the option if it's not the first one in
    if (prevvalue != '')
        $("#mySelect option[value='"+item+"']").insertAfter($("#mySelect option[value='"+prevvalue+"']"));
    prevvalue = item;
});

【讨论】：