如何从select2 multiselect中的选项列表中删除所选选项，并按选择的顺序显示所选选项

Question

我在我的表单中有select2多选字段，我想在选中它后从下拉列表中删除所选选项，如果从列表中删除它，再将它添加到列表中。此外，添加的项目应与选择的顺序相同。当前select2（4.0）不会删除所选项目，并且它按照它们在下拉列表中显示的顺序显示所选项目，而不是按选择顺序显示。

$(document).ready(function(){
    $('#dynamicAttributes').select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600
     });
 });

的jsfiddle：https://jsfiddle.net/rd62bhbm/

Answer 1

问的第1部分：

你可以做一个CSS技巧隐藏selected item像这样：

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

问的第2部分：

你也可以做一个JQuery技巧强制selected items到标签结束框，（通过选择选择项目，分离它（删除它），然后重新连接到标签框，然后调用“更改功能”以应用更改）：

$("select").on("select2:select", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);
    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

最后更新了JsFiddle，我希望它适合你，谢谢！

编辑＃1

您可以通过此调用Clear All Selected（应用Null值）：

$("#dynamicAttributes").val(null).trigger("change"); 

在按钮上：

$('#btnReset').click(function() {
    $("#dynamicAttributes").val(null).trigger("change"); 
});

Updated Fiddle #2

Answer 2

我找到了一种方法，使选定的值不再出现在选择弹出列表中

在文档中，您可以获得事件列表Select2 events

打开

我利用这些select2事件打开来隐藏选定的值

这是javascript ::

$(document).ready(function() {

  $('#dynamicAttributes').select2({
      allowClear: true,
      minimumResultsForSearch: -1,
      width: 600
  });

  // override the select2 open event
  $('#dynamicAttributes').on('select2:open', function () {
    // get values of selected option
    var values = $(this).val();
    // get the pop up selection
    var pop_up_selection = $('.select2-results__options');

    if (values != null ) {
      // hide the selected values
       pop_up_selection.find("li[aria-selected=true]").hide();

    } else {
      // show all the selection values
      pop_up_selection.find("li[aria-selected=true]").show();
    }

  });

});

这是一个DEMO

希望能帮助到你。

Answer 3

我的解决方案修改了＃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
    });
  };

Answer 4

$(document).ready(function(){
  $('#dynamicAttributes').select2({
        allowClear: true,
        minimumResultsForSearch: -1,
        width: 600
  });
});

单击删除符号按钮时出现错误

TypeError：this.placeholder未定义

使用

 $(document).ready(function(){
      $('#dynamicAttributes').select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600,
            placeholder: 'past your placeholder'

      });
});

Answer 5

$("#cqte").select2("val", "");
//cqte is id of dropdown