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

我有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

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

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

你可以尝试这个小提琴

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

你也可以反过来应用它。

这是一个有效的例子

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

您还可以通过在optionSort()更改它来使用text()而不是val()进行optionSort() 。