jquery - 选择：保持多项选择顺序

Question

我正在使用 Chosen 的多项选择。我希望能够跟踪用户选择的订单。例如，如果用户先选择option2然后选择option1，我想按option2和option1的顺序得到结果。但选择排序用户选择的选项。有没有办法告诉我选择不对结果进行排序？

Answer 1

我写了一个简单的插件来与 Chosen 一起使用。它允许您检索选择的多选元素的选择顺序，还可以从有序值数组中设置它。

它在 Github 上可用：https ://github.com/tristanjahier/chosen-order

它与 Chosen 1.0+ 以及 jQuery 和 Prototype 版本兼容。每个框架还有一个插件，可以让你做这样的事情：

检索选择顺序

var selection = $('#my-list').getSelectionOrder();

按顺序设置选定的值

var order = ['nioup', 'plop', 'fianle']; // Ordered options values
$('#my-list').setSelectionOrder(order);

一探究竟。

Answer 2

现在有一个https://github.com/mrhenry/jquery-chosen-sortable/插件可用，它可以为所选的 v1 完成工作。

对于较新版本的 selected，您需要在 github JS 文件中将 chzn- 替换为 selected- 。

要使用它，我使用以下代码：

jQuery('#myselect').addClass('chosen-sortable').chosenSortable();

它工作得很好，但是当再次编辑字段以在加载选择后重新排序元素时，您将需要更多代码。

我为此使用以下内容。给定一个 sortedElements 列表和 $select = jQuery('#myselect')：

var $container = $select.siblings('.chosen-container')
var $list = $container.find('.chosen-choices');

// Reverse the list, as we want to prepend our elements.
var sortedElements = sortedElements.reverse();

for (var i = 0; i < sortedElements.length; i++) {
  var value = sortedElements[i];

  // Find the index of the element.
  var index = $select.find('option[value="' + value + '"]').index();

  // Sort the item first.
  $list
          .find('a.search-choice-close[data-option-array-index="' + index + '"]')
          .parent()
          .remove()
          .prependTo($list);
}

这在这里工作得很好。

Answer 3

如果还不算太晚，我建议您使用Select2 。它看起来与 Chosen 相同，但具有更好的 API 和文档。

使用 select2，它类似于 [未经测试的代码]

 var results = [];
 $("#e11").on("change", function(e) { 
    results.push(e.val)
 })

Answer 4

我注入了一个自定义.change()事件处理程序以使其工作：

$('.chosen-select').chosen({});

至：

$('.chosen-select').chosen({}).change((event, info) => {
  if (info.selected) {
    var allSelected = this.querySelectorAll('option[selected]');
    var lastSelected = allSelected[allSelected.length - 1];
    var selected = this.querySelector(`option[value="${info.selected}"]`);
    selected.setAttribute('selected', '');
    lastSelected.insertAdjacentElement('afterEnd', selected);
  } else { // info.deselected
    var removed = this.querySelector(`option[value="${info.deselected}"]`);
    removed.setAttribute('selected', false); // this step is required for Edge
    removed.removeAttribute('selected');
  }
  $(this).trigger("chosen:updated");
});

请注意，这会在选择的情况下移动 DOM，而在取消选择的情况下不会移动。setAttribute/是为了在DOMremoveAttribute中带来可见的变化。<option>

希望这对仍在寻找方法的人有所帮助，而无需在提交时做任何额外的事情。

PS：如果需要，可以编写此代码的紧凑 jQuery 版本。:)

Answer 5

您可以在更改事件中自己添加/删除项目。

// Your collection Array
var collectionArray = [] 

// make change event on chosen select field
chosenSelect.change(function () {
  // first get the chosen results which might be in wrong order
  var currentValues = $(this).val();

  // get your current collection that is in the right order
  var pastValues = collectionArray;

  // see if you need to add or drop
  if (currentValues.length > pastValue.length) {

    // loop to get just the new item
    pastValues.forEach(function(pastValue) {
      currentValue = $.grep(currentValue, function(newItemOnly) {
        return newItemOnly != pastValue;
      });
    });

    // add your newItemOnly
    collectionArray.push(currentValue[0]);

  } else {

    // here loop to get only the dropped value
    currentValues.forEach(function(currentValue) {
      pastValues = $.grep(pastValues, function(droppedValueOnly) {
        return droppedValueOnly != currentValue;
      });
    });

    // drop the value dropped from your collection
    collectionArray = $.grep(collectionArray, function(updatedArray) {
      return updatedArray != pastValues[0];
    });
  }
});

Answer 6

希望这对使用旧版本 select2（低于 v4）的人有用。在这种情况下，select2-selecting 和 select2-removing 选项很有帮助。使用数组并在我们选择后附加值，我们可以保持选择顺序，并且在取消选择特定选项时，我们可以找到索引并使用 splice() 从数组中删除它。

var selected = [];    
$('#multiSelect').on("select2-selecting", function(evt) {
            var selectedOption = evt.val;
            selected.push(selectedOption);

        }).on("select2-removing", function(evt) {
              index = selected.indexOf(evt.val);
              selected.splice(index,1);       
        });   

对于版本 4 及更高版本，可以使用 select2:select 和 select2:unselect。:)

Answer 7

这将按照您的选择顺序排列

$("select").on('select2:select', function (e) {
    var elm = e.params.data.element;
    $elm = jQuery(elm);
    $t = jQuery(this);
    $t.append($elm);
    $t.trigger('change.select2');
});