Question

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

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

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

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

Answer 1

事实证明，这样做的方法是操纵HTML元素，而不是影响multiselect 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;
});

如何以编程方式重新排序我的jQuery multiselect？

1 个答案: