选择：保持多个选择顺序
我正在使用Chosen的Multiple选择。 我希望能够跟踪用户选择的订单。 例如，如果用户先选择option2然后选择option1，我想按option2和option1的顺序选择结果。 但是选择了用户选择的选项。 有没有办法告诉我们选择不对结果进行排序？
我写了一个简单的插件与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);
看看这个。
我建议你使用Select2，如果还不晚。 它与Chosen看起来相同，但有更好的API和文档。
使用select2，它会像[未经测试的代码]
var results = []; $("#e11").on("change", function(e) { results.push(e.val) })
现在有一个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); }
这在这里非常有效。
我注入了一个自定义.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将在 DOM中带来可见的更改。
希望这有助于某人仍然在寻找一种方法来做到这一点，而无需做任何额外的提交。
PS：如果需要，可以编写紧凑的jQuery版本的代码。 🙂
希望这对使用较旧版本的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：可以使用取消选择。 🙂
这将按您的选择顺序排列
$("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'); });