选择2（jQuery）。防止在多选中显示选定的值答案

【问题标题】：Select2 (jQuery). Prevent showing selected values in the multiple select选择2（jQuery）。防止在多选中显示选定的值
【发布时间】：2020-09-06 08:41:37
【问题描述】：

有什么办法可以防止select2中显示多个值？

我需要的是，当显示选择时，显示选择的值，但它们不显示在选择部分（在通常写入占位符的字段中）。

我查看了插件的文档，但找不到获取它的选项。

问题来自这样一个事实，即选择了大量选项，它使选择显示为两行，因此另一种解决方案可能是，而不是显示所选值的标签，它只是显示一个标签: "3 selected", "4 selected" 就像我在其他插件中看到的那样。

【问题讨论】：

请创建一个 sn-p 复制您的问题
@IslamElshobokshy，我明白你的意思，我同意你的看法（所以不是问问题和复制代码的地方）但很难重现它，因为我没有知道如何获得它。
嗨，库珀，我的回答对你有用吗？
嗨，Jason，我终于找到了其他方法。

标签： jquery jquery-select2

【解决方案1】：

我可能会找到其他解决方案来解决此问题，例如增加表单域的宽度或限制可以选择的项目数量。但是，您正在寻找的绝对是可能的。您可以收听select2:close event，它会在下拉菜单关闭后触发（即当您进行选择时）。

select2 在您的 <select> 元素旁边有一个兄弟元素，如下所示：

<span class="select2 ...">

其中包含一个无序列表，所有当前选定的选项都显示为单独的列表项。您可以获取所选项目的计数，然后修改无序列表以包含单个列表元素，显示所选选项的数量：

$('#mySelect2').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>`;
  })
});

我添加了select2-selection__choice 类以匹配列表项通常具有的样式。此外，此列表仅用于显示目的，不会影响提交到您的表单的内容。

您可能需要的不仅仅是单个项目的关闭事件，因此最好创建一个可以在任何地方调用的通用函数。您甚至可以设置一个阈值，以便列表正常显示，除非所选项目的数量超过阈值：

function select2UpdateNumSelected(selector, threshold = 0) {
  const $select = $(selector);
  const numSelected = $select.select2('data').length;

  // do nothing if the number of selections are at or below the threshold
  if (numSelected <= threshold) {
    return;
  }

  // display the number of selected items as a list item
  $select.next('span.select2').find('ul').html(function() {
    return `<li class="select2-selection__choice">${numSelected} selected</li>`;
  });
}

例如，如果选择了 0、1 或 2 个项目，这将表现得像一个普通的 select2 实例，但一旦选择了 3 个或更多选项，显示将变为 3 selected：

$('#mySelect2').on('select2:close', function() {
  select2UpdateNumSelected($(this), 2);
});

最后一点。如果您在加载页面时预先填充您的选择，它不会自动转换为 X selected 消息，除非您还在页面加载时调用该函数：

select2UpdateNumSelected('#mySelect2', 2);

【讨论】：

【解决方案2】：

你可以试试这个代码。首先初始化而不是关闭调用它。

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

【讨论】：