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/

相关文章:

javascript - 如何在 Meteor 中触发的事件上插入元素?

javascript - 使用 PHP 和 javascript 将数据替换为 json 文件

javascript - 通过Ajax访问js发布的外部文件中的id div

javascript - 使用格式动态设置 select2 选项

javascript - Node.js/REST : How to get _id from url

javascript - 为什么将鼠标悬停在图像固定按钮上不会出现

javascript - 如何使 div 像图像中的盒子一样?

javascript - Div 的简单功能隐藏/显示/切换

jquery-plugins - jQuery Select2 - 多次选择相同的选项

jquery - 如何更改 select2 框的高度