Как ограничить количество отображаемых тегов в select2? - PullRequest
Новая
       9

Как ограничить количество отображаемых тегов в select2?

0 голосов
/ 10 марта 2020

Мне нужно ограничить количество отображаемых выбранных тегов. Обратите внимание, что я не хочу ограничивать максимальное количество выбранных тегов. Таким образом, пользователь должен иметь возможность выбирать столько вариантов, сколько он хочет, но я хочу контролировать отображение выбранных тегов.

Например, я мог бы просто захотеть показать текст вроде: 5 items are selected. Я попытался использовать templateSelection параметр конфигурации, но эта функция вызывается для каждой выбранной опции, поэтому я не могу вернуть одну метку для нескольких выбранных опций.

Также я нашел этот ответ, но он не работает (установка html внутри обратного вызова изменения ничего не делает), и это больше похоже на взлом.

Есть ли какой-нибудь встроенный или лучший способ добиться этого?

Ответы [ 2 ]

1 голос
/ 11 марта 2020

В этом примере вы можете определить, через сколько выделенных вы хотите показать текст, используя условие if (selected > 4). Или удалите это условие, чтобы текст отображался для любого ввода. 

$("#singleSelectExample").select2({
  closeOnSelect: false
});

$("#singleSelectExample2").select2();

$('#singleSelectExample').on('change', function() {
  var selected = $(this).val().length;
  var of = $(this).find('option').length;

  if (selected > 4)
    $(this).parent().find('.select2 .select2-selection ul').html('Selected ' + selected + ' of ' + of +'  items.')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<select id="singleSelectExample" multiple style="width: 300px;">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
  <option value="8">Option 8</option>
  <option value="9">Option 9</option>
  <option value="10">Option 10</option>
</select>
0 голосов
/ 11 марта 2020

Наконец, я нашел эту замечательную статью об адаптерах, которая также содержит работающий jsfiddle.

...