Как удалить выбранную опцию из списка опций в select2 multiselect и отобразить выбранные параметры в том порядке, в котором они выбраны

Ответ 1

Часть № 1 Q:

Вы можете сделать трюк CSS, чтобы скрыть selected item следующим образом:

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

Часть № 2 Q:

Также вы можете сделать трюк 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"); 
});

Обновлено Fiddle # 2

Ответ 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

Надеюсь, что это поможет.

Ответ 3

Мое решение было изменено select2.js(ядро, версия 4.0.3) в строке # 3158. Добавьте следующую проверку:

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
    });
  };

Ответ 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'

      });
});

Ответ 5

Другой подход, позволяющий скрыть выбранные значения, заключается в использовании раскрывающегося параметра templateResult для return null если значение помечено как выбранное.

function hideSelected(value) {
  if (value && !value.selected) {
    return $('<span>' + value.text + '</span>');
  }
}

$(document).ready(function() {
  $('#dynamicAttributes').select2({
    allowClear: true,
    placeholder: {
      id: "",
      placeholder: "Leave blank to ..."
    },
    minimumResultsForSearch: -1,
    width: 600,
    templateResult: hideSelected,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select id="dynamicAttributes" multiple="true" data-tags="true">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

Ответ 6

Удалить (снять выбор) элемент из select2 нескольких выбранных элементов

Первый шаг: добавьте "множественный" класс CSS к элементу select2, чтобы получить истинный элемент, который вы хотите

<select class="multiple">
....
</select>

    $('select.multiple').on('select2:selecting', function (e) {
        var select = this;
        var idToRemove = '0';
        var selections = $(select).select2('data');

        var Values = new Array();

        for (var i = 0; i < selections.length; i++) {
            if (idToRemove !== selections[i].id) {
                Values.push(selections[i].id);
            }
        }
        $(select).val(Values).trigger('change');
    });

Ответ 7

Попробуй это:

$(".class_name").val(null).trigger("change"); 

или же

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

Ответ 8

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