如何在 select2 中附加键入的值

在使用 select2 插件时，我们通常需要从预定义的选项列表中选择。但是，有时候我们需要允许用户键入自己的选项并添加到下拉列表中。

这里提供两种解决方案：

方案1：使用 tags 选项

select2 提供了一个 tags 选项，当此选项设置为 true 时，用户可以通过键入文本并敲击 enter 键来添加新选项。

$('select').select2({
  tags: true
});

使用此选项，添加的新选项将自动附加到下拉列表中。如果您希望限制可以添加的选项，请将 tags 选项设置为一个数组，只包含允许添加的选项。

$('select').select2({
  tags: ['tag1', 'tag2', 'tag3']
});

方案2：使用 createTag 选项

如果您想要更多的控制权，可以使用 createTag 选项。此选项允许您定义一个函数，用于确定要向下拉列表添加的选项。

$('select').select2({
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  }
});

在此示例中，我们指定要添加的新选项的 id 和 text 属性，以及一个标志 newOption，指示该选项是新添加的。

您还可以定义一个函数，用于处理新选项的添加。

$('select').select2({
  createTag: function (params) {
    return {
      id: params.term,
      text: params.term,
      newOption: true
    }
  },
  insertTag: function (data, tag) {
    // 将新选项添加到数据源
    data.unshift(tag);
  }
});

在此示例中，我们定义一个名为 insertTag 的函数，用于将新选项添加到数据源中。

以上就是在 select2 中附加键入的值的两种解决方案，您可以根据实际需求选择适合您的方案。