選擇多個/所有選項時，選擇多個選擇變得很大

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>');
}
});

這似乎對我有用。