select2自定义标签 + 按钮

最新推荐文章于 2024-07-24 18:20:33 发布

爽、

最新推荐文章于 2024-07-24 18:20:33 发布

阅读量2.3k

点赞数 2

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43842590/article/details/86087617

版权

本文介绍如何在Select2组件中实现自定义标签功能，并结合按钮操作。当点击按钮时，下拉框添加一个预设标签，再次点击则移除。同时，用户可以输入自定义标签，但系统限制只能存在一个自定义标签。为确保这一限制，通过监听创建标签的事件并在输入时删除原有自定义标签，避免重复添加。

摘要由CSDN通过智能技术生成

需求：如图一所示，点击按钮时，下面的下拉框添加一个标签，当下面有该标签时，再点击消失。下拉框还能输入自定义标签，但要求只有一个自定义标签。

首先，支持添加自定义标签

var option={tags:true}

当然创建默认是enter键

也可自行设置支持逗号与空格

var option={tokenSeparators ：[ '，' ，'' ]}

要求只有一个自定义标签，那就需要知道创建标签的事件，而后进行限制

$('select').select2({
  createTag: function (params) {
    // Don't offset to create a tag if there is no @ symbol
    if (params.term.indexOf('@') === -1) {
      // Return null to disable tag creation
      return null;
    }

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

然而后来发现你自定义输入123时，这个事件会触发三次࿰