Question

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

因此，当选择了3个以上的选项时，我希望列出前3个选项，然后显示＆＃34;和x更多＆＃34;。

有没有办法做到这一点？

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插件。

显示2个选项然后＆＃34;和x更多＆＃34; （SELECT2）

1 个答案: