Réinitialiser la valeur select2 et afficher l'espace réservé

Comment définir l'espace réservé lors de la réinitialisation de la valeur par select2. Dans mon exemple, si les emplacements ou les cases de sélection de grade sont cliqués et que mon select2 a une valeur, la valeur de select2 doit être réinitialisée et afficher l'espace réservé par défaut. Ce script réinitialise la valeur mais n'affiche pas l'espace réservé

$("#locations, #grade ").change(function() {
   $('#e6').select2('data', {
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   });
});

$("#e6").select2({
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) {
     return e.subject;
   },
   minimumInputLength: 2,
   ajax: {
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) {
       return {
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       };
     },
     results: function(data, page) {
       return {
         results: data
       };
     }
   },
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) {
     return m;
   }
});

Vous devez définir le select2 comme

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

Pour réinitialiser le select2

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

Select2 a changé son API:

Select2: la select2("val")méthode est obsolète et sera supprimée dans les versions ultérieures de Select2. Utilisez plutôt $ element.val ().

La meilleure façon de le faire maintenant est:

$('#your_select_input').val('');

Edit: décembre 2016 Les commentaires suggèrent que ce qui suit est la façon mise à jour de le faire:

$('#your_select_input').val([]);

La réponse acceptée ne fonctionne pas dans mon cas. J'essaye ça, et ça marche:

Définissez select2:

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

ou

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

Réinitialiser:

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

ou

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

La seule chose qui peut fonctionner pour moi est:

$('select2element').val(null).trigger("change")

J'utilise la version 4.0.3

Référence

Selon la documentation Select2

Avec Select2 version 4.0.9, cela fonctionne pour moi:

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

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

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

Et vous avez l'avantage que si vous avez plusieurs Select2 sous la même forme, tous seront réinitialisés avec cette seule commande.

Utilisez ceci :

$('.select').val([]).trigger('change');

POUR SUPPRIMER LA VALEUR SÉLECTIONNÉE

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

POUR EFFACER LES VALEURS D'OPTION

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

Je sais que c'est une sorte de vieille question, mais cela fonctionne pour la version 4.0 de select2

 $('#select2-element').val('').trigger('change');

ou

$('#select2-element').val('').trigger('change.select2'); 

si vous avez des événements de modification liés

Utilisez ce qui suit pour configurer select2

    $('#selectelementid').select2({
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    });

Et pour effacer la sélection d'entrée par programme

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

C'est la bonne façon:

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

J'utilise la dernière version de Select2.

Vous devez d'abord définir select2 comme ceci:

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

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

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

Vous pouvez effacer la sélection en

$('#object').empty();

Mais cela ne vous ramènera pas à votre espace réservé.

Donc, c'est une demi-solution

J'ai essayé les solutions ci-dessus mais cela n'a pas fonctionné pour moi.

C'est une sorte de piratage, où vous n'avez pas à déclencher de changement.

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

ou

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

Pour les utilisateurs qui chargent des données distantes, cela réinitialisera le select2 dans l'espace réservé sans déclencher ajax. Fonctionne avec v4.0.3:

$("#lstProducts").val("").trigger("change.select2");

Ainsi, pour réinitialiser le formulaire, certains d'entre vous auront un bouton de réinitialisation. Ajoutez le code suivant à l'intérieur de la balise de script

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
    $("#select_field_id").select2({
    placeholder: "this is a placeholder",
    });
});

Ou tout simplement pour vider le champ de sélection sans conserver d'espace réservé:

$('.your_btn_class').click(function(){
    $('#select_field_id').val([]);
 });

Pour l'espace réservé

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

Pour réinitialiser une sélection 2

$('#stateID').val('');
$('#stateID').trigger('change');

J'espère que cela t'aides

Suivre la manière recommandée de le faire. Trouvé dans la documentation https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder (cela semble être un problème assez courant):

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

un péché:

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

J'avais aussi ce problème et cela vient du fait de val(null).trigger("change");lancer une No select2/compat/inputDataerreur avant que l'espace réservé ne soit réinitialisé. Je l'ai résolu en attrapant l'erreur et en définissant directement l'espace réservé (avec une largeur). Remarque: Si vous en avez plusieurs, vous devrez les attraper chacun.

try{
    $("#sel_item_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
try{
    $("#sel_location_ID").select2().val(null).trigger("change");
}catch(err){
    console.debug(err)
}
$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

J'utilise Select2 4.0.3

à partir de v.4.0.x ...

pour effacer les valeurs, mais aussi restaurer l'utilisation de l'espace réservé ...

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

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

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

franchement ... Select2 fait tellement mal au cul, ça m'étonne qu'il n'ait pas été remplacé.

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

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

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

En utilisant select2 version 3.2, cela a fonctionné pour moi:

$('#select2').select2("data", "");

N'a pas eu besoin de mettre en œuvre initSelection

Après avoir essayé les 10 premières solutions ici et avoir échoué, j'ai trouvé que cette solution fonctionnait (voir le commentaire "nilov commenté le 7 avril • édité" 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);

Le changement est alors effectué:

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

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

Utilisez ce code dans votre fichier js

$('#id').val('1');
$('#id').trigger('change');

Avant d'effacer la valeur à l'aide de cette $("#customers_select").select2("val", ""); paramètre Essayez de mettre le focus sur tout autre contrôle lors de la réinitialisation, cliquez sur.

Cela affichera à nouveau l'espace réservé.

L'interface DOM, garde déjà une trace de l'état initial ...

Il suffit donc de faire ce qui suit:

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

Eh bien chaque fois que je l'ai fait

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

J'ai commencé à avoir une sorte de décalage après environ trois à quatre déclencheurs. Je suppose qu'il y a une fuite de mémoire. Ce n'est pas dans mon code parce que si je supprime cette ligne, mon application est sans décalage.

Étant donné que les options allowClear sont définies sur true, je suis allé avec

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

Ceci peut être suivi d'un $ ('myselectdropdown'). Select2 ('close'); déclencheur d'événement sur l'élément select2 dom au cas où vous voudriez fermer la liste déroulante des suggestions ouvertes.

Une façon [très] hacky de le faire (je l'ai vu fonctionner pour la version 4.0.3):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

• allowClear doit être défini sur true
• une option vide doit exister dans l'élément select

Ma solution est:

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });

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

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