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

Question

我正在使用 Select2 jQuery 插件。

https://select2.github.io/供引用

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

Select2 jQuery 插件是否可行

HTML

<select multiple style="width:100%">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
  <option value="5">Name5</option>
  <option value="6">Name6</option>
  <option value="7">Name7</option>
</select>

JS

$('select').select2();

我想要如下输出

而不是标签之类的输出。

Example working Fiddle

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("<li>"+count+" items selected</li>")
        }

引用:jsfiddle
引用 select2 事件:Here

编辑:
如果您想在用户取消选择所有内容时显示空白，使用这个 fiddle :here

编辑:
更新以消除取消选择数据的缺陷并将其更改为主要答案。 fiddle :here