Question

我有2个多选框，如此链接中所示。 http://jsfiddle.net/bdMAF/38/

$(function(){
    $("#button1").click(function(){
        $("#list1 > option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });

    $("#button2").click(function(){
        $("#list2 > option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});

但是，当我从第一个选择框添加到第二个选择框时，它正常工作 me.But再次当我从第二个选择框添加到第一个选择框时，他们将附加到第一个选择框的最后一个。但我想要的是我需要添加他们必须添加在这个地方他们删除的地方。

提前致谢...

Answer 1

也许您可以简单地设置和删除属性“已禁用”，但它会在选项中留下空白。请注意，使用此方法时，您需要首次克隆该选项。

另一种解决方案是像往常一样添加内容，但在

之前应用sort（）函数

function byValue(a, b) {
    return a.value > b.value ? 1 : -1;
};

function rearrangeList(list) {
    $(list).find("option").sort(byValue).appendTo(list);
}

$(function () {
    $("#button1").click(function () {
        $("#list1 > option:selected").each(function () {
            $(this).remove().appendTo("#list2");
            rearrangeList("#list2");
        });
    });

    $("#button2").click(function () {
        $("#list2 > option:selected").each(function () {
            $(this).remove().appendTo("#list1");
            rearrangeList("#list1");
        });
    });
});

您可以尝试此fiddle

Answer 2

您需要跟踪某种索引，我认为在您的情况下，您可以使用每个选项的value。（但如果需要，可以使用专用的data-*属性）

使用该值，您可以搜索当前列表并查看它应该适合的位置。循环选项并检查大于您正在移动的值的值。如果你找到一个然后在那之前插入它，如果你没有罚款，那么在最后插入。

这应该这样做：

$("#button2").click(function(){
    $("#list2 > option:selected").each(function(){
        var item = $(this).remove();
        var match = null;
        $("#list1").find("option").each(function(){
            if($(this).attr("value") > item.attr("value")){
                match = $(this);
                return false;
            }
        });
        if(match)
            item.insertBefore(match);
        else
           $("#list1").append(item);
    });
});

你也可以反过来使用它。

Here is a working example

Answer 3

将选项添加回#list1后，一个简单的sort()将完成剩下的工作。为此，我们需要根据值添加比较函数。

$(function () {
    $("#button1").click(function () {
        $("#list1 > option:selected").each(function () {
            $(this).remove().appendTo("#list2");
        });
    });

    $("#button2").click(function () {
        $("#list2 > option:selected").each(function () {
            $(this).remove().appendTo("#list1");
            var opts = $('#list1 option').get();

            $('#list1 ').html(opts.sort(optionSort));
        });
    });

    function optionSort(a, b) {
        return $(a).val() > $(b).val();
    }
});

查看此JSFiddle

您还可以使用text()进行排序，而不是使用val()进行排序。

使用jQuery在同一位置移动和删除列表框项目到另一个列表框

3 个答案: