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

标签 javascript jquery jquery-select2

我正在使用 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();

我想要如下输出

enter image description here

而不是标签之类的输出。

Example working Fiddle

最佳答案

可以在初始化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

关于javascript - Select2 jquery 插件显示结果中选定项目的数量而不是标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38652325/

相关文章:

jquery - 将数组传递给 typeahead Bootstrap

javascript - 回调中的 Angular 访问 'this'

javascript - 将两个变量加在一起?

javascript - 加载外部 URL 时检测 PhoneGap/Cordova

javascript - 根据可见程度更改 DIV 不透明度

jquery - 如何格式化 Highcharts ?

jquery-select2 - Select2 在引导模式中不起作用

php - 无法从 select2 搜索结果中选择结果

javascript - 保持 Select2 打开(永不折叠/允许大小属性)

javascript - 从数据库记录生成递归 JSON