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

Question

我在一个页面上有多个元素触发了对元素的 select2 加载。我正在尝试有条件地检查元素是否具有某个类，如果有，请添加 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 或 假。另一个是在您的.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>