如何在 select2(） 字段中保存排序顺序

how to save sorting order in select2() field?

本文关键字：保存 排序 顺序 字段 select2      更新时间：2023-09-26

我正在使用 select2 库select2()字段，并在字段中启用了拖放排序。

它

运行良好，但是一旦我保存它，排序就会中断，并且它们按字母顺序排序。

我想知道是否可以在 select2（） 字段中拖放后保存元素的顺序。

请指教。

根据 Select2 文档，新的有序值保存在附加的隐藏字段中。http://ivaynberg.github.io/select2/

（右键单击输入字段，然后检查元素以在div#select2-容器之后找到下面的行）

有两个选项可能适合您：

选项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 });
                           });
});

请注意，此代码可能不适用于数据库绑定字段，如果需要，您可能需要添加一些代码。

好吧，

我有你的问题。我已经用这样的东西克服了它...

  1. 隐藏输入以保存您的订单。
  2. 选择2上的侦听器。

$("#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);

这就是我需要的，也许可以帮助其他开发人员

相关文章：