Select2:如何防止标签排序

Posted

技术标签:

【中文标题】Select2:如何防止标签排序【英文标题】:Select2: How to prevent tags sorting 【发布时间】:2015-10-04 12:58:33 【问题描述】:

当用户选择许多项目(标签)时,它们会自动按字母顺序排序。如何使用 Select2 4.0 防止自动排序并保持用户的顺序?

更新:

提到的“可能重复的问题”是针对旧版本的 Select2 v3...我问的是版本 4...它与旧版本不同,并且提到的答案并不能解决问题。

【问题讨论】:

【参考方案1】:

我找到了一个适用于 Select2 v4 的解决方案。它改变了项目的顺序 - 用户选择的项目被移动到最后。

$("select").select2();

$("select").on("select2:select", function (evt) 
  var element = evt.params.data.element;
  var $element = $(element);
  
  $element.detach();
  $(this).append($element);
  $(this).trigger("change");
);
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select style="width: 500px;" multiple="multiple">
  <option>two</option>
  <option>four</option>
  <option>six</option>
</select>

更新

在此处找到解决方案:github.com/select2/select2/issues/3106。它的作者是 kevin-brown。

【讨论】:

你是救生员! 你应该记下你找到解决方案的地方:github.com/select2/select2/issues/3106 @vol7ron 是的,你是对的。我找不到解决方案的位置,但您已经找到了。 这会在closeOnSelect 设置为 false 时更改下拉菜单的顺序 这也在重新排列下拉列表。我不想改变下拉列表。我只想从输入框中删除字母顺序。有解决方法吗?【参考方案2】:

这个has been discussed before为Select2 3.5.2,你可以使用select2('data')获取订单。

$("select").select2();

$('#sayResult').click(function () 
  // 'data' brings the unordered list, while val does not
  var data = $('select').select2('data');
  
  // Push each item into an array
  var finalResult = data.map(function () 
    return this.id;
  );

  // Display the result with a comma
  alert( finalResult.join(',') );
);
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>

<select style="width: 500px;" multiple="multiple">
  <option>two</option>
  <option>four</option>
  <option>six</option>
</select>

<button id='sayResult'>Say Result</button>

【讨论】:

该代码不起作用。它使用旧版本的 Select2 v3.4.5 这在 Select2 4.0.0 中不起作用,因为 data 现在会按照它们出现的顺序返回所选项目。【参考方案3】:

这个解决方案效果最好

html

<select style="width: 500px;" multiple="multiple">
    <option>two</option>
    <option>four</option>
    <option>six</option>
  </select>

JS

$(document).ready( function () 

    $("select").select2(
      tags: true
    );
    
    $("select").on("select2:select", function (evt) 
      var element = evt.params.data.element;
      var $element = $(element);
      
      $element.detach();
      $(this).append($element);
      $(this).trigger("change");
    );

 );

【讨论】:

以上是关于Select2:如何防止标签排序的主要内容,如果未能解决你的问题,请参考以下文章

使用 jquery select2 插件时,如果已列出 ajax 调用中的有效值,如何防止选择新标签?

Select2:防止 Select2 下拉菜单专注于点击

如何使用 Select2 创建新标签并保存到数据库

如何更改select2标签颜色的css?

Angular UI select2 - 如何停止自动排序?

如何使用 select2 和 x-editable 格式化标签