有条件地将标签选项参数添加到 select2

Question

我在页面上有多个元素触发了对元素的 select2 加载。我正在尝试有条件地检查元素是否具有某个 class，如果是，则添加 tag 选项；否则不要。我以为这样的事情会奏效，但事实并非如此：

$('.element_to_add_select_two_on').select2({
    tags:function(element) {
        return (element.className === 'classname_i_am_targeting');
    },
});

我在这里错过了什么？我正在让自己接受以下滑稽表演以使其成为目标并加载：

$('.element_to_add_select_two_on').each((index,element) => {
    let showTags = false;

    if ($(element).attr('class').split(' ').includes('classname_i_am_targeting')) {
        showTags = true;
    }

    $(element).select2({
        tags:showTags,
    });
});

Answer 1

您的第一次尝试存在一些问题。首先，当您想要的是函数的 result 时，您将 tags 定义为函数，因为 tags 需要定义为布尔值 true 或 false。另一个是在您的 .select2() 调用中，您无权以您认为的方式访问调用元素 $('.element_to_add_select_two_on')。这不是您正在监听的事件，它是一个函数调用，需要一个对象与其配置一起传递。

您表示您的第二种方法有效，但可以使用 jQuery hasClass() 函数对其进行简化：

$('.element_to_add_select_two_on').each((index, element) => {
  $(element).select2({
    tags: $(element).hasClass('classname_i_am_targeting'),
  });
});

然而，有一种更简单的方法可以完成所有这些，而且它更灵活并且已经通过 data-* attributes 的方式内置到 select2 中（注意，你需要 jQuery > 1.x)。您可以简单地将 data-tags="true" 添加到您想要启用标签的任何 select 元素。这些将覆盖初始化 select2 时使用的任何配置选项以及任何默认值：

<select data-tags="true">
    ...
</select>

有条件地将标签选项参数添加到 select2

Conditionally adding tags options parameter to select2

html

jquery

jquery-select2