Comment supprimer l'option sélectionnée de la liste d'options de select2 multiselect et afficher les options sélectionnées dans l'ordre de leur sélection

J'ai select2 multi sélectionner les champs de mon formulaire où je veux enlever l'option sélectionnée dans la liste déroulante après il est sélectionné et, de nouveau, l'ajouter à la liste si il est supprimé de la liste. Et également ajouté les articles doivent être dans le même ordre qu'ils ont choisi. L'actuel select2 (4.0) n'est pas de retirer le sélectionner des éléments et et c'est en montrant les éléments sélectionnés dans l'ordre où ils apparaissent dans la liste déroulante, pas dans l'ordre qu'ils sont sélectionnés.

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

JSFiddle: https://jsfiddle.net/rd62bhbm/

source d'informationauteur user1614862

  1. 35

    Partie #1 de Q:

    Vous pouvez faire un CSS truc pour masquer selected item comme ceci:

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

    Partie #2 de Q:

    Aussi, vous pouvez faire un JQuery truc à force selected items à la fin de balises de zone, ( par l'obtention de l'élément sélectionné sur sélectionnez, détacher (supprimer), puis reAppend pour les balises de la boîte, puis d'appeler "changement de fonction" pour appliquer les modifications ):

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

    Enfin mis à Jour JsFiddlej'espère que cela fonctionne pour vous, Merci !

    Edit #1

    Vous pouvez Clear All Selected par le présent appel (appliquer les valeurs Null):

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

    sur le Bouton:

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

    Mis À Jour Le Violon N ° 2

  2. 1

    J'ai trouver un moyen de rendre les valeurs sélectionnées de ne plus apparaître sur la sélection pop up liste

    Sur la documentation que vous peuvent-ils avoir la liste des événements de Select2 événements

    ouvrir

    Je me sers de ces select2 événement ouvert à masquer les valeurs sélectionnées

    Ici, c'est le 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();
    }

  });

});

    Ici est un DÉMO

    Espère que cela aide.

  3. 1

    ma solution a été modifié le select2.js (le noyau, la version 4.0.3) dans la ligne #3158. Ajouter la suite de la vérification :

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

    Avec cette vérification, nous pouvons exclure de la liste déroulante, ceux qui sont sélectionnés. Et si vous écrivez le nom d'une option sélectionnée, apparaît le texte de l'option "noResult" .

    Voici le code complet:

    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. -2

    $("#cqte").select2("val", "");
    //cqte est l'id de liste déroulante