Cómo eliminar la opción seleccionada de la lista de opciones en select2 multiselect y mostrar las opciones seleccionadas en el orden en que están seleccionadas

Solución:

Parte # 1 de P:

Puedes hacer un Truco CSS esconder selected item como esto:

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

Parte # 2 de Q:

También puedes hacer un Truco de JQuery para forzar selected items al final del cuadro de etiquetas, (al obtener el elemento seleccionado en la selección, sepárelo (elimínelo), luego vuelva a agregarlo al cuadro de etiquetas, luego llame a la “función de cambio” para aplicar los cambios):

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

Finalmente actualizado JsFiddle, Espero que te funcione, ¡Gracias!

Editar # 1

Usted puede Clear All Selected por esta llamada (aplicar valores nulos):

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

en el botón:

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

Violín actualizado # 2

Encuentro una manera de hacer que los valores seleccionados ya no aparezcan en la lista emergente de selección

En la documentación puede tener una lista de eventos Select2 events

abierto

Hago uso de estos eventos select2 abiertos para ocultar los valores seleccionados

Aquí está el 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();
    }

  });

});

Aquí hay una DEMO

Espero eso ayude.

mi solución fue modificada select2.js (el núcleo, versión 4.0.3) en la línea # 3158. Agregue la siguiente verificación:

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

Con esta verificación, podemos excluir de la lista desplegable, los seleccionados. Y si escribe el nombre de una opción seleccionada, aparecerá el texto de la opción “noResult”.

Aquí el código completo:

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

---

---

Utiliza Nuestro Buscador