Bootstrap-select，顶部选择和 jQuery 可排序集成

Question

我正在一个项目中使用 Bootstrap-Select，但我对

multiple

列表有疑问。我的应用程序必须满足以下要求。

更新：

基于@caseyjhol很好的答案，我开始尝试实现这个，here是一个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

之后。 Bootstrap

<ul>

正确显示为

E C A B D F

（这就是我需要的）。但是现在，当我提交表单时，html列表仍然是旧的顺序

C E A B D F

。所以我仍然无法将

<ul>

的状态应用到 html select 中。

我尝试尽可能多地记录我的要求。任何帮助表示赞赏。

提前致谢

Answer 1

每个

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>

您需要在生产过程中做一些不同的事情（例如确保原始索引正确更新），但这应该为您指明正确的方向。

Answer 2

这对我有用

  $('.selectpicker').on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) {
    var selectedOptions = $(this).find('option:selected');
    selectedOptions.detach();
    $(this).prepend(selectedOptions);
    $(this).selectpicker('refresh');
  });

选择某个选项后，会将所选选项从当前位置分离并将其添加到列表顶部。