我正在使用 Chosen 的多项选择。我希望能够跟踪用户选择的订单。例如,如果用户先选择option2然后选择option1,我想按option2和option1的顺序得到结果。但选择排序用户选择的选项。有没有办法告诉我选择不对结果进行排序?
7 回答
我写了一个简单的插件来与 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);
一探究竟。
现在有一个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);
}
这在这里工作得很好。
如果还不算太晚,我建议您使用Select2 。它看起来与 Chosen 相同,但具有更好的 API 和文档。
使用 select2,它类似于 [未经测试的代码]
var results = [];
$("#e11").on("change", function(e) {
results.push(e.val)
})
我注入了一个自定义.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 版本。:)
您可以在更改事件中自己添加/删除项目。
// 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];
});
}
});
希望这对使用旧版本 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。:)
这将按照您的选择顺序排列
$("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');
});