Select2 jquery插件显示结果中所选项目的数量而不是标签

我正在使用Select2 jQuery插件 。

https://select2.github.io/供参考

当我使用多个下拉选项时。 所选项目的结果在框中显示为标签，但我只想显示所选项目的数量。

是否可以使用Select2 jQuery插件

HTML

 Name1 Name2 Name3 Name4 Name5 Name6 Name7  

JS

 $('select').select2(); 

我想要输出如下

而不是像输出的标签。

工作小提琴的例子

Answer 1

您可以在初始化select2后添加此代码

 $('select').on('select2:close', function (evt) { var uldiv = $(this).siblings('span.select2').find('ul') var count = $(this).select2('data').length if(count==0){ uldiv.html("") } else{ uldiv.html("
"+count+" items selected
") } 

参考： jsfiddle
参考select2事件： 这里

编辑：
如果要在用户取消选择所有内容时显示空白，请使用此小提琴： 此处

编辑：
更新以删除取消选择数据中的缺陷并将其更改为主要答案。 小提琴： 这里

Answer 2

选择器肯定可以改进，但作为蓝图，在更改时添加计数器元素并隐藏这样的标签似乎按照要求工作。

 $('select').select2({closeOnSelect: false}).on("change", function(e) { $('.select2-selection__rendered li:not(.select2-search--inline)').hide(); $('.counter').remove(); var counter = $(".select2-selection__choice").length; $('.select2-selection__rendered').after('
'+counter+' selected
'); }); 

 .counter{ position:absolute; top:0px; right:5px; } .select2-search--inline{ background-color:Gainsboro; } 

    Name1 Name2 Name3 Name4 Name5 Name6 Name7