5

我有 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");
        });
    });
});

但是当我从第一个选择框添加到第二个选择框时，它对我来说工作正常。但是当我再次从第二个选择框添加到第一个选择框时，它们会附加到第一个选择框的最后一个。但我想要的是我需要要添加它们，必须将它们添加到它们删除的位置。

提前致谢...

4

3 回答 3

5

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

另一个解决方案应该是像往常一样添加内容，但之前应用 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");
        });
    });
});

你可以试试这个小提琴

于 2013-06-14T12:39:20.217 回答
1

您需要跟踪某种索引，我认为在您的情况下您可以使用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);
    });
});

您也可以将相同的应用于相反。

这是一个工作示例

于 2013-06-14T12:45:31.223 回答
0

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

$(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()在optionSort().

于 2013-06-14T12:52:05.760 回答