通过jquery上下移动选择选项

所以我让这个代码适用于Firefox和Chrome ……它的作用是它允许你在HTML选择表单中对选项进行重新排序……但是当我通过IE8测试代码时，它有点不完整……它仅适用于前几次点击，之后您必须在按钮上多次单击才能使其正常工作..

有没有人知道任何其他允许您重新排序在IE8中完美运行的选择字段项的代码？

 bahaha mwaahaha  Move Up Move Down Add Item Remove item  $(document).ready(function(){ $('#mup').click(function(){ moveUpItem(); }); $('#mdown').click(function(){ moveDownItem(); }); }); function moveUpItem(){ $('#list option:selected').each(function(){ $(this).insertBefore($(this).prev()); }); } function moveDownItem(){ $('#list option:selected').each(function(){ $(this).insertAfter($(this).next()); }); } 

Answer 1

您更改选项的代码工作正常。 似乎IE8没有处理click事件的“快速”第二次点击，而是希望处理double click 。

使用下面的测试代码，您会注意到在IE8中按下“快速”按下“ Move Down/Up时会写出以下内容：

 Move Down Click Move Down Double-Click Move Down Click Move Down Double-Click 

但是使用FF / Chrome可以打印以下内容：

 Move Down Click Move Down Click Move Down Double-Click Move Down Click Move Down Click Move Down Double-Click 

这是我用来测试的代码。 我没有做过任何测试，看看它是否是导致问题的jQuery事件绑定器。

         Option 1 Option 2 Option 3  Move Up Move Down  
 
   

编辑：我可以确认这是 IE8的问题。 在$（document）.ready（）处理程序中交换这个特定于IE8的代码：

 // $("#mup").click(moveUpItem); $("#mup")[0].attachEvent("onclick", moveUpItem); // $("#mdown").click(moveDownItem); $("#mdown")[0].attachEvent("onclick", moveUpItem); // $("#mup").bind("dblclick", function () $("#mup")[0].attachEvent("ondblclick", function () { $DEBUG.append("Move Up Double-Click
"); }); // $("#mdown").bind("dblclick", function () $("#mdown")[0].attachEvent("ondblclick", function () { $DEBUG.append("Move Down Double-Click
"); }); 

Answer 2

示例：要在第一个选项之前移动第3个选项，我们可以使用以下jquery：

 $('select[name="NameOfDropDown"] option:eq(2)').insertBefore($('select[name="NameOfDropDown"] option:eq(0)')); 

Answer 3

我认为这会给出一些如何做的想法，你可以通过知道两者的值，即要移动的位置和位置之一，在一个已知位置之前动态放置任何选项：

您如何使用JQuery动态订购列表？

Answer 4

我知道这个有点旧，但我最近制作了这个简单的jQuery插件，能够重新排序多个select元素中的元素。

看看它是否对你有帮助，我测试了IE8，IE9，Chrome，FireFox，Opera。

http://fedegiust.github.io/selectReorder/