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();

我想要输出如下

而不是像输出的标签.

工作小提琴的例子

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事件:这里

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

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

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('<div style="line-height: 28px; padding: 5px;" class="counter">'+counter+' selected</div>');
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select multiple style="width:100%" id="mySelect">
  <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>