0

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

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

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

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

4

1 回答 1

0

事实证明，做到这一点的方法是通过操作 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;
});
于 2013-09-17T22:17:58.337 回答