Réinitialiser select2 valeur et de montrer de l'espace réservé

Vous devez définir la select2 comme

$("#customers_select").select2({
    placeholder: "Select a customer",
    initSelection: function(element, callback) {                   
    }
});

Pour réinitialiser le select2

$("#customers_select").select2("val", "");

La accepté de répondre ne fonctionne pas dans mon cas. Je vais essayer cela, et cela fonctionne:

Définir select2:

$("#customers_select").select2({
    placeholder: "Select a State",
    allowClear: true
});

ou

$("#customers_select").select2({
    placeholder: "Select a State"
});

Pour réinitialiser:

$("#customers_select").val('').trigger('change')

ou

$("#customers_select").empty().trigger('change')

Select2 utilise une classe CSS spécifique, donc un moyen facile de le réinitialiser est:

$('.select2-container').select2('val', '');

Et vous avez l'avantage de si vous avez plusieurs Select2 à la même forme, tous seront réinitialisées avec cette commande unique.

POUR SUPPRIMER LA VALEUR SÉLECTIONNÉE

$('#employee_id').select2('val','');

---

POUR EFFACER LES VALEURS DE L'OPTION

$('#employee_id').html('');

Tout d'abord, vous devez définir select2 comme ceci:

$('#id').select2({
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
})

Pour réinitialiser select2, tout simplement, vous pouvez utiliser le bloc de code suivant:

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

C'est la façon correcte:

 $("#customers_select").val('').trigger('change');

Je suis l'aide de la dernière version de Select2.

J'ai essayé les solutions ci-dessus, mais il ne fonctionne pas pour moi.

C'est le genre de hack, où vous n'avez pas à déclencher un changement.

$("select").select2('destroy').val("").select2();

ou

$("select").each(function () { //added a each loop here
        $(this).select2('destroy').val("").select2();
});

À la suite de la recommandé façon de faire. Trouvé dans la documentation https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (ce qui semble être un problème assez commun):

Lorsque cela se produit, cela signifie généralement que vous n'avez pas de vide <option></option> la première option de votre <select>.

comme dans:

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

J'ai essayé les solutions ci-dessus, mais aucune n'a fonctionné avec la version 4x.

Ce que je veux réaliser est: désactivez toutes les options, mais ne touche pas l'espace réservé. Ce code fonctionne pour moi.

selector.find('option:not(:first)').remove().trigger('change');

comme des v. 4.0.x...

pour effacer les valeurs, mais aussi restaurer l'espace réservé à l'usage...

.html('<option></option>');  //defaults to placeholder

si elle est vide, il sélectionne le premier élément de l'option à la place qui peut ne pas être ce que vous voulez

.html(''); //defaults to whatever item is first

franchement...Select2 est une douleur dans le cul, ça m'étonne qu'il n'a pas été remplacé.

Avant d'effacer la valeur à l'aide de cette $("#customers_select").select2("val", "");
Essayez de définir le focus à n'importe quel autre contrôle sur réinitialiser cliquez sur.

Cela permettra de montrer l'espace réservé à nouveau.

Bien à chaque fois que je l'ai fait

$('myselectdropdown').select2('val', '').trigger('change');

J'ai commencé à obtenir une sorte de décalage après une période de trois à quatre déclencheurs. Je suppose qu'il y a une fuite de mémoire. Ses pas dans mon code, parce que si je dois supprimer cette ligne, mon application est en décalage gratuitement.

Depuis que j'ai allowClear options, c'est vrai, je suis allé avec

$('.select2-selection__clear').trigger('mousedown');

Cela peut être suivi par un $('myselectdropdown').select2 ("fermer"); événement déclencheur sur la select2 élément du dom dans le cas où vous souhaitez fermer les suggestion de liste déroulante.

Après avoir essayé la première 10 solutions ici et à défaut, j'ai trouvé cette solution de travail (voir "nilov a commenté sur Avr 7 • édition" commentaire en bas de la page):

(function ($) {
   $.fn.refreshDataSelect2 = function (data) {
       this.select2('data', data);

       //Update options
       var $select = $(this[0]);
       var options = data.map(function(item) {
           return '<option value="' + item.id + '">' + item.text + '</option>';
       });
       $select.html(options.join('')).change();
   };
})(jQuery);

La modification est alors effectuée:

var data = [{ id: 1, text: 'some value' }];
$('.js-some-field').refreshDataSelect2(data);

(L'auteur présentait à l'origine var $select = $(this[1]);, dont un auteur a corrigé à var $select = $(this[0]);, que je montre ci-dessus.)

$('myselectdropdown').select2('val', '0')

où 0 est votre première valeur de la liste déroulante

Je ne sais pas si quelqu'un d'autre vécu cela, mais une fois que le code a frappé le déclencheur ("changement") mon javascript est juste arrêté, ne revint jamais en forme sur la gâchette, et le reste de la fonction n'a jamais été exécutée.

Je ne suis pas assez familier avec jquerys déclencheur à dire que c'est pas prévu sur. J'ai eu autour d'elle en l'enveloppant dans un setTimeout, laid mais efficace.

Je faire pour ce cas:

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();

1. J'ai changer de sélectionner une valeur dans le vide
2. Je enlevez le récipient pour select2
3. Re-appel select2