web-dev-qa-db-fra.com

Effacer le menu déroulant à l'aide de jQuery Select2

J'essaie d'effacer par programmation un menu déroulant à l'aide de la fantastique bibliothèque Select2 . Le menu déroulant est rempli dynamiquement avec un appel ajax distant à l'aide de l'option Select2 query.

HTML:

<input id="remote" type="hidden" data-placeholder="Choose Something" />

Javascript:

        var $remote = $('#remote');

        $remote.select2({
            allowClear: true,
            minimumInputLength: 2,
            query: function(options){
                $.ajax({
                    dataType: 'json',
                    url: myURL + options.term,
                    error: function(jqXHR, textStatus, errorThrown){
                        smoke.alert(textStatus + ": server returned error on parsing arguments starting with " + options.term);
                    },
                    success: function(data, textStatus, jqXHR){
                        var results = [];
                        for(var i = 0; i < data.length; ++i){
                            results.Push({id: data[i].id, text: data[i].name});
                        }

                        options.callback({results: results, more: false});
                    }
                });
            }
        });

Malheureusement, l'appel à $remove.select2('val', '') lève l'exception suivante:

 Uncaught Error: cannot call val() if initSelection() is not defined

J'ai essayé de définir les paramètres attr, val, text et la fonction data spécifique à Select2. Je n'arrive pas à rendre le gars clair et à fonctionner comme un bouton radio. Quelqu'un a des suggestions?

javascriptjqueryjquery-select2
47
wheaties

Cela fonctionne pour moi: 

 $remote.select2('data', {id: null, text: null})

Cela fonctionne également avec jQuery validate lorsque vous le supprimez de cette façon. 

-- edit 2013-04-09

Au moment de la rédaction de cette réponse, c’était le seul moyen. Avec les correctifs récents, un moyen plus approprié est désormais disponible. 

$remote.select2('data', null)
74
Aktee

Dans le cas de Select2 Version 4+

la syntaxe a changé et vous devez écrire comme ceci:

// clear all option
$('#select_with_blank_data').html('').select2({data: [{id: '', text: ''}]});

// clear and add new option
$("#select_with_data").html('').select2({data: [
 {id: '', text: ''},
 {id: '1', text: 'Facebook'},
 {id: '2', text: 'Youtube'},
 {id: '3', text: 'Instagram'},
 {id: '4', text: 'Pinterest'}]});
35
Sruit A.Suk

C'est la bonne, select2 effacera la valeur sélectionnée et affichera l'espace réservé. 

$remote.select2('data', null)
32
Dewey

Avec select2 version 4, vous pouvez utiliser cette notation courte:

$('#remote').html('').select2({data: {id:null, text: null}});

Cela passe un tableau JSON avec null id et text à la select2 lors de la création, mais en premier lieu, avec .html('') vide les résultats précédemment stockés.

15
Lelio Faieta

Pour select2 version 4, utilisez ceci facilement:

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

Après avoir rempli l'élément select avec l'appel ajax, vous aurez peut-être besoin de cette ligne de code dans la section success pour mettre à jour le contenu:

  success: function(data, textStatus, jqXHR){
  $('#remote').change();
                }
15
Amin

Vous devriez utiliser celui-ci:

   $('#remote').val(null).trigger("change");
6
JackWang

La méthode proposée par @Lelio Faieta fonctionne pour moi, mais comme j'utilise bootstrap theme , elle supprime tous les paramètres de démarrage pour select2. J'ai donc utilisé le code suivant:

$("#remote option").remove();
5
Viktor Shatilo

Je suis un peu en retard, mais c'est ce qui fonctionne dans la dernière version (4.0.3):

$('#select_id').val('').trigger('change');
5
Andres SK

Ces deux fonctionnent pour moi pour effacer le menu déroulant:

.select2('data', null)
.select2('val', null)

Mais remarque importante: la valeur ne sera pas réinitialisée, .val () retournera la première option même si elle n’est pas sélectionnée. J'utilise Select2 3.5.3

3
realplay

De> 4.0 afin de vraiment nettoyer le select2 vous devez faire ce qui suit:

$remote.select2.val('');
$remote.select2.html('');
selectedValues = []; // if you have some variable where you store the values
$remote.select2.trigger("change");

Veuillez noter que nous sélectionnons le select2 en fonction de la question initiale. Dans votre cas, vous sélectionnerez probablement le select2 d'une manière différente.

J'espère que ça aide.

1
wazza

J'ai trouvé la réponse (compliments à user780178) que je cherchais dans cette autre question:

Réinitialise la valeur select2 et affiche placeholdler

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

Vous pouvez utiliser ceci ou consulter plus loin ceci https://select2.org/programmatic-control/add-select-clear-items

$('#mySelect2').val(null).trigger('change');
0
Rajdip Khavad

Cela a résolu mon problème dans la version 3.5.2.

$remote.empty().append(new Option()).trigger('change');

Selon ce problème vous avez besoin d’une option vide dans la balise select pour que l’espace réservé s’affiche.

0
Michał Szymański

Comme aucun d’entre eux n’a fonctionné pour moi (select2 4.0.3), la méthode std select a été choisie.

for(var i = selectbox.options.length - 1 ; i >= 0 ; i--)
    selectbox.remove(i);
0
ManuelSchneid3r