编程语言
首页 > 编程语言> > javascript – Select2 jquery插件显示结果中所选项目的数量而不是标签

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

作者:互联网

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

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

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

标签:select2,javascript,jquery
来源: https://codeday.me/bug/20191006/1860279.html