web-dev-qa-db-fra.com

Select2 désélectionne toutes les valeurs

Je veux désélectionner toutes les valeurs en un clic sans utiliser chaque id séparément.

J'ai tripoté pendant un moment, mais cela désélectionne uniquement la première valeur. Aucune suggestion?

Voici comment j'essaie de désélectionner:

$( "#mybutton" ).click(function() {    
   $("select").select2('val', '')
});

http://jsfiddle.net/6hZFU/75/

javascriptjqueryhtmlselectionjquery-select2
26
Jaanus

Essayez ceci à la place:

$('select').select2({
    placeholder: "select me"
});

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

Démo ici

22
Sergio
$("select").val('').change();

C'est tout:) http://jsfiddle.net/6hZFU/78/

Explication: lorsque vous modifiez la valeur d'une entrée ou que vous sélectionnez via le navigateur JavaScript, l'événement de modification ne sera pas déclenché pour cette modification (c'est ce que disent les spécifications).

Lorsque vous déclenchez un événement de changement, select2 rattrape et reflète la nouvelle valeur de select.

40
Ivan Ivanić

Si vous utilisez Select2 version 4.0, vous devrez utiliser la nouvelle syntaxe:

$("select").val(null).trigger("change");
13
Steve
$('#destinatariMail').val("-1").trigger("change");

De cette façon, vous désélectionnez également les options marquées qui ont été insérées "à la volée".

1
greg

Si quelqu'un est intéressé par la solution de configuration native Select2 (pas de bouton séparé).

Au moment de la rédaction (select2 v 4), Select2 peut ajouter un bouton pour effacer la multisélection. Pas besoin de la solution de contournement <option></option> pour que le paramètre fictif apparaisse:

$('#my-select').select2({
    placeholder: "Select something",
    allowClear: true
});

De la documentation .

0
Roman Susi

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

C'est une sorte de bidouille, où vous n'avez pas à trigger change.

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

ou 

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

Essayez ceci, cela fonctionne parfaitement.

$('#form-search-amenities > option').prop("selected", false);
$("li.select2-selection__choice").remove();

#form-search-amenities doit être remplacé par l'ID de votre liste déroulante <select>.

0
Munawar Ali

Si vous souhaitez supprimer plusieurs listes déroulantes multisélection à l'aide de l'API Select2 v4, voici un moyen simple:

$("li.select2-selection__choice").remove();
$(".select2").each(function() { $(this).val([]); });

Ne vous concentrez pas sur la liste déroulante et nettoyez les deux éléments "select" et "Select2";)

0
Bulzib Rugulus