Bootstrap-select with selected on top和jQuery sortable集成

yc0p9oo0  于 12个月前  发布在  Bootstrap
关注(0)|答案(2)|浏览(121)

我正在为一个项目使用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选择中。
我尽可能多地记录我的要求。任何帮助都很感激。
Thanks in advance

daolsyd0

daolsyd01#

每个li元素都有一个data-original-index属性。它告诉你原始select元素中的选项的索引。我不确定你的确切用例是什么。如果你只是想对选项进行排序,以便选定的选项位于顶部,我认为对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);
});

个字符
你需要在生产中做一些不同的事情(比如确保originalIndex得到正确的更新),但这应该会为你指明正确的方向。

xjreopfe

xjreopfe2#

这个对我很有效

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

字符串
当一个选项被选中时,它会将所选选项从其当前位置分离,并将其置于列表的顶部。

相关问题