在Bootstrap duallistbox中禁用自动排序选定的值

Question

我正在努力将bootstrap双列表框控制器添加到网页中。 这是我用的代码

<script src="~/js/jquery.bootstrap-duallistbox.min.js"></script>
<script src="~/js/bootbox.min.js"></script>
<script type="text/javascript">
    jQuery(function ($) {
        var dualList = $('select[name="duallistbox_laws[]"]').bootstrapDualListbox({
            infoTextFiltered: '<span class="label label-purple label-lg">Filtered</span>',
          });
        }
</script>

用户可以从第一个框中选择选项。但它是在第二个列表框中自动排序。我想在第二个列表框中禁用自动排序

实施例。 所选订单是

但是在duallist框中，它显示了排序值

如何在第二个列表框中禁用自动排序？

Answer 1

使用此选项：

sortByInputOrder: 'true'

<强> E.g。

        var build = $('select[name="buildcontent[]"]').bootstrapDualListbox({
            nonSelectedListLabel: 'Non-selected',
            selectedListLabel: 'Selected for your display',
            sortByInputOrder: 'true'
        });

<强>更新

这仍然不起作用！

使用此设置，RHS框保持选择顺序：

sortByInputOrder: 'true'

但是当我用

访问这些值时

$('select[name="buildcontent[]"]').val()

它再次对它们进行排序。

让我疯了。 ：/

Answer 2

不确定这是您要查找的内容，但是我修改了 jquery.bootsdtrap-duallistbox.js 文件，并在 sortOptionsByInputOrder 函数中添加了一个调用 refreshSelects 函数的结尾：

sortOptionsByInputOrder(dualListbox.elements.select2);

完整功能：

    function refreshSelects(dualListbox) {
        dualListbox.selectedElements = 0;
    
        dualListbox.elements.select1.empty();
        dualListbox.elements.select2.empty();
    
        dualListbox.element.find('option').each(function(index, item) {
          var $item = $(item);
          if ($item.prop('selected')) {
            dualListbox.selectedElements++;
            dualListbox.elements.select2.append($item.clone(true).prop('selected', $item.data('_selected')));
          } else {
            dualListbox.elements.select1.append($item.clone(true).prop('selected', $item.data('_selected')));
          }
        });
    
        if (dualListbox.settings.showFilterInputs) {
          filter(dualListbox, 1);
          filter(dualListbox, 2);
        }
        refreshInfo(dualListbox);
    
        sortOptionsByInputOrder(dualListbox.elements.select2);
      }

    function sortOptionsByInputOrder(select){
    var selectopt = select.children('option');

    selectopt.sort(function(a,b){
      var an = parseInt(a.getAttribute('data-sortindex')),
          bn = parseInt(b.getAttribute('data-sortindex'));

          if(an > bn) {
             return 1;
          }
          if(an < bn) {
            return -1;
          }
          return 0;
    });

    selectopt.detach().appendTo(select);
  }

我有：

现在我有：

我想要的订单是teste9 / teste11 / teste10。

可能不是最优雅的解决方案，但它似乎目前正在起作用。

Answer 3

$('#yourSelector').bootstrapDualListbox({
     sortByInputOrder: true
});

var yourArray = [];
$('#yourSelector').on('change', function() {
     $.each($('#yourSelector option[data-sortindex]'), function(index, values) {
         yourArray[$(values).attr('data-sortindex')] = $(values).val();
     });
});

console.log(yourArray);