限制显示的所选项目并显示剩余数量

Question

最多 5 个选定项目通过其文本显示，如果选择了 5 个以上项目，我想在单独的范围内显示前 5 个项目，后跟“剩余计数 + ”以限制选定项目。

  function initializeSelect2WithCheckbox(selector) {
        $(selector).select2({
            templateResult: formatSelectionWithCheckbox,
            templateSelection: function(item) {
                return $('<span>').text(item.text);
            },
            closeOnSelect: false,
            allowClear: true
        }).on('select2:select', function(e) {
            var selectedValue = e.params.data.id;

            if (selectedValue === 'all') {
                var allOptions = $(selector).find('option').not('[value="all"]');
                var selectAllChecked = $(e.target).find('option[value="all"]').prop('selected');

                allOptions.prop('selected', selectAllChecked);
                $(selector).trigger('change');
            } else {
                updateSelectAll(selector);
            }
            $(selector).select2('close');
        }).on('select2:unselect', function(e) {
            if (e.params.data.id === 'all') {
                $(selector).val(null).trigger('change'); // Clear all on unselect
            } else {
                updateSelectAll(selector);
            }
        });
    }

参考这张图片 显示我想要实现的

Answer 1

作为您可以使用的文档

maximumSelectionLength: 3

看这里