Question

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

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

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

Answer 1

只需应用此CSS。

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

Source

Answer 2

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

为了完整起见，我在这里转载了他的答案：

我的解决方案修改了＃3158行中的select2.js（核心版本4.0.3）。添加以下验证：
if ($option[0].selected == true) {
 return;
}
通过此验证，我们可以从下拉列表中排除所选的验证。如果您写下所选选项的名称，则显示选项＆＃34; noResult＆＃34;的文本。

这里有完整的代码：
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行进行了更改。

Answer 3

除了@Satheez答案外，该脚本还可以让您在隐藏所有选定项之后维护占位符。

UPDATE datavalue SET Col1 = '6009'
WHERE [your conditions]
AND Col1 NOT IN (SELECT Col1 FROM datavalue WHERE Col1 = '6009')

Answer 4

对于版本 4 和 4.1

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

工作正常！

隐藏select2中的选定项目

4 个答案: