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

我想要以下输出：

而不是像输出那样的标记。

示例工作Fiddle

- murli2308

---

如果你看不到元素，你怎么取消选择它们？ - Justinas

@ Justinas 3. 如果您打开列表并单击所选项目，则会取消选择。 - Theodore K.

@Justinas - @8odoros 是正确的。 - murli2308

尝试使用Bootstrap选择器：https://silviomoreto.github.io/bootstrap-select/examples/ - GuRu

我猜你不想要像这样简单的东西 https://jsfiddle.net/402ejhoy/1/ - Theodore K.

@8odoros 计数没问题。但我不想要选定的标签，我只想要计数。 - murli2308

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
选择2（select2）事件的参考链接: 这里

编辑:
如果您希望在用户取消选择所有内容时显示空白，请使用此示例: 这里

编辑:
已更新以删除数据取消选择中的缺陷并将其更改为主要答案。 示例: 这里

- Prasun Jajodia

---

这段代码存在问题。如果你在顶部框中选择了某些内容并再次点击，它会显示“0项已选择”，但实际上仍然保留了之前的选择。 - Theodore K.

@8odoros 在 jsfiddle 上它运行得很好。它显示 0 个项目被选中，因为没有任何项目被选中。再次点击相同的项目会取消选择。用户不应该有取消选择的权利吗？ - Prasun Jajodia

仍然没有正常工作。请检查这个：点击一个项目（框上显示“已选择1项”）。点击框（打开列表，突出显示所选项目）。现在，再次点击框（现在显示“已选择0项”），但如果您再次点击，列表仍会打开并突出显示所选项目。 - Theodore K.

它正在删除搜索“input”。我不想在“close”事件上使用它，因为我将使用“closeOnSelect:false”。 - murli2308

@8odoros 我明白了..我做了一点谷歌搜索并相应地更改了代码。 - Prasun Jajodia

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>

- Theodore K.

---

搜索“输入”字段正在被移除。 - murli2308

你正在展示计数，这很好。但它正在移除搜索的“输入”字段，而我不想要这个。 - murli2308

这将更新页面上的每个select2。 - Taha Paksu

Answer 3

尽管答案已经给出，您可以尝试这段代码。首先进行初始化，然后在关闭时调用它。

   jQuery('.multi-select-pbwp').select2();
    $('.multi-select-pbwp').on('select2:close', function() {
        const $select = $(this);
        const numSelected = $select.select2('data').length;

        $select.next('span.select2').find('ul').html(function() {
            return `<li class="class="select2-selection__choice">${numSelected} selected</li>`;
        })
    });

- Arman H