Select2jQuery防止在多重选择中显示选定的值

问题描述

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

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

我已经查看了该插件的文档，但是找不到用于获取该插件的选项。

问题出在以下事实：选择了很多选项，这使得选择显示在两行中，因此另一种解决方案可能是，不显示所选值的标签，而是简单地显示带有：“ 3个已选择”，“ 4个已选择”，就像我在其他插件中看到的那样。

解决方法

我可能会找到其他解决此问题的方法，例如增加表单字段的宽度或限制可以选择的项目数。但是，您要找的绝对有可能。您可以收听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个已选择：

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

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

select2UpdateNumSelected('#mySelect2',2);

jquery jquery-select2