bootstrap duallistbox 上移下移答案

【问题标题】：bootstrap duallistbox move-up move-downbootstrap duallistbox 上移下移
【发布时间】：2017-04-15 01:48:57
【问题描述】：

我有 boostrap duallistbox，我想添加向上或向下移动所选值的选项。

谁能帮帮我。

谢谢

【问题讨论】：

标签： javascript asp.net twitter-bootstrap

【解决方案1】：

请参阅本文设置部分中引用的 moveOnSelect 选项：

http://www.jqueryscript.net/demo/Responsive-jQuery-Dual-Select-Boxes-For-Bootstrap-Bootstrap-Dual-Listbox/

“true：选项在选择时自动移动。此设置在触摸设备上强制执行。”

"false: 选中的选项可以通过按钮移动。"

【讨论】：

我不想继续选择...我希望能够向上或向下移动选定的值。

【解决方案2】：

您可以添加上下两个按钮。添加带有两个集合的点击处理程序：一个包含选择中的所有选项，第二个仅包含选定选项。

function MoveDown(dualListbox) {
        var selectedItems = dualListbox.elements.box2.find(':selected');

        for (var i = selectedItems.length - 1; i > -1; i--)
        {
            var allItems = dualListbox.elements.box2.find('option');
            var selectedItem = $(selectedItems[i]);
            var selectedIndex = selectedItem.index();
            selectedItem.insertAfter(allItems[selectedIndex + 1]);
        }
    }

请注意，当您编写 MoveUp 处理程序时，您应该从所有选项集合的开头开始，并在前一个选项之前插入

【讨论】：

我们如何通过按钮点击将这个“dualListbox”参数传递给这个MoveDown()方法？？

【解决方案3】：

这里你去上下

    function MoveDown(dualListbox) {
       var selectedItems = dualListbox.elements.box2.find(':selected');

       for (var i = selectedItems.length - 1; i > -1; i--) {
           var allItems = dualListbox.elements.box2.find('option');
           var selectedItem = $(selectedItems[i]);
           var selectedIndex = selectedItem.index();
           selectedItem.insertAfter(allItems[selectedIndex + 1]);
       }
    }

    function MoveUp(dualListbox) {
       var selectedItems = dualListbox.elements.box2.find(':selected');

       for (var i = 0;i<=selectedItems.length;i++) {
           var allItems = dualListbox.elements.box2.find('option');
           var selectedItem = $(selectedItems[i]);
           var selectedIndex = selectedItem.index();
           selectedItem.insertBefore(allItems[selectedIndex - 1]);
       }
    }

【讨论】：