jquery - 显示 2 个选项，然后显示“and x more”（选择 2）

Question

我在我的网站上使用 select2。用户可以选择大约 30 个选项，当所有选项都被选中时，它看起来有点笨拙并且占用了大量空间。

So when more than 3 options is selected, I'd like it to list the first 3 options, and then show "and x more".

有没有办法做到这一点？

Answer 1

一个项目需要它，所以我只是在研究它：

$("select").select2().on('change', function() {
    var select = $(this);
    var container = select.prev('.select2-container-multi').find('.select2-choices');
    var choices = container.find('.select2-search-choice');
    var val = select.val();
    var last = container.find('.select2-search-choice:last').clone();
    var lastVal = (!!val && val[val.length - 1].length > 30) ? val[val.length - 1].substring(0,30)+'...' : val[val.length - 1];
    if (val.length >= 2) {
        container.find('.select2-search-choice').remove();
        last.find('div').text(lastVal + ' + ' + (val.length - 1));
        last.prependTo(container);
        container.on('click', 'a', function(){
            container.find('.select2-search-choice').remove();
            select.val('');
        });
    }
});

请注意，这是基于 select2 插件的旧版本。