web-dev-qa-db-fra.com

Réinitialisation de la valeur Select2 dans la liste déroulante avec le bouton de réinitialisation

Quel serait le meilleur moyen de réinitialiser l'élément sélectionné à sa valeur par défaut? J'utilise la bibliothèque Select2 et lors de l'utilisation d'un bouton normal type="reset", la valeur du menu déroulant n'est pas réinitialisée.

Ainsi, lorsque j'appuie sur mon bouton, je souhaite que "Tous" s'affiche à nouveau.

jQuery 

$("#d").select2();

html 

<select id="d" name="d">
  <option selected disabled>All</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
javascripthtmlhtml-formjquery-select2
55
J2B

Je voudrais essayer quelque chose comme ça:

$(function(){
    $("#searchclear").click(function(){
        $("#d").select2('val', 'All');
    });
});
63
thtsigma

Vous pouvez également réinitialiser la valeur de select2 en utilisant

$(function() {
  $('#d').select2('data', null)
})

alternativement, vous pouvez transmettre 'allowClear': true lors de l’appel à select2 et il disposera d’un bouton X pour réinitialiser sa valeur.

60
Lenart

Selon la dernière version (select2 3.4.5) documentée ici , ce serait aussi simple que:

 $("#my_select").select2("val", "");
31
Daniel Dener

version 4.0

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

C’est désormais la solution correcte en fonction du message déconseillé émis en mode débogage: "La méthode select2("val") est obsolète et sera supprimée des versions ultérieures de Select2. Utilisez plutôt $element.val()"

29
Ondrej Henek

vous pouvez utiliser:

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

C’est très simple et marchez bien! Si vous utilisez le bouton de réinitialisation:

$('#btnReset').click(function() {
    $("#d").val(null).trigger("change"); 
});
16
Hoàng Vũ Tgtt

La meilleure façon de le faire est:

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID
$('#e1').append(new Option()); // to add the placeholder and the allow clear
7
anonymous anonymous

Je vois trois problèmes:

  1. L'affichage du contrôle Select2 n'est pas actualisé lorsque sa valeur est modifiée en raison d'une réinitialisation du formulaire.
  2. L'option "Tous" n'a pas d'attribut value.
  3. L'option "Tous" est désactivée.

Tout d'abord, je vous recommande d'utiliser la fonction setTimeout pour vous assurer que le code est exécuté une fois la réinitialisation du formulaire terminée.

Vous pouvez exécuter du code lorsque le bouton est cliqué:

$('#searchclear').click(function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

Ou lorsque le formulaire est réinitialisé:

$('form').on('reset', function() {
    setTimeout(function() {
        // Code goes here.
    }, 0);
});

Quant à quel code utiliser:

Puisque l'option "Tout" est désactivée, la réinitialisation du formulaire ne lui confère pas la valeur sélectionnée. Par conséquent, vous devez explicitement le définir comme valeur sélectionnée. Pour ce faire, utilisez la fonction Select2 "val". Et comme l'option "Tous" n'a pas d'attribut value, sa valeur est identique à celle de son texte, qui est "Tous". Par conséquent, vous devez utiliser le code donné par thtsigma dans la réponse sélectionnée:

$("#d").select2('val', 'All');

Si l'attribut value="" devait être ajouté à l'option "Tous", vous pourriez utiliser le code fourni par Daniel Dener:

$("#d").select2('val', '');

Si l'option "Tous" n'était pas désactivée, il vous suffirait alors de forcer le Select2 à s'actualiser, auquel cas vous pourriez utiliser:

$('#d').change();

Remarque: Le code suivant de Lenart est un moyen d'effacer la sélection, mais il ne provoque pas la sélection de l'option "Tous":

$('#d').select2('data', null)
6
John S

Si vous avez un widget de sélection rempli, par exemple:

<select>
    <option value="1">one</option>
    <option value="2" selected="selected">two</option>
    <option value="3">three</option>
    ...

vous voudrez convaincre select2 de restaurer la valeur initialement sélectionnée lors de la réinitialisation, de la même manière qu'un formulaire natif Pour cela, commencez par réinitialiser le formulaire natif, puis mettez à jour select2:

$('button[type="reset"]').click(function(event) {
    // Make sure we reset the native form first
    event.preventDefault();
    $(this).closest('form').get(0).reset();
    // And then update select2 to match
    $('#d').select2('val', $('#d').find(':selected').val());
}
4
nurikabe

Ce que j'ai trouvé fonctionne bien est la suivante:

si vous avez une option de marque de réservation telle que 'Tous' ou '-Select-' et que c'est la première option et que vous souhaitez définir la valeur sur lorsque vous réinitialisez ', vous pouvez utiliser

$('#id').select2('val',0);

0 est essentiellement l'option que vous souhaitez définir lors de la réinitialisation. Si vous souhaitez définir la dernière option, obtenez la longueur des options et définissez la longueur suivante: 1. Utilisez essentiellement l'index de l'option de votre choix pour définir la valeur select2 sur réinitialisation.

Si vous n'avez pas d'espace réservé et souhaitez simplement qu'aucun texte n'apparaisse dans le champ, utilisez:

$('#id').select2('val','');
2
Guito339

Pour réaliser une solution générique, pourquoi ne pas faire ceci:

$(':reset').live('click', function(){
    var $r = $(this);
    setTimeout(function(){ 
        $r.closest('form').find('.select2-offscreen').trigger('change'); 
    }, 10);
});

Ainsi, vous n'aurez pas à créer de nouvelle logique pour chaque sélection2 de votre application.

Et vous n'avez pas besoin de connaître la valeur par défaut (qui, en passant, ne doit pas nécessairement être "" ni même la première option)

Enfin, définir la valeur sur :selected n'entraînera pas toujours une réinitialisation réelle, car le sélectionné actuel pourrait bien avoir été défini par programme sur le client, alors que l'action par défaut de form select consiste à renvoyer les valeurs des éléments d'entrée au serveur. ceux envoyés. 

EDIT: .__ Sinon, compte tenu du statut obsolète de live, nous pourrions remplacer la première ligne par ceci:

$('form:has(:reset)').on('click', ':reset', function(){

ou mieux encore:

$('form:has(:reset)').on('reset', function(){

PS: Personnellement, j’ai le sentiment que la réinitialisation lors de la réinitialisation, ainsi que le déclenchement des événements blur et focus attachés à la sélection d’origine, figurent parmi les fonctionnalités les plus "manquantes" de select2!

1
Ifedi Okonkwo
    // Store default values
    $('#filter_form [data-plugin="select2"]').each(function(i, el){
        $(el).data("seldefault", $(el).find(":selected").val());
        });

    // Reset button action
    $('#formresetbtn').on('click', function() {
        $('#filter_form [data-plugin="select2"]').each(function(i, el){
            $(el).val($(el).data("seldefault")).trigger('change');
            });
        });
0
Ivan Savin

Pour moi, cela ne fonctionne qu'avec aucune de ces solutions

$(this).select2('val', null);

ou 

$(this).select2('val', '');
0
Mo.

Select2 utilise une classe CSS spécifique. Un moyen simple de la réinitialiser est la suivante:

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

Et vous avez l’avantage de si vous avez plusieurs Select2 dans le même formulaire, ils seront tous réinitialisés avec cette commande unique.

0
Marcio Mazzucato

Parfois, je veux réinitialiser Select2 mais je ne peux pas sans la méthode change (). Donc ma solution est:

function resetSelect2Wrapper(el, value){
    $(el).val(value);
    $(el).select2({
        minimumResultsForSearch: -1,
        language: "fr"
    });
}

En utilisant :

resetSelect2Wrapper("#mySelectId", "myValue");
0
Koks_rs