隐藏select2中的选定项目

Posted 2023-05-07

【中文标题】隐藏select2中的选定项目

【英文标题】：Hide selected items in select2

【发布时间】：2017-06-02 01:36:04

【问题描述】：

我正在尝试使用 select2 jQuery 插件来增强 html 应用程序中的 select 元素。选择允许选择多个项目。

我想删除当前从下拉列表中选择的项目。我没有在文档中找到明确的解决方案。

我找到的当前解决方案是使用templateResult 选项，如果选择了该项目，则模板函数返回null。这会导致 Results.prototype.template 函数设置 container.style.display = 'none' 但这会导致键盘仍然选择这些项目，即使它们不可见。

【参考方案1】：

只需应用此 CSS。

.select2-results__option[aria-selected=true]  display: none;

最新版本的小更新：

.select2-results__option--selected  display: none;

Source

【讨论】：

添加!important 以防止javascript 更改该属性不是更好吗？！

真正完美的解决方案:)

如果您选择了所有内容，这将给您留下一个空的结果框，并且不会向用户发送任何消息。

【参考方案2】：

查看由 Hakam Fostok 提供的 here 提供的答案。

为了完整起见，我在下面复制了他的答案：

我的解决方案在 #3158 行中修改了 select2.js（核心，版本 4.0.3）。添加以下验证：

if ($option[0].selected == true) 
 return;

通过此验证，我们可以从下拉列表中排除所选内容。如果你写了一个选定选项的名称，就会出现选项“noResult”的文本。

完整代码如下：

SelectAdapter.prototype.query = function (params, callback) 
 var data = [];
 var self = this;`

 var $options = this.$element.children();`

 $options.each(function () 
  var $option = $(this);    

  if (!$option.is('option') && !$option.is('optgroup') ) 
   return;
  

  if ($option[0].selected == true) 
   return;
  

  var option = self.item($option);    
  var matches = self.matches(params, option);    

  if (matches !== null) 
   data.push(matches);
  
 );

 callback(
  results: data
 );
;

出于我的目的，我使用的是 select2.js 文件，因此我在第 3195 行进行了更改。

【讨论】：

我在文档中也没有找到明确的解决方案，因此我求助于修改源代码。

【参考方案3】：

对于版本 4 和 4.1

.select2-container--default .select2-results__option[aria-selected=true] 
    display: none !important;

工作正常！

【参考方案4】：

除了@Satheez 的回答，这个脚本可以让你在隐藏所有选中的项目后维护占位符。

$('.selector').select2().on("change", function (e) 
    $('.select2-search__field').attr('placeholder', 'Here is your placeholder');
);