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

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

但是当我从第一个选择框添加到第二个选择框时，它工作正常 我。但是当我从第二个选择框添加到第一个选择框时，它们又附加到 第一个选择框的最后一个。但是我想要的是我需要添加它们必须添加到该位置 他们删除的地方。

提前致谢...

Answer 1

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

另一种解决方案是照常添加内容，但之前应用 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