我在使用select2 库的select2() 字段，并且在该字段中启用了拖放排序。
效果很好，但是一旦我保存它，排序就会中断，它们是按字母顺序排列的。
我想知道是否可以在 select2() 字段中 拖放 之后保存元素的顺序。
请提出建议。
【问题讨论】：
标签： javascript jquery jquery-ui jquery-select2
根据 Select2 文档，新的排序值保存在附加的隐藏字段中。 http://ivaynberg.github.io/select2/
（右键单击输入字段，然后检查元素以在 div#select2-container 之后找到下面的行）
有两个选项可能适合您：
选项1：简单的一个
检查您输入控件的顺序，具体如下：
$("#e15").select2({tags:["red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"]});
控件只是按照上面一行指定的顺序渲染。
如果您没有将这些值保存为逗号分隔的文本，而是保存为行记录，那么您的数据库查询可能会按字母顺序对它们进行排序。
选项 2：更进一步
此代码将帮助您将排序值保存在 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 });
});
});
请注意，此代码可能不适用于数据库绑定字段，如果需要，您可能需要添加一些代码。
【讨论】：
嗯，我遇到了你的问题。我已经用这样的东西克服了它......
$("#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>这样input[name=reports] 会向您的页面发送正确的顺序。
【讨论】：
Select2 已升级到版本 4，它基于 <select/> 和 <option/>-tags，而不是 <input/>-tags。我为第 4 版解决了如下问题：
$(".select2").select2().on('select2:select', function(e){
var $selectedElement = $(e.params.data.element);
var $selectedElementOptgroup = $selectedElement.parent("optgroup");
if ($selectedElementOptgroup.length > 0) {
$selectedElement.data("select2-originaloptgroup", $selectedElementOptgroup);
}
$selectedElement.detach().appendTo($(e.target));
$(e.target).trigger('change');
})基本上，我将所选项目删除并重新添加到选择选项列表中，以便它们按选择顺序显示。
【讨论】：
在我的情况下，隐藏字段解决方案是一个很好的解决方案，但 Select2 插件仍然保持数字/字母（？）顺序，这不是用户选择的顺序
我找到了一个解决方案，可以解决我的所有需求。
在我的 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 );
});
在表单声明后的 javascript 部分有我的 Multi Select2：
var sel = $("#form_people").select2({
maximumSelectionSize: 3,
minimumInputLength: 1,
escapeMarkup: function(m) { return m; },
});
然后
//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);
这是我需要的，也许可以帮助其他开发者
【讨论】：