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


212

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

Réponses:


238

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", "");

7
J'ai essayé ceci avec un <select multiple>, mais j'obtiens l'erreur: L'option 'initSelection' n'est pas autorisée pour Select2 lorsqu'elle est attachée à un élément <select>.
Sorin Postelnicu

15
Cela ne fonctionne pas pour moi. L'espace réservé ne s'affiche toujours pas.
bcr

5
Voir la réponse de @Lego Stormtroopr ci-dessous, qui reflète la nouvelle méthode selon l'API de Select2. La méthode ci-dessus est déconseillée.
David

14
Depuis la v4.0.3, cela ne semble .select2("val", "")plus fonctionner.
adamj

31
$("#customers_select").val('').trigger('change') ;Je l'ai utilisé et cela a fonctionné.
Akshay Kulkarni

125

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([]);

136
Cela met à jour la valeur, mais pour qu'elle s'affiche correctement, vous devrez déclencher un événement de modification. $('#your_select_input').val('').trigger('change')
Saneem

5
Cela ne fonctionne pas pour moi. L'espace réservé ne s'affiche toujours pas.
bcr

3
Cela fonctionne pour moi avec l' changeajout de déclencheur, mais déclenche également la bibliothèque de validation que nous utilisons - pour l'instant, je devrai utiliser la version obsolète.
Dave Newton

6
Cela ne fonctionne pas correctement en utilisant select2 4.0.2. Il réinitialisera la sélection et restaurera l'espace réservé, mais lorsque je choisis une nouvelle valeur (après réinitialisation), je vois également sélectionnée une option "chaîne vide" (c'est-à-dire une boîte avec seulement un "x").
kounoupis

1
$ ('# your_select_input'). val (''). trigger ('change') ne fonctionne que lorsque l'espace réservé est fourni. sinon l'option de chaîne vide sera affichée comme option sélectionnée.
amol

118

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')

2
J'ai trouvé qu'à moins que l'espace réservé ne soit défini, allowClear ne fonctionne pas
Dan Tappin

Ni $('#your_select_input').val('').trigger('change')ni $('#your_select_input').val('');ne fonctionne pas dans Firefox
Alex Art.

1
cela fonctionne pour moi, il supprime toutes les données du select2 que j'utilise v4.0.3
ClearBoth

8
$ ("# customers_select"). empty (). trigger ('change') fonctionne pour moi. :)
Munna Khan

1
'$ ("# customers_select"). empty (). trigger (' change ')' a fonctionné pour moi, merci!
Tahirhan

52

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


2
J'utilise également la v4.0.3 et $('select2element').val("").trigger("change")fonctionne très bien aussi.
Roubi

Veuillez noter que vous devez également avoir une <option> vide dans votre <select>. Si vous utilisez ajax avec select2, cela vous aidera - $ ('# selectFieldId'). Prepend ('<option selected = "selected"> </option>')
musicjerm

20

Avec Select2 version 4.0.9, cela fonctionne pour moi:

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

1
Cela a rendu ma liste déroulante select2 vide. A travaillé pour moi. Merci.
disha

18

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.



11

POUR SUPPRIMER LA VALEUR SÉLECTIONNÉE

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

POUR EFFACER LES VALEURS D'OPTION

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

1
la fefe demande de réinitialiser le texte de l'espace réservé. Donc, seule la première partie de cette réponse est valide.
nterms

2
Oui, c'est pourquoi je souligne le titre des réponses.
Shanka SMS

2
En effet, la première réponse ne s'applique plus à partir de> 4.0. Mais la deuxième option m'a sauvé! C'est la solution lorsque vous voulez vraiment effacer le select2. Il suffit de régler le .val ('') pour sélectionner 2, ce n'est pas suffisant. Vous devez également effacer le html. Merci beaucoup!!!
wazza

9

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


Excellente solution. J'ai dû ajouter la fonction .last () pour cibler la boîte select2 nouvellement ajoutée. $('#select2-element').last().val('').trigger('change.select2');
InsParbo

8

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

8

C'est la bonne façon:

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

J'utilise la dernière version de Select2.


6

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

6

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


5

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

5

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

A fonctionné pour moi, mais mon déclencheur n'était que du «changement»
Gregory R. Sudderth

C'était la seule solution qui a fonctionné pour moi pour réinitialiser un Select2 à partir d'un autre Select2 en utilisant des données Ajax.
IlludiumPu36

5

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

3

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


2

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>

2

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


Il semble que vous ayez un auditeur lié à l' changeévénement. Essayez de déclencher change.select2- cela ne déclenchera pas les écouteurs liés (voir github.com/select2/select2/issues/3620 ).
Paul

2

à 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é.


1

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

Si vous utilisez selector.find ('option: not (: first)'). Html (''); ça devrait marcher.
wazza

1

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

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

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


1
C'était de loin le moyen le plus simple pour moi de le faire. Les autres méthodes n'ont pas fonctionné pour moi.
chevybow

1

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


1

Utilisez ce code dans votre fichier js

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

0

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


0

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

0

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.


0

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

0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.