jQuery Select2 v4：如何将新增标签选项保存至数据以持久显示？

嗨，我来帮你搞定这个Select2的小麻烦！

你遇到的问题其实是tags: true的默认行为导致的：当你新增一个标签时，它只是临时渲染在下拉列表里，并没有真正添加到Select2绑定的持久化数据源（比如<select>的<option>集合，或者远程接口返回的数据）中。所以当你切换回已有的选项，这个临时标签就会被清除。

要让新增的选项始终可见，我们需要把它真正存入数据源里，下面分两种场景给你解决方案：

场景一：本地静态数据源（基于<select>标签） #

这是最常见的情况，直接监听Select2的选择事件，把新增标签转为<option>元素添加到原<select>中即可：

示例代码 #

HTML

<select id="demoSelect" style="width: 320px;">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

JavaScript

$(document).ready(function() {
  // 初始化Select2
  $('#demoSelect').select2({
    tags: true,
    placeholder: "选择或输入新水果",
    allowClear: true
  });

  // 监听选择事件，捕获新增标签
  $('#demoSelect').on('select2:select', function(e) {
    const selectedItem = e.params.data;
    const $select = $(this);

    // 判断当前选中的是不是新增的标签（没有对应的option元素）
    if (!$select.find(`option[value="${selectedItem.id}"]`).length) {
      // 创建新的option元素
      const $newOption = $('<option>', {
        value: selectedItem.id, // 这里可以用文本作为value，或者自定义规则生成唯一值
        text: selectedItem.text,
        selected: true
      });
      // 把新option添加到select里
      $select.append($newOption);
    }
  });
});

效果说明 #

当你输入一个新标签（比如“草莓”）并选择它后，这个选项会被自动添加到<select>的<option>列表中，之后不管你切换到哪个已有选项，再打开下拉列表都能看到“草莓”选项，完全不会消失。

场景二：远程动态数据源（基于ajax请求） #

如果你的Select2是通过ajax配置从后端拉取数据，那需要两步：

1. 当用户新增标签时，调用后端接口把这个标签保存到数据库
2. 在Select2的下拉加载逻辑中，确保返回的数据源包含刚新增的标签

核心代码示例 #

$('#remoteSelect').select2({
  tags: true,
  ajax: {
    url: '/api/fruits',
    dataType: 'json',
    processResults: function(data) {
      return {
        results: data.map(item => ({ id: item.id, text: item.name }))
      };
    }
  },
  createTag: function(params) {
    // 自定义新增标签的规则
    return {
      id: params.term,
      text: params.term,
      isNew: true // 标记为新增标签
    };
  }
}).on('select2:select', function(e) {
  const item = e.params.data;
  // 如果是新增标签，调用后端接口保存
  if (item.isNew) {
    $.post('/api/fruits', { name: item.text })
      .done(function(newItem) {
        // 保存成功后，可以更新Select2的选项列表
        const $option = $('<option>', {
          value: newItem.id,
          text: newItem.name,
          selected: true
        });
        $(this).append($option);
      });
  }
});

这样一来，新增的标签会被持久化到后端数据库，后续每次打开下拉列表都能从接口获取到这个选项。

内容的提问来源于stack exchange，提问作者Peter Griffin