[英]Chosen multiple select becomes huge when many/all options are selected
When using Chosen.js on a multiple select field, if there are over 500 options that the user has selected, the list just becomes ridiculously long. 在多选字段上使用Chosen.js时,如果用户选择了超过500个选项,则列表变得非常长。
Is there any way I could limit the number of show elements? 有什么办法可以限制节目元素的数量吗? For example when chosing over 3 options, the user will have (4) options are selected... , instead of them being listed. 例如,当选择超过3个选项时,用户将选择(4)选项...而不是列出它们。
I wonder why there's no such option in their documentation. 我想知道为什么他们的文档中没有这样的选项。
Thanks in advance. 提前致谢。
You can use something like this: 你可以使用这样的东西:
$('.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+")");
}
});
The class literal-multiple
is a custom element to show the totalSelected
elements. class literal-multiple
是一个自定义元素,用于显示totalSelected
元素。 You need to add it in the prototype of the chosen plugin: 您需要将其添加到所选插件的原型中:
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>');
}
};
SOrry I am unable to comment since I don't have enough reputation. SOrry我无法评论,因为我没有足够的声誉。 But to add to the previous answer, instead of adding a separate container, why don't we just append the n users selected as a <li> item. 但是要添加到上一个答案,我们为什么不添加选择为<li>项目的n个用户,而不是添加单独的容器。
Something like this - 像这样的东西 -
$('.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>');
}
});
This seems to work for me. 这似乎对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.