web-dev-qa-db-fra.com

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

Dans mon formulaire, j'ai sélectionné 2 champs de sélection multiple dans lesquels je souhaite supprimer l'option sélectionnée de la liste déroulante après l'avoir sélectionnée et l'ajouter à la liste si elle est supprimée de la liste. De plus, les éléments ajoutés doivent être dans le même ordre que leur sélection. La sélection actuelle2 (4.0) ne supprime pas les éléments sélectionnés et affiche les éléments sélectionnés dans leur ordre d'apparition dans la liste déroulante et non dans leur ordre de sélection.

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

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

jqueryjquery-select2select2
17
user1614862

Partie n ° 1 de Q:

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

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

Partie n ° 2 de Q:

Vous pouvez aussi faire un astuce JQuery pour forcer selected items à la fin de la boîte de balises, (en sélectionnant l'élément sélectionné, le détache (le supprime), puis l'ajoute à la boîte de balises, puis appelle changer 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 mise à jour JsFiddle , j'espère que cela fonctionne pour vous, merci!

Edit # 1

Vous pouvez Clear All Selected par cet appel (appliquer les valeurs Null)} _:

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

sur le bouton:

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

Mise à jour Fiddle # 2

44
Shady Alset

Je trouve un moyen de faire en sorte que les valeurs sélectionnées n'apparaissent plus dans la liste déroulante de sélection

Sur la documentation, vous pouvez avoir la liste des événements Select2 events

open

Je me sers de ces événements select2 open pour masquer les valeurs sélectionnées

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

  });

});

Voici une démo

J'espère que ça aide.

1
Oli Soproni B.

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

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

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

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
    });
  };
1
Javier
$(document).ready(function(){
  $('#dynamicAttributes').select2({
        allowClear: true,
        minimumResultsForSearch: -1,
        width: 600
  });
});

cela fait une erreur lorsque vous cliquez sur le bouton Supprimer le signe

TypeError: this.placeholder n'est pas défini

utilisation

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

      });
});
0
Avat Rezaei