隐藏select2中的选定项目答案

【问题标题】：Hide selected items in select2隐藏select2中的选定项目
【发布时间】：2017-06-02 01:36:04
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery-select2 select2 jquery-select2-4

【解决方案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');
});

【讨论】：