Bootstrap-select with selected on top和jQuery可排序集成

Bootstrap-select with selected on top and jQuery sortable integration

本文关键字：jQuery 排序 集成 top with selected on Bootstrap-select      更新时间：2023-09-26

我正在使用引导选择项目，我有一个multiple列表的问题。我必须满足我的应用程序的以下要求。

更新:

基于@caseyjhol很棒的答案，我开始尝试实现这个，这里是一个JSFiddle。

<标题>要求:

1)我需要在列表的顶部呈现选中的项目，而不是在它们原来的位置。这是因为如果我有一个大列表，我不希望用户必须向下滚动所有列表来检查那些带有勾号的项。因此，我渲染所有选择在顶部，然后是一个分隔，然后是没有选择。

假设原始列表按此顺序为A B C D E F。所以，如果我点击C，列表应该变成C A B C D E F。如果我点击E，它应该变成C E A B D F。

这部分需求确实有效。

2)然而，如果我现在取消选择(点击)再次E，那么列表应该成为C A B D E F。这部分坏了，我不知道该怎么做。

3)从选定的项目(那些在顶部)，我想允许他们通过使用jQueryUI sortable拖放排序。这样，用户不仅可以选择哪个选项，还可以选择哪个顺序。

例如，假设我点击C，然后点击E，现在列表是C E A B D F。从这里，我应该被允许只排序C E部分。现在，假设我拖动C并将其放在E之后。引导<ul>正确显示为E C A B D F(这是我需要的)。但是现在，当我提交表单时，html列表仍然是旧的订单C E A B D F。所以我仍然不能将<ul>的状态应用到html选择中。

我试图尽可能多地记录我的需求。任何帮助都是感激的。

Thanks in advance

每个li元素都有一个data-original-index属性。它告诉您原始select元素中选项的索引。我不确定你的确切用途是什么。如果您只是试图对选项进行排序，以便所选选项位于顶部，我认为对选择本身执行排序更有意义，然后使用.selectpicker('refresh')更新bootstrap-select。如果出于某种原因需要对li元素执行排序，我会这样做:

$(window).on('load', function() {
  var $menu = $('#myList').data('selectpicker').$menu,
      $options = $('#myList').find('option');
  function updateOptions() {
    var optionArray = [];
    $menu.find('li').each(function(i, el) {
      optionArray.push($options.eq($(el).data('originalIndex')));
    });
    
    $('#myList').append(optionArray);
    
    // for displaying current order of options
    $('#myList').trigger('showOptions');
  }
  
  // for displaying current order of options
  $('#myList').on('loaded.bs.select showOptions', function() {
    $('#options').empty();
    
    var arr = [];
    $(this).find('option').each(function() {
      arr.push($(this).val());
    });
    
    $('#options').append(arr.join(', '));
  });
  
  setTimeout(function() {
    // move the first li to the end of the list
    $menu.find('li').eq(0).appendTo($menu.find('ul'));
    // for displaying current order of options
    $('#myList').trigger('showOptions');
    
    // update the order of the options to match the list
    updateOptions();
  }, 500);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/silviomoreto/bootstrap-select/master/dist/js/bootstrap-select.js"></script>
<select id="myList" class="selectpicker" multiple>
    <option value="Aberdare">Aberdare</option>
    <option value="Berdeen">Berdeen</option>
    <option value="Crington">Crington</option>
</select>
<div id="options"></div>

您需要在生产环境中做一些不同的事情(比如确保originalIndex得到正确更新)，但这应该为您指明了正确的方向。

相关文章：