选择多个/所有选项时，选择多个选择变得很大

Question

在多选字段上使用Chosen.js时，如果用户选择了超过500个选项，则列表变得非常长。

有什么办法可以限制节目元素的数量吗？ 例如，当选择超过3个选项时，用户将选择（4）选项...而不是列出它们。

我想知道为什么他们的文档中没有这样的选项。

提前致谢。

Answer 1

你可以使用这样的东西：

$('.element').chosen().change(function() {
    var totalSelected = $(this).find('option:selected').size();
    var placeholder = $(this).find('option:first-child').text();
    if(totalSelected > 3) {
        $(this).next().find('.chosen-choices').find('li.search-choice').hide(),
        $(this).next().find('.chosen-choices').find('.literal-multiple').show();
        $(this).next().find('.chosen-choices').find('span.literal-multiple').text(placeholder + " ("+totalSelected+")");
    }
});

class literal-multiple是一个自定义元素，用于显示totalSelected元素。 您需要将其添加到所选插件的原型中：

file chosen.jquery.js

Chosen.prototype.set_up_html = function() {
   //stuff
   if(this.is_multiple) {
     var selVal  = this.default_text;
     this.container.html('<ul class="chosen-choices"><span class="literal-multiple"></span></ul>');
   }
};

Answer 2

SOrry我无法评论，因为我没有足够的声誉。 但是要添加到上一个答案，我们为什么不添加选择为<li>项目的n个用户，而不是添加单独的容器。

像这样的东西 -

$('.element').chosen().change(function() {
    var totalSelected = $(this).find('option:selected').size();
    var placeholder = $(this).find('option:first-child').text();
    if(totalSelected > 3) {
       $(this).next().find('.chosen-choices').find('li.search-choice').hide(),
       $(this).next().find('.chosen-choices')append('<li class="search-choice" <span>'+totalSelected+' users selected. </li>');
}
});

这似乎对我有用。