使用jQuery在相同位置将列表框项移动和删除到另一个列表框 [英] Move and remove Listbox item to another listbox using jQuery in same places

问题描述

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

I have 2 multi select boxes like as in this link. 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");
        });
    });
});

但是当我从一个第一个选择框添加到第二个选择框时，它工作正常 我.但是当我从第二个选择框添加到第一个选择框时，它们将附加到 最后一个选择框.但我要添加的内容必须添加到该位置 他们在哪里删除了.

But When i add from one first select box to second select box it is working fine for me.But again when i add from second select box to first select box they are appending to last of first select box.But what i want is i need to add they must be added in the place where they deleted.

预先感谢...

推荐答案

也许您可以简单地设置和删除属性"disabled"，但在选项中将留有空白.请注意，使用这种方法，您将需要在第一时间克隆该选项.

Maybe you can simply set and remove the attribute "disabled" but it will leave a blank space in the options. Note that with this method you will need to clone the option the first time.

另一种解决方案是照常添加内容，但在此之前应用sort()函数

The other solution whould be to add the content as usual but applying a sort() function before

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

您可以尝试使用小提琴

这篇关于使用jQuery在相同位置将列表框项移动和删除到另一个列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！