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

n3ipq98p  于 2023-01-20  发布在  jQuery
关注(0)|答案(3)|浏览(209)

我正在使用Select2 jQuery插件
https://select2.github.io/用于参考
当我使用多个下拉选项时。所选项目的结果显示为框中的标签,但我只想显示所选项目的数量。
是否可以使用Select2 jQuery插件

    • 超文本标记语言**
<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>
    • 苏丹**
$('select').select2();

我希望输出如下

而不是类似于输出标记。

    • 第一个e第一个f第一个x
iszxjhcz

iszxjhcz1#

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

bprjcwpo

bprjcwpo2#

选择器当然可以改进,但是作为一个蓝图,在change上添加一个计数器元素并像这样隐藏标记似乎可以按要求工作。

$('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>
zf2sa74q

zf2sa74q3#

尽管给出了答案。
你可以试试这段代码。先初始化,然后关闭调用它。

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>`;
        })
    });

相关问题