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

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

使用select2，它会像[未经测试的代码]

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

Answer 3

现在有一个https://github.com/mrhenry/jquery-chosen-sortable/插件可供选择v1。

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

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

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 4

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

-e '{"log_path":"/my/log/path","log_name":"shutdown.log","log_dir":"shutdown"}'

Answer 5

我注入了一个自定义.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 / removeAttribute会在<option> DOM中带来明显的变化。

希望这有助于某人在没有做任何额外提交的情况下仍然在寻找一种方法。

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

Answer 6

希望这对使用旧版本select2（小于v4）的人有用。 select2-selection和select2-removal选项在这种情况下很有用。使用数组并在我们选择后附加值，我们可以保持选择的顺序，在取消选择特定选项时，我们可以找到索引并使用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及更高版本，选择2：选择并选择2：可以使用取消选择。：）

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');
});

选择：保持多个选择顺序

7 个答案:

检索选择顺序

按顺序设置所选值