如何解决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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。