select2组件选择选项后怎么按照选择先后顺序显示

如果您想要按照选择的先后顺序来显示选中的选项，您可以使用select2的`tags`属性来实现。`tags`属性允许用户输入任意值作为选项，同时保持选项的选择顺序。具体实现方法如下：

<select id="mySelect2"></select>

<script>
  $(document).ready(function() {
    $('#mySelect2').select2({
      tags: true,
      tokenSeparators: [',', ' '],
      placeholder: '请选择',
      maximumSelectionLength: 3 // 设置最多选中3个选项
    });

    $('#mySelect2').on('change', function() {
      // 获取当前选择的选项
      var selectedOptions = $('#mySelect2').select2('data');
      // 按照选择的先后顺序对选项进行排序
      selectedOptions.sort(function(a, b) {
        return a.element.dataset.order - b.element.dataset.order;
      });
      // 构造选中的选项的文本
      var selectedText = selectedOptions.map(function(option) {
        return option.text;
      }).join(',');
      // 更新select2的显示文本
      $('#mySelect2').val(selectedText).trigger('change');
    });
  });
</script>

在上述代码中，我们将`tags`属性设置为`true`，使得select2允许用户输入任意值作为选项。通过设置`tokenSeparators`属性，我们指定了用户输入多个选项时的分隔符为逗号和空格。当用户进行选择后，我们可以通过监听`change`事件来获取选择的选项，并按照选择的先后顺序来排序这些选项。最后，我们将选中的选项的文本拼接起来，并通过`val`方法将其设置为select2的显示文本。

请注意，如果您需要限制用户最多只能选择几个选项，可以使用`maximumSelectionLength`属性来设置最大选择数量。同时，为了方便按照选择的先后顺序进行排序，我们可以在每个选项的HTML标签中添加一个`data-order`属性，表示选项的选择顺序。例如：

<select id="mySelect2">
  <option value="1" data-order="2">选项1</option>
  <option value="2" data-order="1">选项2</option>
  <option value="3" data-order="3">选项3</option>
</select>

这样，当用户进行选择后，我们就可以按照选项的`data-order`属性来进行排序。