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

【问题标题】：Disable auto sorting selected values in Bootstrap duallistbox在 Bootstrap duallistbox 中禁用自动排序选定值
【发布时间】：2021-08-04 04:07:09
【问题描述】：

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

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

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

例如。选择的顺序是

但在双重列表框中，它显示排序值

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

【问题讨论】：

你有没有得到这个答案？我也在为此苦苦挣扎。

标签： jquery twitter-bootstrap bootstrap-duallistbox

【解决方案1】：

不确定这是您要查找的内容，但我修改了 jquery.bootsdtrap-duallistbox.js 文件并在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。

可能不是最优雅的解决方案，但它现在似乎正在工作。

【讨论】：

【解决方案2】：

使用此选项：

sortByInputOrder: 'true'

例如

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

更新

这还是不行！

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

sortByInputOrder: 'true'

但是当我使用

访问这些值时

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

它再次对它们进行排序。

把我逼疯了。：/

【讨论】：

【解决方案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);

【讨论】：