3

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

它运作良好，但一旦我保存它，排序中断，它们按字母顺序排列。

我想知道是否有可能在拖放到 select2() 字段后保存元素的顺序。

请建议。

4

4 回答 4

1

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

  1. 用于保存订单的隐藏输入。
  2. 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>

这样，input[name=reports]将正确的顺序发送到您的页面。

于 2015-03-06T19:23:17.350 回答
1

根据 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 });
                           });

});

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

于 2013-11-12T14:27:41.570 回答
1

Select2 已升级到版本 4，它基于<select/>and <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');
})

基本上，我将所选项目删除并重新添加到选择选项列表中，以便它们按选择顺序显示。

于 2016-05-12T14:58:49.957 回答
0

在我的情况下，隐藏字段解决方案是一个很好的解决方案，但 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);

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

于 2015-04-16T17:30:48.917 回答