动态选项创建

除了预填充的选项菜单外,Select2还可以根据用户在搜索框中输入的文本动态创建新选项。此功能称为“标签”。要启用标记,请将tags 选项设置为 true:

<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

$(".js-example-tags").select2({
  tags: true
});

请注意,启用标记后,用户可以从预先存在的选项中进行选择,也可以通过选择第一项来创建新选项,这是用户到目前为止在搜索框中输入的内容。

使用多值选择框进行标签

标签也可以在多值选择框中使用。在下面的示例中,我们将multiple="multiple" Select2控件上的属性 tags: true 已启用:

<select class="form-control" multiple="multiple">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

尝试输入下拉列表中未列出的值-您可以将其添加为新选项!

自动标记为标签

Select2支持在用户在搜索字段中键入内容时自动添加选择的功能。尝试在下面的搜索字段中键入并输入空格或逗号。

标记化时应使用的分隔符可以使用tokenSeparators 选项。



自定义标签创建

标签属性

您可以通过定义一个createTag 回凋:

$('select').select2({
  createTag: function (params) {
    var term = $.trim(params.term);

    if (term === '') {
      return null;
    }

    return {
      id: term,
      text: term,
      newTag: true // 添加其他参数
    }
  }
});

限制标签创建

您可以通过添加一些逻辑来控制Select2何时允许用户创建新标签。 createTag 如果输入了无效值,则返回: null

$('select').select2({
  createTag: function (params) {
    // 如果没有@符号,则不要偏移以创建标记
    if (params.term.indexOf('@') === -1) {
      // 返回null以禁用标记创建
      return null;
    }

    return {
      id: params.term,
      text: params.term
    }
  }
});

自定义下拉菜单中的标签位置

您可以通过定义一个insertTag 回调:

$('select').select2({
  insertTag: function (data, tag) {
    // 在结果末尾插入标记
    data.push(tag);
  }
});