javascript 如何在 select2() 字段中保存排序顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19930835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to save sorting order in select2() field?
提问by uday.blob
I'm using select2()field using select2library and Drag and Drop Sortingis enabled in the field.
我正在使用select2库的select2()字段，并且在该字段中启用了拖放排序。
It works well, but once i save it, the ordering break and they are ordered alphabetically.
它运行良好，但是一旦我保存它，排序就会中断，它们按字母顺序排列。
I was wondering if its possible to anyhow save ordering of elements after drag dropin select2() fields.
我想知道是否可以在 select2() 字段中拖放后以任何方式保存元素的排序。
Please suggest.
请建议。
回答by DJ.
Per Select2 documentation, the new ordered values are saved in a attached hidden field. http://ivaynberg.github.io/select2/
根据 Select2 文档，新排序的值保存在附加的隐藏字段中。 http://ivaynberg.github.io/select2/
(right click on the Input field and then inspect element to find the line below just after the div#select2-container)
（右键单击输入字段，然后检查元素以在 div#select2-container 之后找到下面的行）
There are two options that might work for you:
有两个选项可能适合您：
Option 1:Easy one
选项1：简单的
Check the ordering of how you are feeding the control, specific on:
检查您如何喂养控件的顺序，具体如下：
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
The control just render the same order that the above line is specified.
该控件仅呈现与指定上述行相同的顺序。
If you are not saving those values as comma separated text and instead as row records, maybe your database query is ordering them alphabetically.
如果您没有将这些值保存为逗号分隔的文本，而是保存为行记录，那么您的数据库查询可能正在按字母顺序对它们进行排序。
Option 2: A little bit further
选项2：更远一点
This code will serve you to save the ordered values in a cookie, so you can have the same order within your whole session.
此代码将帮助您将有序值保存在 cookie 中，因此您可以在整个会话中使用相同的顺序。
$(function(){
if ($.cookie('OrderedItemList') != null){
$("#e15").select2({tags: $.cookie('OrderedItemList').split(',')});
}
$("#e15").on("change", function() {
$("#e15_val").html($("#e15").val());
$.cookie('OrderedItemList', $("#e15").val(), { expires: 365 });
});
});
Please note, this code might not work for database bound fields, you might need to add some code if thats what you need.
请注意，此代码可能不适用于数据库绑定字段，如果您需要，您可能需要添加一些代码。
回答by Jo?o Prizal
Well I had your problem. I've overcome it with something like this...
好吧，我遇到了你的问题。我已经用这样的东西克服了它......
- A hidden input to save your order.
- the listener on the select2.
- 一个隐藏的输入来保存您的订单。
- select2 上的侦听器。
$("#reports").on('change', function(){
var data = $(this).select2('data');
var array = [];
$.each(data, function(index, val) {
array[index]=val.id;
});
array.join(',');
$("input[name=reports]").val( array );
});<form class="form-horizontal form-bordered" action="#something" method="post" accept-charset="utf-8" target="_blank" >
<input type="text" name="reports" >
<select id="reports" class="form-control select2me" multiple >
<? foreach ($Balance::getSeparators() as $key => $value ) { ?>
<option value="<?=( $key )?>"><?=( $value )?></option>
<? } ?>
</select>
</form>This way the input[name=reports]sends to your page the correct order.
这样input[name=reports]就可以将正确的顺序发送到您的页面。
回答by up2europe
The hidden field solution was a good solution in my case, but Select2 plugin still keep a numerical/alphabetical(?) order, that is not the user selection's order
隐藏字段解决方案在我的情况下是一个很好的解决方案，但 Select2 插件仍然保持数字/字母（？）顺序，这不是用户选择的顺序
I found a solution, that solves all my needs.
我找到了一个解决方案，它解决了我的所有需求。
In my symfony form declaration will be the hidden field called selectOrderin which to save the current order:
在我的 symfony 表单声明中，将调用隐藏字段selectOrder以保存当前订单：
$("#form_people").on('change', function(){
var data = $(this).select2('data');
var array = [];
$.each(data, function(index, val) {
array[index]=val.id;
});
array.join(',');
$("#selectOrder").val( array );
});
and in the javascript part after form declaration there is my Multi Select2:
在表单声明之后的 javascript 部分中，有我的 Multi Select2：
var sel = $("#form_people").select2({
maximumSelectionSize: 3,
minimumInputLength: 1,
escapeMarkup: function(m) { return m; },
});
then
然后
//After reloading page you must reselect the element with the
//right previous saved order
var order = $("#selectOrder").val().split(",");
var choices = [];
for (i = 0; i < order.length; i++) {
var option = $('#form_people option[value="' +order[i]+ '"]');
choices[i] = {id:order[i], text:option[0].label, element: option};
}
sel.select2('data', choices);
It's what I need, and maybe can help other developers
这是我需要的，也许可以帮助其他开发人员
回答by murb
Select2 has progressed to version 4, which is based on <select/>and <option/>-tags, instead of <input/>-tags. I solved it for version 4 as follows:
Select2 已经发展到版本 4，它基于<select/>和<option/>-tags，而不是<input/>-tags。我为版本 4 解决了它，如下所示：
$(".select2").select2().on('select2:select', function(e){
$selectedElement = $(e.params.data.element);
$selectedElementOptgroup = $selectedElement.parent("optgroup");
if ($selectedElementOptgroup.length > 0) {
$selectedElement.data("select2-originaloptgroup", $selectedElementOptgroup);
}
$selectedElement.detach().appendTo($(e.target));
$(e.target).trigger('change'); //needed so that ui gets updated
})
Basically I remove and re-add the selected items to the select-options-list, so that they appear in order of selection.
基本上，我将所选项目删除并重新添加到选择选项列表中，以便它们按选择顺序出现。
