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

Posted 2023-05-07

【中文标题】Select2 jquery插件在结果中显示所选项目的数量而不是标签

【英文标题】：Select2 jquery plugin show number of selected items in the result instead of tags

【发布时间】：2016-12-03 18:54:25

【问题描述】：

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

我想要输出如下

而不是像输出一样的标签。

Example working Fiddle

【问题讨论】：

如果您看不到元素，您将如何取消选择它们？

@ Justinas 3. 如果您打开列表并单击选定的项目，则会取消选择它。

@Justinas - @ 8odoros 是对的

尝试引导选择选择器silviomoreto.github.io/bootstrap-select/examples

我想像这样简单的东西不是你想要的jsfiddle.net/402ejhoy/1

【参考方案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事件：Here

编辑：如果您想在用户取消选择所有内容时显示空白， 使用这个小提琴：here

编辑： 更新以消除取消选择数据的缺陷并将其更改为主要答案。 小提琴：here

【讨论】：

这段代码有问题。如果您选择某些内容并再次单击顶部框中的内容，则会显示“已选择 0 个项目”，同时保留选择。

@8odoros jsfiddle 工作正常。它说选择了 0 个项目，因为选择了零个项目。再次单击同一项目取消选择它。用户不应该取消选择选择吗?

@8odoros 编辑了答案并包含了一个小提琴以在所有项目都被取消选择时清除该字段

仍然无法正常工作。检查此项：单击一个项目（框显示“已选择 1 个项目”）。单击框（打开列表，突出显示所选项目）。现在，再次单击该框（现在显示“已选择 0 个项目”），但如果再次单击，列表仍会打开并突出显示所选项目。

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

【参考方案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>

【讨论】：

搜索 input 字段将被删除。

您显示的计数很好。但它正在删除我不想要的 input 搜索字段

这是更新页面上的每个 select2s。

【参考方案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>`;
        )
    );