Блог

У меня есть несколько элементов на странице, которые запускают загрузку 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,
    });
});
  

При первой попытке возникает несколько проблем. Во-первых, вы определяете tags как функцию, когда то, что вы хотите, является результатом функции, поскольку tags должно быть определено как логическое значение true или false. Другой заключается в том, что внутри вашего .select2() вызова у вас нет доступа к вызывающему элементу $('.element_to_add_select_two_on') так, как вы думаете. Это не событие, которое вы прослушиваете, это вызов функции, который хочет передать объект с его конфигурацией.

Вы сообщили, что ваш второй метод работает, но его можно упростить с hasClass() помощью функции jQuery:

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

Однако существует гораздо более простой способ сделать все это, и он гораздо более гибкий и уже встроен в select2 с помощью атрибутов data- * (обратите внимание, вам нужен jQuery> 1.x). Вы можете просто добавить data-tags="true" в любой из ваших select элементов, с которыми вы хотите включить теги. Они переопределят любые параметры конфигурации, используемые при инициализации select2, а также любые значения по умолчанию:

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