如何使用select2库多选重复的值

Select2 是一个 jQuery 插件，用于替换原生的 select 元素，提供搜索、远程数据集、无限滚动等功能。在 Select2 中，默认情况下是不允许选择重复值的。但是，如果你想允许用户选择重复的值，可以通过自定义实现。

以下是一个使用 Select2 库允许多选重复值的示例：

首先，确保你已经在项目中引入了 jQuery 和 Select2 的相关文件：

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

在 HTML 中创建一个 select 元素，并为其添加 multiple 属性以支持多选：

<select id="mySelect" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
</select>

使用 JavaScript 初始化 Select2，并通过自定义事件处理程序允许选择重复值：

$(document).ready(function() {
  $('#mySelect').select2();

  // 监听 select2:select 事件
  $('#mySelect').on('select2:select', function(e) {
    // 获取选中的选项
    var selectedOption = e.params.data;

    // 将选中的选项添加回选项列表
    var option = $('<option>', {
      value: selectedOption.id,
      text: selectedOption.text
    });

    // 将新选项插入到 select 元素的末尾
    $('#myText').append(option);
  });
});

这样，当用户选择一个选项时，该选项将被添加回选项列表，从而允许用户选择重复的值。请注意，这种方法可能会导致性能问题，特别是在处理大量数据时。在实际应用中，请根据需求进行优化。